/* ============================================================================
   Nyraa Skin Care — Design Tokens
   Canonical CSS custom properties. Mirrors docs/css-tokens.md.
   LOAD THIS FIRST. Never hardcode a value that exists here.
   Palette: screenshot set (authoritative for this theme).
   ============================================================================ */

:root {
  /* ============================================================
     COLORS — Brand (exact)
     ============================================================ */
  --color-primary:        #A67C49;
  --color-secondary:      #76933C;
  --color-tertiary:       #F9F6F1;
  --color-neutral:        #2D2926;

  /* COLORS — Semantic */
  --color-bg:             #F9F6F1;
  --color-surface:        #EFEAE1;
  --color-surface-alt:    #FFFFFF;
  --color-border:         #E2DBCF;
  --color-divider:        #E8E2D8;

  --color-text:           #2D2926;
  --color-text-secondary: #6B645C;
  --color-text-muted:     #9C948A;
  --color-text-inverse:   #F9F6F1;

  --color-success:        #5E9E3E;
  --color-warning:        #D9A441;
  --color-error:          #C0392B;
  --color-overlay:        rgba(45, 41, 38, 0.55);

  /* COLORS — Primary ramp */
  --primary-50:  #F5EEE4;
  --primary-100: #E9DAC4;
  --primary-200: #D8BE9A;
  --primary-300: #C6A271;
  --primary-400: #B68E5A;
  --primary-500: #A67C49;
  --primary-600: #8C683C;
  --primary-700: #6F522F;
  --primary-800: #523C23;
  --primary-900: #352716;

  /* COLORS — Secondary ramp */
  --secondary-50:  #EFF3E4;
  --secondary-100: #DCE6C4;
  --secondary-200: #C2D49B;
  --secondary-300: #A6C06F;
  --secondary-400: #8EAA54;
  --secondary-500: #76933C;
  --secondary-600: #627B32;
  --secondary-700: #4D6027;
  --secondary-800: #39481D;
  --secondary-900: #252F13;

  /* COLORS — Neutral ramp */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F9F6F1;
  --neutral-100: #EFEAE1;
  --neutral-200: #E2DBCF;
  --neutral-300: #C9C0B4;
  --neutral-400: #9C948A;
  --neutral-500: #6B645C;
  --neutral-600: #4F4944;
  --neutral-700: #3D3833;
  --neutral-800: #332E2A;
  --neutral-900: #2D2926;

  /* ============================================================
     TYPOGRAPHY — Families
     ============================================================ */
  --font-headline: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:     'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* TYPOGRAPHY — Font sizes */
  --fs-h1:      3.052rem;  /* 48.8px  */
  --fs-h2:      2.441rem;  /* 39px    */
  --fs-h3:      1.953rem;  /* 31.25px */
  --fs-h4:      1.563rem;  /* 25px    */
  --fs-h5:      1.25rem;   /* 20px    */
  --fs-h6:      1rem;      /* 16px    */
  --fs-body-lg: 1.125rem;  /* 18px    */
  --fs-body:    1rem;      /* 16px    */
  --fs-small:   0.875rem;  /* 14px    */
  --fs-caption: 0.75rem;   /* 12px    */
  --fs-button:  0.9375rem; /* 15px    */
  --fs-nav:     0.9375rem; /* 15px    */
  --fs-label:   0.875rem;  /* 14px    */

  /* TYPOGRAPHY — Font weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* TYPOGRAPHY — Line heights */
  --lh-tight:   1.1;
  --lh-heading: 1.2;
  --lh-snug:    1.4;
  --lh-body:    1.6;

  /* TYPOGRAPHY — Letter spacing */
  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.02em;
  --ls-label:   0.04em;

  /* ============================================================
     SPACING — 8px scale
     ============================================================ */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  --section-padding-y:        var(--space-2xl);
  --section-padding-y-mobile: 40px;

  /* ============================================================
     BORDER RADIUS
     ============================================================ */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* ============================================================
     SHADOWS
     ============================================================ */
  --shadow-xs: 0 1px 2px  rgba(45,41,38,0.05);
  --shadow-sm: 0 2px 8px  rgba(45,41,38,0.06);
  --shadow-md: 0 6px 16px rgba(45,41,38,0.10);
  --shadow-lg: 0 12px 32px rgba(45,41,38,0.14);
  --shadow-xl: 0 24px 48px rgba(45,41,38,0.18);

  /* ============================================================
     CONTAINER WIDTHS
     ============================================================ */
  --container-sm:      640px;
  --container-md:      768px;
  --container-lg:      1024px;
  --container-xl:      1280px;
  --container-max:     1280px;
  --container-padding: 24px;

  /* ============================================================
     Z-INDEX SCALE
     ============================================================ */
  --z-base:      0;
  --z-content:   1;
  --z-dropdown:  1000;
  --z-sticky:    1100;
  --z-header:    1200;
  --z-overlay:   1300;
  --z-drawer:    1400;
  --z-modal:     1500;
  --z-popover:   1600;
  --z-toast:     1700;
  --z-tooltip:   1800;

  /* ============================================================
     TRANSITION TIMINGS
     ============================================================ */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 350ms;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);

  --transition-base:  all var(--dur-base) var(--ease-standard);
  --transition-color: color var(--dur-fast) var(--ease-standard),
                      background-color var(--dur-fast) var(--ease-standard),
                      border-color var(--dur-fast) var(--ease-standard);

  /* ============================================================
     COMPONENT TOKENS (derived)
     ============================================================ */
  /* Buttons */
  --btn-height:      44px;
  --btn-height-sm:   36px;
  --btn-height-lg:   52px;
  --btn-padding-x:   24px;
  --btn-padding-y:   12px;
  --btn-radius:      var(--radius-sm);
  --btn-font-size:   var(--fs-button);
  --btn-font-weight: var(--fw-semibold);
  --btn-transition:  var(--transition-base);

  /* Inputs */
  --input-height:     44px;
  --input-radius:     var(--radius-md);
  --input-border:     1px solid var(--color-border);
  --input-padding:    12px 16px;
  --input-focus-ring: 0 0 0 3px rgba(166,124,73,0.18);

  /* Cards */
  --card-bg:           var(--color-surface);
  --card-radius:       var(--radius-lg);
  --card-padding:      24px;
  --card-shadow:       var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);
  --card-hover-lift:   -4px;

  /* Icons */
  --icon-sm:     18px;
  --icon-md:     20px;
  --icon-lg:     24px;
  --icon-stroke: 2px;
  --icon-circle: 40px;

  /* Header / Footer */
  --header-height:        72px;
  --header-height-mobile: 60px;
  --header-bg:            var(--color-tertiary);
  --nav-gap:              32px;
  --footer-bg:            var(--color-neutral);
  --footer-text:          var(--color-tertiary);

  /* Logo */
  --logo-height-desktop: 40px;
  --logo-height-sticky:  32px;
  --logo-height-mobile:  32px;
  --logo-safe-area:      24px;

  /* ============================================================
     BREAKPOINTS (reference — CSS vars can't be used in @media)
     ============================================================ */
  --bp-mobile:  576px;
  --bp-tablet:  768px;
  --bp-laptop:  992px;
  --bp-desktop: 1200px;
  --bp-wide:    1440px;
}