/* ==========================================================================
   Saté Ria — Design Tokens
   Premium charcoal & gold heritage system
   ========================================================================== */

:root {
  /* ---- Color: brand ---- */
  --color-ink:            #1C1917; /* charcoal / primary surface       */
  --color-ink-2:          #292524; /* raised charcoal                  */
  --color-ink-3:          #44403C; /* secondary                        */
  --color-on-primary:     #FFFFFF;

  --color-gold:           #C8941F; /* signature accent (slightly bright for dark) */
  --color-gold-deep:      #A16207; /* CTA on light                      */
  --color-gold-hover:     #854D0E;
  --color-gold-soft:      #E8C879; /* highlights, hairlines on dark     */

  --color-flame:          #DC2626; /* fiery highlight, sparing use      */
  --color-ember:          #EA580C;

  /* ---- Color: neutrals ---- */
  --color-bg:             #FAF7F2; /* warm paper                        */
  --color-bg-2:           #F3EDE3; /* warm panel                        */
  --color-fg:             #1A1714; /* near-black warm text on light     */
  --color-fg-muted:       #57514B;
  --color-border:         #E3DACB;
  --color-border-strong:  #CDBFA8;

  /* text on dark */
  --color-fg-on-dark:     #F5EFE6;
  --color-fg-on-dark-mut: #BCB2A4;
  --color-border-on-dark: rgba(232, 200, 121, 0.18);

  /* ---- Semantic ---- */
  --color-surface:        var(--color-bg);
  --color-surface-raised: #FFFFFF;
  --color-text:           var(--color-fg);
  --color-text-muted:     var(--color-fg-muted);
  --color-accent:         var(--color-gold-deep);
  --color-ring:           var(--color-gold);

  /* ---- Typography ---- */
  --font-display: "Playfair Display SC", Georgia, "Times New Roman", serif;
  --font-body:    "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: clamp(2rem, 1.4rem + 2.6vw, 2.75rem);
  --fs-48: clamp(2.25rem, 1.5rem + 3.4vw, 3.25rem);
  --fs-64: clamp(2.75rem, 1.4rem + 6vw, 4.75rem);

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-body:  1.65;

  --tracking-wide: 0.16em;  /* eyebrows / labels */
  --tracking-mid:  0.04em;

  /* ---- Spacing (4 / 8 rhythm) ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-28: 7rem;

  /* ---- Layout ---- */
  --header-h:     72px;
  --container:    1200px;
  --container-nar: 820px;
  --gutter:       clamp(1rem, 0.4rem + 2.6vw, 2rem);
  --radius-sm:    6px;
  --radius:       12px;
  --radius-lg:    20px;
  --radius-pill:  999px;

  /* ---- Elevation ---- */
  --shadow-sm:  0 1px 2px rgba(26, 23, 20, 0.06), 0 1px 3px rgba(26, 23, 20, 0.08);
  --shadow:     0 6px 16px rgba(26, 23, 20, 0.10), 0 2px 4px rgba(26, 23, 20, 0.06);
  --shadow-lg:  0 24px 48px -12px rgba(26, 23, 20, 0.30);
  --shadow-gold: 0 10px 30px -8px rgba(200, 148, 31, 0.45);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast: 160ms;
  --dur:      240ms;
  --dur-slow: 400ms;

  /* ---- Z-index scale ---- */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  40;
  --z-overlay: 100;
  --z-modal:   1000;
}