/* ==========================================================================
   Chabela Cakes — design tokens (owned by the design-system piece)
   Brand: bordó #6E2129 · rosa #E4B8C4 · crema #FBF4EF
   Use the semantic aliases (--color-*) in components; the raw ramps (--c-*)
   are here for the rare case a component needs a specific step.
   Do not edit from other pieces: define missing values locally instead.
   ========================================================================== */
:root {
  /* ---- Raw palette ------------------------------------------------------ */
  /* Bordó (burgundy) */
  --c-burgundy-950: #2E0C10;
  --c-burgundy-900: #3F1217;
  --c-burgundy-800: #561A21;
  --c-burgundy-700: #6E2129;   /* brand */
  --c-burgundy-600: #832B34;
  --c-burgundy-500: #9B3A45;
  --c-burgundy-400: #B25E68;
  --c-burgundy-300: #C98A92;
  --c-burgundy-200: #DFB5BA;
  --c-burgundy-100: #F2DFE0;
  --c-burgundy-50:  #FAF0F0;
  --c-burgundy: var(--c-burgundy-700);

  /* Rosa (blush) */
  --c-blush-50:  #FDF5F7;
  --c-blush-100: #F9E8EC;
  --c-blush-200: #F1D3DB;
  --c-blush-300: #E4B8C4;      /* brand */
  --c-blush-400: #D99CAD;
  --c-blush-500: #C77D93;
  --c-blush: var(--c-blush-300);

  /* Crema (cream / paper) */
  --c-cream-50:  #FFFCF9;
  --c-cream-100: #FBF4EF;      /* brand page background */
  --c-cream-200: #F5EAE2;
  --c-cream-300: #ECDCD1;
  --c-cream-400: #DCC7B8;
  --c-cream: var(--c-cream-100);
  --c-cream-ink: #FBEDE6;      /* cream used as text/logo on bordó */

  /* Tinta (ink) — warm, never pure black */
  --c-ink-900: #2B1215;
  --c-ink-700: #4D3236;
  --c-ink-600: #6A5054;
  --c-ink-500: #7A6064;
  --c-ink-300: #BBA8AA;
  --c-ink: var(--c-ink-900);

  /* Semánticos */
  --c-success-700: #2E6547;
  --c-success-100: #E3F0E7;
  --c-warning-700: #8A5310;
  --c-warning-100: #FBEED6;
  --c-danger-700:  #B3261E;
  --c-danger-100:  #FBE7E4;
  --c-whatsapp:    #25D366;
  --c-whatsapp-700:#128C4B;

  /* ---- Semantic aliases (use these) ------------------------------------ */
  --color-bg:               var(--c-cream-100);
  --color-surface:          var(--c-cream-50);   /* cards, sheets, drawers */
  --color-surface-sunken:   var(--c-cream-200);  /* wells, image placeholders */
  --color-surface-blush:    var(--c-blush-100);
  --color-surface-brand:    var(--c-burgundy-700);
  --color-surface-brand-deep: var(--c-burgundy-900);

  --color-text:             var(--c-ink-900);    /* 16.1:1 on cream */
  --color-text-muted:       var(--c-ink-600);    /*  6.7:1 on cream */
  --color-text-subtle:      var(--c-ink-500);    /*  5.2:1 — meta, placeholders */
  --color-text-brand:       var(--c-burgundy-700);/* 10.1:1 on cream */
  --color-text-on-brand:    var(--c-cream-ink);
  --color-text-on-brand-muted: rgba(251, 237, 230, .72);

  --color-accent:           var(--c-burgundy-700);
  --color-accent-hover:     var(--c-burgundy-600);
  --color-accent-pressed:   var(--c-burgundy-800);
  --color-accent-soft:      var(--c-blush-200);

  --color-line:             rgba(110, 33, 41, .12);
  --color-line-strong:      rgba(110, 33, 41, .24);
  --color-line-on-brand:    rgba(251, 237, 230, .22);

  --color-success:          var(--c-success-700);
  --color-success-bg:       var(--c-success-100);
  --color-warning:          var(--c-warning-700);
  --color-warning-bg:       var(--c-warning-100);
  --color-danger:           var(--c-danger-700);
  --color-danger-bg:        var(--c-danger-100);

  --color-overlay:          rgba(43, 18, 21, .46);  /* sheet / drawer backdrop */
  --color-focus:            var(--c-burgundy-500);
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus);

  /* ---- Typography ------------------------------------------------------- */
  --font-script:  'Send Flowers', 'Snell Roundhand', cursive;          /* upright monoline, kin to the logo — one-word accents only */
  --font-display: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;  /* titles, product names, prices */
  --font-sans:    'Jost', 'Futura', 'Avenir Next', system-ui, sans-serif; /* UI + body copy */
  --font-body:    var(--font-sans);

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Scale — mobile first, fluid toward desktop */
  --text-2xs: .6875rem;                                  /* 11 — tracked caps labels */
  --text-xs:  .75rem;                                    /* 12 */
  --text-sm:  .875rem;                                   /* 14 */
  --text-base: 1rem;                                     /* 16 — never smaller for inputs */
  --text-md:  1.125rem;                                  /* 18 */
  --text-lg:  1.3125rem;                                 /* 21 */
  --text-xl:  clamp(1.5rem, 1.32rem + .8vw, 1.875rem);   /* 24 → 30 */
  --text-2xl: clamp(1.875rem, 1.55rem + 1.5vw, 2.5rem);  /* 30 → 40 */
  --text-3xl: clamp(2.375rem, 1.8rem + 2.8vw, 3.5rem);   /* 38 → 56 */
  --text-4xl: clamp(3rem, 2.1rem + 4.4vw, 5rem);         /* 48 → 80 */
  --text-script: clamp(3.25rem, 2.4rem + 4vw, 5.5rem);

  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tracking-display: -.012em;
  --tracking-normal: 0;
  --tracking-wide: .04em;
  --tracking-caps: .18em;     /* small caps labels: "CAKES", eyebrows, badges */

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --space-0: 0;
  --space-px: 1px;
  --space-1: .25rem;   /*  4 */
  --space-2: .5rem;    /*  8 */
  --space-3: .75rem;   /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-7: 2rem;     /* 32 */
  --space-8: 2.5rem;   /* 40 */
  --space-9: 3rem;     /* 48 */
  --space-10: 4rem;    /* 64 */
  --space-11: 5rem;    /* 80 */
  --space-12: 6rem;    /* 96 */
  --space-section: clamp(3.5rem, 2.5rem + 4vw, 6rem);

  /* ---- Layout ------------------------------------------------------------ */
  --gutter: clamp(1rem, .6rem + 2vw, 2rem);   /* 16 on phones */
  --container: 1200px;
  --container-narrow: 720px;
  --container-prose: 34rem;
  --header-h: 60px;
  --tap: 44px;          /* minimum tap target */
  --tap-lg: 52px;       /* primary CTAs */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* ---- Radii --------------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-sheet: 28px;   /* top corners of bottom sheets */
  --radius-pill: 999px;

  /* ---- Elevation (warm, bordó-tinted shadows) ---------------------------- */
  --shadow-xs: 0 1px 2px rgba(63, 18, 23, .06);
  --shadow-sm: 0 1px 2px rgba(63, 18, 23, .05), 0 3px 10px -2px rgba(63, 18, 23, .08);
  --shadow-md: 0 2px 4px rgba(63, 18, 23, .04), 0 10px 28px -6px rgba(63, 18, 23, .14);
  --shadow-lg: 0 4px 10px rgba(63, 18, 23, .05), 0 28px 56px -14px rgba(63, 18, 23, .26);
  --shadow-sheet: 0 -10px 40px -8px rgba(63, 18, 23, .22);
  --shadow-inset: inset 0 0 0 1px var(--color-line);

  /* ---- Motion --------------------------------------------------------------- */
  /* Budget: two "nice" animations site-wide (hero entrance, add-to-cart).
     Everything else is functional: ≤250ms fades, sheet/drawer slides, press states. */
  --ease-out: cubic-bezier(.22, 1, .36, 1);        /* entering, sliding in */
  --ease-in: cubic-bezier(.55, 0, 1, .45);         /* leaving */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);     /* position changes */
  --ease-spring: cubic-bezier(.16, 1, .3, 1);    /* tiny bumps (cart badge) — expo-out, no overshoot */
  --dur-instant: 90ms;    /* press feedback */
  --dur-fast: 160ms;      /* hovers, color changes */
  --dur-base: 220ms;      /* fades */
  --dur-slow: 320ms;      /* drawers */
  --dur-sheet: 420ms;     /* bottom sheet slide */

  /* ---- Z-index layers ---------------------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;    /* header, sticky category bar */
  --z-fab: 200;       /* floating cart bar */
  --z-overlay: 400;   /* backdrops */
  --z-drawer: 500;    /* cart drawer */
  --z-sheet: 510;     /* product sheet */
  --z-modal: 600;     /* checkout */
  --z-toast: 700;

  /* ---- Legacy aliases (kept for pieces built against the stub) ---------- */
  --c-ink-muted: var(--c-ink-600);
}

/* Reduced motion: collapse durations so functional transitions become instant. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-sheet: 1ms; }
}
html[data-reduced-motion] { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-sheet: 1ms; }