/*
 * tokens.css — Global design tokens
 *
 * Single source of truth for all CSS custom properties.
 * Linked by every page in this project.
 * Edit values here — changes propagate site-wide.
 *
 * SETUP AGENT: Fill in brand colors and fonts from brief.json.
 * DESIGNER AGENT: Adjust values to match the chosen design direction.
 *                 Never redeclare these variables in page <style> blocks.
 */

:root {

  /* ── Brand ─────────────────────────────────────────────────────────────────
   * Populated during setup from brief.json.
   * Null values are generated by the designer based on industry + direction.
   * ───────────────────────────────────────────────────────────────────────── */
  --color-primary: #4f46e5;
  --color-secondary: null;
  --color-accent: #eef2ff;
  --color-star: #FFB800;

  /* ── Surface & Background ──────────────────────────────────────────────────
   * Base page background and elevated surface tones.
   * ───────────────────────────────────────────────────────────────────────── */
  --color-bg: #ffffff;
  --color-surface-1: #f8f8f8;
  --color-surface-2: #f2f2f2;

  /* ── Text ──────────────────────────────────────────────────────────────────
   * ───────────────────────────────────────────────────────────────────────── */
  --color-text: #111111;
  --color-text-secondary: #3d3d3d;
  --color-text-muted: #9a9a9a;
  --color-text-inverse: #ffffff;

  /* ── Neutrals ──────────────────────────────────────────────────────────────
   * Full grey scale for borders, dividers, and subtle backgrounds.
   * ───────────────────────────────────────────────────────────────────────── */
  --color-neutral-50: #f9fafb;
  --color-neutral-100: #f3f4f6;
  --color-neutral-200: #e5e7eb;
  --color-neutral-300: #d1d5db;
  --color-neutral-400: #9ca3af;
  --color-neutral-500: #6b7280;
  --color-neutral-600: #4b5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #1f2937;
  --color-neutral-900: #111827;

  /* ── Semantic ───────────────────────────────────────────────────────────────
   * Status and feedback colors. Adjust to suit the palette if needed.
   * ───────────────────────────────────────────────────────────────────────── */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* ── Typography — Fonts ─────────────────────────────────────────────────────
   * Set by the designer after choosing a direction.
   * Always use Google Fonts — add the <link> tag to every page <head>.
   * ───────────────────────────────────────────────────────────────────────── */
  --font-heading: 'Inter', Arial, sans-serif;
  --font-body: 'Inter', Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', monospace;

  /* ── Typography — Scale ─────────────────────────────────────────────────────
   * Use clamp() on display sizes in component CSS for fluid scaling.
   * ───────────────────────────────────────────────────────────────────────── */
  --text-xs: clamp(1.15rem, calc(-0.00018518518518518534 * (100vw - 36rem) + 1.15rem), 1.13rem);
  --text-s: clamp(1.44rem, calc(0.0005555555555555561 * (100vw - 36rem) + 1.44rem), 1.5rem);
  --text-m: clamp(1.8rem, calc(0.0018518518518518515 * (100vw - 36rem) + 1.8rem), 2rem);
  --text-l: clamp(2.25rem, calc(0.0038888888888888883 * (100vw - 36rem) + 2.25rem), 2.67rem);
  --text-xl: clamp(2.81rem, calc(0.006851851851851849 * (100vw - 36rem) + 2.81rem), 3.55rem);
  --text-2xl: clamp(3.52rem, calc(0.011296296296296297 * (100vw - 36rem) + 3.52rem), 4.74rem);
  --text-3xl: clamp(4.39rem, calc(0.017777777777777778 * (100vw - 36rem) + 4.39rem), 6.31rem);

  /* ── Typography — Heading Scale (fluid) ─────────────────────────────────── */
  --heading-2xs: clamp(1.64rem, calc(0.005185185185185188 * (100vw - 36rem) + 1.64rem), 2.2rem);
  --heading-xs: clamp(2.05rem, calc(0.008148148148148151 * (100vw - 36rem) + 2.05rem), 2.93rem);
  --heading-s: clamp(2.56rem, calc(0.012407407407407407 * (100vw - 36rem) + 2.56rem), 3.9rem);
  --heading-m: clamp(3.2rem, calc(0.018518518518518517 * (100vw - 36rem) + 3.2rem), 5.2rem);
  --heading-l: clamp(4rem, calc(0.02712962962962963 * (100vw - 36rem) + 4rem), 6.93rem);
  --heading-xl: clamp(5rem, calc(0.039259259259259265 * (100vw - 36rem) + 5rem), 9.24rem);
  --heading-2xl: clamp(6.25rem, calc(0.05620370370370371 * (100vw - 36rem) + 6.25rem), 12.32rem);
  --heading-3xl: clamp(7.81rem, calc(0.07972222222222225 * (100vw - 36rem) + 7.81rem), 16.42rem);

  /* ── Typography — Weight ────────────────────────────────────────────────── */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ── Typography — Line Height ───────────────────────────────────────────── */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* ── Typography — Letter Spacing ────────────────────────────────────────── */
  --tracking-tight: -0.05em;
  --tracking-normal: 0em;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;
  --tracking-widest: 0.2em;

  /* ── Border Radius ──────────────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ── Shadows ────────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --shadow-none: none;

  /* ── Section Spacing (fluid) ────────────────────────────────────────────────
   * For padding-top / padding-bottom on <section> wrappers and large structural
   * gaps. Use --space-* for component-level spacing inside sections.
   * ───────────────────────────────────────────────────────────────────────── */

  --section-2xs: clamp(4.22rem, calc(0.0067592592592592635 * (100vw - 36rem) + 4.22rem), 4.95rem);
  --section-xs: clamp(5.63rem, calc(0.012685185185185186 * (100vw - 36rem) + 5.63rem), 7rem);
  --section-s: clamp(7.5rem, calc(0.022222222222222227 * (100vw - 36rem) + 7.5rem), 9.9rem);
  --section-m: clamp(10rem, calc(0.037037037037037035 * (100vw - 36rem) + 10rem), 14rem);
  --section-l: clamp(13.33rem, calc(0.059907407407407416 * (100vw - 36rem) + 13.33rem), 19.8rem);
  --section-xl: clamp(17.77rem, calc(0.09462962962962962 * (100vw - 36rem) + 17.77rem), 27.99rem);
  --section-2xl: clamp(23.69rem, calc(0.1471296296296296 * (100vw - 36rem) + 23.69rem), 39.58rem);


  /* ── Spacing (fluid) ────────────────────────────────────────────────────── */
  --space-2xs: clamp(0.82rem, calc(0.00018518518518518534 * (100vw - 36rem) + 0.82rem), 0.84rem);
  --space-xs: clamp(1.02rem, calc(0.0010185185185185173 * (100vw - 36rem) + 1.02rem), 1.13rem);
  --space-s: clamp(1.28rem, calc(0.002037037037037037 * (100vw - 36rem) + 1.28rem), 1.5rem);
  --space-m: clamp(1.6rem, calc(0.003703703703703703 * (100vw - 36rem) + 1.6rem), 2rem);
  --space-l: clamp(2rem, calc(0.0062037037037037035 * (100vw - 36rem) + 2rem), 2.67rem);
  --space-xl: clamp(2.5rem, calc(0.00972222222222222 * (100vw - 36rem) + 2.5rem), 3.55rem);
  --space-2xl: clamp(3.13rem, calc(0.014907407407407411 * (100vw - 36rem) + 3.13rem), 4.74rem);
  --space-3xl: clamp(3.91rem, calc(0.022222222222222216 * (100vw - 36rem) + 3.91rem), 6.31rem);
  --space-4xl: clamp(4.88rem, calc(0.03277777777777778 * (100vw - 36rem) + 4.88rem), 8.42rem);

  /* ── Layout ─────────────────────────────────────────────────────────────── */
  --max-width: 1200px;
  --grid-gap: 28px;

  /* ── Layout — Width Scale ───────────────────────────────────────────────── */
  --width-xs: 480px;
  /* modals, narrow cards */
  --width-s: 640px;
  /* prose, sidebar forms */
  --width-m: 800px;
  /* content columns */
  --width-l: 1024px;
  /* wide content */
  --width-xl: 1280px;
  /* wide sections */
  --width-2xl: 1320px;
  /* full container */

  /* ── Transitions ────────────────────────────────────────────────────────── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;
}