/*
  Design tokens — placeholder values, to be replaced with Figma-derived values.
  Keep ALL design decisions (colors, spacing, type scale, etc.) here.
  Components reference tokens, never raw hex/px values.
*/

:root {
  /* === Color: brand (estimated from Figma — refine when real palette lands) === */
  --color-brand-50:  #e3f0ed;
  --color-brand-100: #b6d6cf;
  --color-brand-200: #87bbb1;
  --color-brand-300: #589f93;
  --color-brand-400: #2e8474;
  --color-brand-500: #0d6a59; /* primary teal */
  --color-brand-600: #0a594a; /* deep teal — header / hero background */
  --color-brand-700: #074a3e;
  --color-brand-800: #053b32;
  --color-brand-900: #032b25;

  /* Lime/yellow accent — used on primary CTAs */
  --color-accent-yellow-100: #f1f5b8;
  --color-accent-yellow-300: #e1ec6e;
  --color-accent-yellow-500: #d3e236; /* bright lime */
  --color-accent-yellow-600: #b6c326;
  --color-accent-yellow-700: #8e991b;

  /* === Color: neutrals === */
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #f8f9fa;
  --color-neutral-100: #eef0f2;
  --color-neutral-200: #d9dde1;
  --color-neutral-300: #b9bfc6;
  --color-neutral-400: #8e96a0;
  --color-neutral-500: #666e78;
  --color-neutral-600: #4a525b;
  --color-neutral-700: #353c44;
  --color-neutral-800: #20262d;
  --color-neutral-900: #0f1318;

  /* === Color: semantic === */
  --color-bg:           var(--color-neutral-0);
  --color-bg-muted:     var(--color-neutral-50);
  --color-bg-inverse:   var(--color-neutral-900);
  --color-text:         var(--color-neutral-900);
  --color-text-muted:   var(--color-neutral-600);
  --color-text-inverse: var(--color-neutral-0);
  --color-border:       var(--color-neutral-200);
  --color-border-strong:var(--color-neutral-300);
  --color-accent:       var(--color-accent-yellow-500);
  --color-accent-hover: var(--color-accent-yellow-600);
  --color-accent-text:  var(--color-brand-900);
  --color-primary:      var(--color-brand-500);
  --color-primary-hover:var(--color-brand-600);
  --color-bg-hero:      var(--color-brand-600);
  --color-focus-ring:   var(--color-brand-400);
  --color-error:        #c33a3a;
  --color-success:      #2f8a4d;

  /* === Typography === */
  /* Font families — placeholder system stacks; replace with self-hosted brand fonts via @font-face */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;

  /* Type scale — modular ratio ~1.25 (major third), tweak to match Figma */
  --font-size-xs:   0.75rem;   /* 12 */
  --font-size-sm:   0.875rem;  /* 14 */
  --font-size-base: 1rem;      /* 16 */
  --font-size-md:   1.125rem;  /* 18 */
  --font-size-lg:   1.25rem;   /* 20 */
  --font-size-xl:   1.5rem;    /* 24 */
  --font-size-2xl:  1.875rem;  /* 30 */
  --font-size-3xl:  2.25rem;   /* 36 */
  --font-size-4xl:  3rem;      /* 48 */
  --font-size-5xl:  3.75rem;   /* 60 */
  --font-size-6xl:  4.5rem;    /* 72 */

  --line-height-tight:   1.15;
  --line-height-snug:    1.3;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.75;

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.04em;

  /* === Spacing scale (4px base) === */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */

  /* === Layout === */
  --container-narrow: 720px;
  --container-default: 1080px;
  --container-wide: 1280px;

  --section-py-sm: var(--space-12);
  --section-py-md: var(--space-20);
  --section-py-lg: var(--space-32);

  /* === Breakpoints (used in @media; not consumable as custom properties in queries, kept here for reference) === */
  /* sm: 480, md: 768, lg: 1024, xl: 1280 */

  /* === Radii === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* === Shadows === */
  --shadow-sm: 0 1px 2px rgba(15, 19, 24, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 19, 24, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 19, 24, 0.12);

  /* === Transitions === */
  --transition-fast: 120ms ease-out;
  --transition-base: 200ms ease-out;
  --transition-slow: 320ms ease-out;

  /* === Z-index === */
  --z-base: 1;
  --z-sticky: 100;
  --z-overlay: 1000;
  --z-modal: 1100;
  --z-toast: 1200;
}