/* Webfonts — loaded from Google Fonts.
   NOTE: Anís Bakery's real logotype is a hand-painted brush lettering that is
   NOT available as a webfont. "Fredoka" is the friendly rounded stand-in used
   for playful headings; the logo mark itself is always the real PNG asset. */
@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Sacramento&family=Manrope:wght@400;500;600;700;800&display=swap");


/* ============================================================
   COLORS — Anís Bakery
   Primary is the warm bakery orange (#ee8600) sampled from the logo.
   A soft cream/peach family (from the "Lista de Precios") carries the
   premium register. Instagram + rainbow gradients are brand accents.
   ============================================================ */
:root {
  /* ---- Brand orange (primary) ---- */
  --anis-orange-700: #a85f00;
  --anis-orange-600: #c96f00; /* pressed / dark accent */
  --anis-orange-500: #ee8600; /* PRIMARY — the logo orange */
  --anis-orange-400: #ff9d1f; /* hover / lift */
  --anis-orange-300: #ffbb63;
  --anis-orange-200: #ffd6a0;
  --anis-orange-100: #ffe9cf;

  /* ---- Cream & peach (premium / surfaces) ---- */
  --cream-50:  #fdf8f1; /* page background */
  --cream-100: #f9efe1; /* card / lista background */
  --cream-200: #f5e6d3;
  --peach-300: #f3cfa8; /* lista pill */
  --peach-400: #edb98a; /* deeper pill */
  --peach-500: #e3a374;

  /* ---- Cocoa / brown (text on cream) ---- */
  --cocoa-900: #2e1c0f; /* headings */
  --cocoa-700: #4a2f1a; /* body strong */
  --cocoa-500: #7a5230; /* body / script accent */
  --cocoa-400: #9c7a5a; /* muted */

  /* ---- Neutrals ---- */
  --white: #ffffff;
  --ink-900: #171310; /* near-black warm (video intro bg) */
  --ink-700: #2b2320;
  --line: rgba(74, 47, 26, 0.14); /* hairline borders on cream */
  --line-strong: rgba(74, 47, 26, 0.26);

  /* ---- Semantic aliases ---- */
  --surface-page:    var(--cream-50);
  --surface-card:    var(--white);
  --surface-warm:    var(--cream-100);
  --surface-pill:    var(--peach-300);
  --surface-invert:  var(--ink-900);

  --text-heading:    var(--cocoa-900);
  --text-body:       var(--cocoa-700);
  --text-muted:      var(--cocoa-400);
  --text-on-orange:  #ffffff;
  --text-on-invert:  #fff3e2;
  --text-price:      var(--cocoa-900);

  --brand-primary:   var(--anis-orange-500);
  --brand-hover:     var(--anis-orange-400);
  --brand-press:     var(--anis-orange-600);
  --brand-accent:    var(--peach-400);

  --focus-ring:      var(--anis-orange-500);

  /* ---- Gradients ---- */
  /* Warm sunrise — hero washes, buttons on dark */
  --grad-sunrise: linear-gradient(135deg, #ffb347 0%, #ee8600 55%, #c96f00 100%); /* @kind color */
  /* Instagram — social badges only */
  --grad-instagram: linear-gradient(45deg, #ffd600 0%, #ff7a00 30%, #ff2e74 65%, #b026b0 100%); /* @kind color */
  /* Rainbow — Andrea's neurodivergent pride, used sparingly (∞ accents) */
  --grad-pride: linear-gradient(90deg, #ff5a5a, #ff9d1f, #ffd600, #38c172, #2f9bff, #a26bff); /* @kind color */
  /* Cream scrim — protection gradient over photos */
  --scrim-warm: linear-gradient(to top, rgba(46,28,15,0.72) 0%, rgba(46,28,15,0) 62%); /* @kind color */
}


/* ============================================================
   TYPOGRAPHY — Anís Bakery
   Fredoka        → playful rounded display (headings, buttons)
   Playfair Display → elegant serif (premium titles, "Lista de Precios")
   Sacramento     → script flourish accents ("prémiate", "precios")
   Manrope        → body & UI text
   ============================================================ */
:root {
  --font-display: "Fredoka", "Trebuchet MS", sans-serif;   /* fun headings */
  --font-serif:   "Playfair Display", Georgia, serif;      /* premium titles */
  --font-script:  "Sacramento", "Segoe Script", cursive;   /* flourish accent */
  --font-body:    "Manrope", system-ui, -apple-system, sans-serif;

  /* Type scale (rem, 16px base) */
  --fs-3xs: 0.6875rem; /* 11px — labels/kicker */
  --fs-2xs: 0.75rem;   /* 12px */
  --fs-xs:  0.8125rem;  /* 13px */
  --fs-sm:  0.9375rem;  /* 15px */
  --fs-md:  1rem;       /* 16px — body */
  --fs-lg:  1.125rem;   /* 18px */
  --fs-xl:  1.375rem;   /* 22px */
  --fs-2xl: 1.75rem;    /* 28px */
  --fs-3xl: 2.375rem;   /* 38px */
  --fs-4xl: 3.25rem;    /* 52px */
  --fs-5xl: 4.5rem;     /* 72px — hero */

  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-extra: 800; /* @kind font */

  /* Line heights */
  --lh-tight: 1.05; /* @kind other */
  --lh-snug: 1.2; /* @kind other */
  --lh-normal: 1.5; /* @kind other */
  --lh-relaxed: 1.65; /* @kind other */

  /* Letter spacing */
  --ls-tight: -0.02em; /* @kind other */
  --ls-normal: 0; /* @kind other */
  --ls-wide: 0.04em; /* @kind other */
  --ls-kicker: 0.22em; /* @kind other */

  /* Semantic roles */
  --role-hero:      var(--fw-semibold) var(--fs-5xl)/var(--lh-tight) var(--font-display); /* @kind font */
  --role-title:     var(--fw-semibold) var(--fs-3xl)/var(--lh-snug) var(--font-display); /* @kind font */
  --role-serif-title: var(--fw-600, 600) var(--fs-3xl)/var(--lh-snug) var(--font-serif); /* @kind font */
  --role-body:      var(--fw-regular) var(--fs-md)/var(--lh-relaxed) var(--font-body); /* @kind font */
  --role-label:     var(--fw-bold) var(--fs-3xs)/1 var(--font-body); /* @kind font */
}


/* ============================================================
   SPACING & LAYOUT — Anís Bakery  (4px base grid)
   ============================================================ */
:root {
  --sp-0: 0; /* @kind spacing */
  --sp-1: 0.25rem;  /* 4 */
  --sp-2: 0.5rem;   /* 8 */
  --sp-3: 0.75rem;  /* 12 */
  --sp-4: 1rem;     /* 16 */
  --sp-5: 1.5rem;   /* 24 */
  --sp-6: 2rem;     /* 32 */
  --sp-7: 2.5rem;   /* 40 */
  --sp-8: 3.5rem;   /* 56 */
  --sp-9: 5rem;     /* 80 */
  --sp-10: 7rem;    /* 112 */

  /* Radii — the brand is soft & rounded (pills everywhere) */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --radius-blob: 42% 58% 60% 40% / 55% 45% 55% 45%; /* organic dollop */

  /* Container widths */
  --container-sm: 640px; /* @kind spacing */
  --container-md: 960px; /* @kind spacing */
  --container-lg: 1200px; /* @kind spacing */

  /* Section rhythm */
  --section-y: var(--sp-10); /* @kind spacing */
  --gutter: var(--sp-5); /* @kind spacing */
}


/* ============================================================
   EFFECTS — shadows, motion, borders — Anís Bakery
   Shadows are warm-tinted (brown/orange), never neutral grey.
   Motion is soft & bouncy — treats should feel joyful, never harsh.
   ============================================================ */
:root {
  /* Warm-tinted shadows */
  --shadow-xs:  0 1px 2px rgba(74, 47, 26, 0.10);
  --shadow-sm:  0 2px 8px rgba(74, 47, 26, 0.10);
  --shadow-md:  0 10px 24px -8px rgba(74, 47, 26, 0.20);
  --shadow-lg:  0 22px 48px -16px rgba(74, 47, 26, 0.28);
  --shadow-orange: 0 14px 30px -10px rgba(238, 134, 0, 0.55); /* glow under primary buttons */
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* Borders */
  --border-hair: 1px solid var(--line); /* @kind other */
  --border-card: 1px solid var(--line); /* @kind other */
  --border-dashed: 1.5px dashed var(--line-strong); /* @kind other */

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
  --dur-slow: 460ms; /* @kind other */

  /* Interaction deltas */
  --hover-lift: translateY(-3px); /* @kind other */
  --press-scale: scale(0.96); /* @kind other */

  /* Blur / glass (used on sticky nav over photos) */
  --blur-glass: saturate(140%) blur(14px); /* @kind other */
  --glass-cream: rgba(253, 248, 241, 0.78); /* @kind other */
}