/* ============================================================
   Design Tokens — Single source of truth for the entire site
   Adheres to minimalist protocol: warm monochrome + spot accents
   ============================================================ */

:root {
  /* ---- Color Palette ---- */
  --color-primary:        #2C5F4E;   /* Deep teal-green — links, accents */
  --color-primary-hover:  #234B3E;   /* Darker hover */
  --color-primary-dark:   #1A332B;   /* Dark green — hero/footer backgrounds */
  --color-primary-muted:  #EDF3EC;   /* Pale green — tags/badges */

  --color-accent:         #D4A76A;   /* Warm gold — sparing use: highlights */
  --color-accent-muted:   #FBF3DB;   /* Pale yellow wash for tags */

  --color-canvas:         #FFFFFF;   /* Main page background — pure white */
  --color-surface:        #FFFFFF;   /* Card/section surface */
  --color-surface-alt:    #F4F6F4;   /* Alternate surface — barely-there green tint */

  --color-border:         #EAEAEA;   /* Standard 1px border */
  --color-border-light:   rgba(0,0,0,0.06);   /* Subtle dividers */

  --color-text:           #1A1917;   /* Near-black body text — never pure #000 */
  --color-text-muted:     #504E4A;   /* Secondary text — ≥5:1 on white */
  --color-text-inverse:   #FFFFFF;   /* Text on dark backgrounds */

  --color-btn-bg:         #111111;   /* Primary button background */
  --color-btn-text:       #FFFFFF;   /* Primary button text */
  --color-btn-hover:      #333333;   /* Primary button hover */

  --color-error:          #9F2F2D;   /* Error text */
  --color-error-bg:       #FDEBEC;   /* Error background */
  --color-success:        #346538;   /* Success text */
  --color-success-bg:     #EDF3EC;   /* Success background */
  --color-info:           #1F6C9F;   /* Info text */
  --color-info-bg:        #E1F3FE;   /* Info background */

  /* ---- Typography ---- */
  --font-sans:            'Manrope', sans-serif;
  --font-editorial:       'Sora', sans-serif;
  --font-mono:            'Geist Mono', 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace;

  /* Type scale — fluid with clamp(), ≥1.25 ratio between steps */
  --text-xs:              clamp(0.6875rem, 0.4vw + 0.55rem, 0.75rem);    /* 11–12px */
  --text-sm:              clamp(0.8125rem, 0.4vw + 0.6rem, 0.9375rem);   /* 13–15px */
  --text-base:            clamp(0.9375rem, 0.5vw + 0.7rem, 1.125rem);    /* 15–18px */
  --text-lg:              clamp(1.125rem, 0.6vw + 0.8rem, 1.3125rem);    /* 18–21px */
  --text-xl:              clamp(1.3125rem, 0.8vw + 0.8rem, 1.5625rem);   /* 21–25px */
  --text-2xl:             clamp(1.5625rem, 1vw + 0.9rem, 1.875rem);      /* 25–30px */
  --text-3xl:             clamp(1.875rem, 1.2vw + 1rem, 2.25rem);        /* 30–36px */
  --text-4xl:             clamp(2.25rem, 1.5vw + 1.2rem, 2.75rem);       /* 36–44px */
  --text-5xl:             clamp(2.75rem, 2vw + 1.5rem, 3.5rem);          /* 44–56px */

  --font-normal:          400;
  --font-medium:          500;
  --font-semibold:        600;
  --font-bold:            700;

  --leading-tight:        1.2;
  --leading-snug:         1.35;
  --leading-normal:       1.65;
  --leading-relaxed:      1.75;

  --tracking-tight:       -0.03em;
  --tracking-normal:      0;
  --tracking-wide:        0.05em;

  /* ---- Spacing Scale ---- */
  --space-1:              0.25rem;
  --space-2:              0.5rem;
  --space-3:              0.75rem;
  --space-4:              1rem;
  --space-5:              1.25rem;
  --space-6:              1.5rem;
  --space-8:              2rem;
  --space-10:             2.5rem;
  --space-12:             3rem;
  --space-16:             4rem;
  --space-20:             5rem;
  --space-24:             6rem;
  --space-32:             8rem;

  /* ---- Layout ---- */
  --container-max:        1200px;
  --container-narrow:     780px;     /* For editorial/reading content */
  --container-padding:    var(--space-6);

  /* ---- Component Tokens ---- */
  --radius-sm:            4px;
  --radius-md:            8px;
  --radius-lg:            12px;
  --radius-pill:           9999px;    /* Only for tiny tags/badges */

  --shadow-none:          0 0 0 rgba(0,0,0,0);
  --shadow-subtle:        0 1px 2px rgba(0,0,0,0.04);
  --shadow-card:          0 2px 8px rgba(0,0,0,0.04);
  --shadow-card-hover:    0 4px 16px rgba(0,0,0,0.06);

  --transition-fast:      150ms ease;
  --transition-base:      250ms ease;
  --transition-slow:      400ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-reveal:    600ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Section spacing ---- */
  --section-y:            var(--space-32);     /* Massive vertical whitespace */
  --section-y-sm:         var(--space-20);
}