/* =========================================================
   BUFFALO TREE PRO — DESIGN TOKENS
   Single source of truth for color, type, spacing, radius,
   shadow and motion values. No magic numbers outside this file.
   ========================================================= */

:root{

  /* ---------- Color ---------- */
  --color-primary:        #0E1116;
  --color-secondary:      #2A2D34;
  --color-accent:         #D81B60;
  --color-accent-hover:   #B71550;
  --color-accent-light:   #FBDCE7;
  --color-bg:             #F7F7F9;
  --color-surface:        #FFFFFF;
  --color-heading:        #0E1116;
  --color-body:           #444444;
  --color-border:         #ECECEC;
  --color-muted:          #777777;
  --color-danger:         #D92D20;
  --color-success:        #027A48;

  /* text-on-accent must stay AA against --color-accent */
  --color-on-accent:      #FFFFFF;
  --color-on-dark:        #FFFFFF;

  /* WCAG AA fix: accent text on light surfaces uses a darker accent tone */
  --color-accent-text:    #A3134F;

  /* ---------- Typography ---------- */
  --font-heading: 'Excon', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Alpino', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-h1: clamp(2.5rem, 1.7rem + 3.5vw, 4.5rem);      /* 40px -> 72px */
  --fs-h2: clamp(2rem, 1.5rem + 2.2vw, 3.5rem);         /* 32px -> 56px */
  --fs-h3: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);      /* 28px -> 40px */
  --fs-h4: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);   /* 22px -> 30px */
  --fs-h5: clamp(1.125rem, 1.02rem + 0.5vw, 1.5rem);    /* 18px -> 24px */
  --fs-body-lg: 1.25rem;   /* 20px */
  --fs-body:    1.125rem;  /* 18px */
  --fs-small:   1rem;      /* 16px */
  --fs-caption: 0.875rem;  /* 14px */

  --lh-heading: 1.15;
  --lh-body: 1.7;

  --fw-thin: 100;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* ---------- Spacing (8px base scale) ---------- */
  --space-1: 0.5rem;   /* 8 */
  --space-2: 0.75rem;  /* 12 */
  --space-3: 1rem;     /* 16 */
  --space-4: 1.5rem;   /* 24 */
  --space-5: 2rem;     /* 32 */
  --space-6: 3rem;     /* 48 */
  --space-7: 4rem;     /* 64 */
  --space-8: 6rem;     /* 96 */
  --space-9: 8rem;     /* 128 */
  --space-10: 10rem;   /* 160 */

  --container-max: 1320px;
  --container-pad: clamp(1.25rem, 1rem + 2vw, 4rem);

  /* ---------- Radius ---------- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---------- Shadow ---------- */
  --shadow-sm: 0 2px 8px rgba(14,17,22,0.06);
  --shadow-md: 0 12px 32px rgba(14,17,22,0.08);
  --shadow-lg: 0 24px 60px rgba(14,17,22,0.12);
  --shadow-accent: 0 14px 30px rgba(216,27,96,0.28);
  --shadow-focus: 0 0 0 3px rgba(216,27,96,0.35);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 620ms;

  /* ---------- Z-index scale ---------- */
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
}