/* ============================================
   OnçaMansa — Design Tokens
   ============================================ */

:root {
  /* --- Colors --- */
  --color-bg:          #F5F0E8;
  --color-bg-alt:      #EDE7DB;
  --color-surface:     #FFFFFF;
  --color-ink:         #1A1A1A;
  --color-ink-light:   #8C8478;
  --color-ink-muted:   #B0A898;

  --color-forest:      #3B5D44;
  --color-forest-dark: #2E4A36;
  --color-gold:        #D4A843;
  --color-gold-light:  #E8C96A;
  --color-coral:       #D97756;
  --color-lavender:    #C5B8D9;
  --color-dark:        #232320;

  /* --- Typography --- */
  --font-serif:   'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Type scale (clamp for fluid sizing) */
  --text-xs:     clamp(0.70rem, 0.65rem + 0.25vw, 0.80rem);   /* 11–13px */
  --text-sm:     clamp(0.80rem, 0.75rem + 0.25vw, 0.875rem);  /* 13–14px */
  --text-base:   clamp(0.9375rem, 0.875rem + 0.3vw, 1.0625rem); /* 15–17px */
  --text-lg:     clamp(1.125rem, 1rem + 0.5vw, 1.25rem);      /* 18–20px */
  --text-xl:     clamp(1.35rem, 1.1rem + 1vw, 1.75rem);       /* 22–28px */
  --text-2xl:    clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);      /* 28–40px */
  --text-3xl:    clamp(2.25rem, 1.5rem + 3vw, 3rem);        /* 36–56px */
  --text-4xl:    clamp(2.75rem, 1.8rem + 4vw, 4rem);        /* 44–72px */
  --text-hero:   clamp(3rem, 2rem + 5vw, 3rem);             /* 48–88px */

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;

  /* --- Spacing --- */
  --space-xs:    0.25rem;   /* 4px */
  --space-sm:    0.5rem;    /* 8px */
  --space-md:    1rem;      /* 16px */
  --space-lg:    1.5rem;    /* 24px */
  --space-xl:    2rem;      /* 32px */
  --space-2xl:   3rem;      /* 48px */
  --space-3xl:   4rem;      /* 64px */
  --space-4xl:   6rem;      /* 96px */
  --space-5xl:   8rem;      /* 128px */

  /* --- Layout --- */
  --container-max:   1200px;
  --container-wide:  1400px;
  --container-narrow: 720px;
  --gutter:          clamp(1rem, 0.5rem + 2vw, 2rem);

  /* --- Borders & Radius --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill:  999px;

  /* --- Shadows --- */
  --shadow-sm:   0 1px 3px rgba(26, 26, 26, 0.06);
  --shadow-md:   0 4px 12px rgba(26, 26, 26, 0.08);
  --shadow-lg:   0 8px 30px rgba(26, 26, 26, 0.12);

  /* --- Transitions --- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;

  /* --- Z-index layers --- */
  --z-base:     1;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-modal:    300;
}