/* MiTax - design tokens (locked).
   Corporate-restraint redesign. OKLCH-first with hex fallback. */

:root {
  /* Brand */
  --primary:      #0357ED;
  --primary-600:  #0246C2;
  --primary-700:  #013396;
  --primary-100:  #E2EBFF;
  --primary-050:  #F2F6FF;

  --accent:       #11BD8F;
  --accent-600:   #0B9D75;
  --accent-100:   #D6F4E8;
  --accent-050:   #EBFAF3;

  /* Neutrals (tinted toward primary) */
  --ink:      #0B1226;
  --ink-700:  #2A3550;
  --ink-500:  #5E6680;
  --ink-300:  #A6ABBC;
  --ink-200:  #D2D5E0;
  --ink-100:  #ECEEF4;
  --snow:     #FAFBFE;
  --surface:  #FFFFFF;

  /* Status */
  --success: #11BD8F;
  --warning: #FFB840;
  --error:   #E84141;

  /* Type */
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: var(--font-sans);

  /* Density pass 2026-07-17 (tightened): big scale trimmed ~30% cumulative so
     more content fits per screen. Body 16→14px (practical readability floor);
     small/eyebrow untouched. Going further would start to hurt legibility. */
  --fs-h1:      clamp(26px, 3.0vw, 38px);
  --fs-h2:      clamp(18px, 1.9vw, 26px);
  --fs-h3:      clamp(15px, 1.1vw, 17px);
  --fs-body:    14px;
  --fs-small:   13px;
  --fs-eyebrow: 11px;

  --lh-h1:   1.06;
  --lh-h2:   1.12;
  --lh-h3:   1.2;
  --lh-body: 1.5;

  --tr-h1: 0;
  --tr-h2: 0;
  --tr-body: 0;
  --tr-eyebrow: 0;

  /* Layout */
  --wrap-max:   1180px;
  --gutter:     clamp(16px, 2.2vw, 30px);
  --sp-section: clamp(36px, 4.6vw, 62px);
  --sp-hero:    clamp(44px, 5.6vw, 76px);

  /* Rhythm scale: large steps trimmed for density; small steps kept so tight
     component internals don't collapse. */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 15px;
  --sp-5: 18px; --sp-6: 24px; --sp-7: 34px; --sp-8: 44px; --sp-9: 62px;

  /* Radii */
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(11, 18, 38, .05);
  --shadow-md: 0 8px 24px rgba(11, 18, 38, .04);
  --shadow-lg: 0 24px 48px rgba(11, 18, 38, .08);

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:  180ms;

  /* Nav */
  --nav-h: 54px;

  /* ─────────────────────────────────────────────────────────────
     REDESIGN LAYER (added 2026-07-13) - shared design-system tokens
     used by the homepage and reusable by every marketing page.
     Everything below references the locked brand values above; it
     does not introduce new palette colours, only new roles/scales.
     ───────────────────────────────────────────────────────────── */

  /* Slim top utility bar */
  --util-h: 34px;

  /* Extended fluid display scale (marketing surfaces).
     Pair with .display / .h-xl / .lede utilities in base.css. */
  --fs-display: clamp(1.9rem, 0.85rem + 3.9vw, 3.35rem);   /* ~30 → 54px  hero (tighter) */
  --fs-h1-xl:   clamp(1.55rem, 1.0rem + 2.2vw, 2.35rem);   /* ~25 → 38px  big section */
  --fs-lead:    clamp(0.94rem, 0.9rem + 0.35vw, 1.08rem);  /* ~15 → 17px lead copy */
  --lh-display: 1.02;
  --tr-display: 0;

  /* Brand gradients (blue → teal). Use for hero glow, accent fills,
     and the gradient-text highlight word. */
  --grad-brand:      linear-gradient(120deg, var(--primary) 0%, var(--accent) 100%);
  --grad-brand-vivid:linear-gradient(120deg, var(--primary-600) 0%, var(--accent) 92%);
  --grad-text:       linear-gradient(105deg, var(--primary) 12%, var(--accent-600) 92%);
  --grad-hero:       radial-gradient(60% 55% at 82% 12%, color-mix(in oklab, var(--accent) 20%, transparent), transparent 70%),
                     radial-gradient(52% 60% at 6% 0%,  color-mix(in oklab, var(--primary) 16%, transparent), transparent 66%);
  --grad-ink:        linear-gradient(180deg, #0E1730 0%, var(--ink) 100%);

  /* Layered surfaces & semantic borders */
  --surface-sunken: var(--snow);
  --surface-raised: var(--surface);
  --border:         var(--ink-100);
  --border-strong:  var(--ink-200);

  /* Amber accent (third accent - used sparingly for "human"/alert warmth) */
  --amber:      #FFB840;
  --amber-600:  #C8871B;
  --amber-050:  #FFF6E6;
  --amber-100:  #FCE9C2;

  /* Extended elevation - soft, layered depth */
  --shadow-xl:      0 40px 80px -28px rgba(11, 18, 38, .20);
  --shadow-primary: 0 24px 52px -18px rgba(3, 87, 237, .38);
  --shadow-hair:    inset 0 0 0 1px rgba(11, 18, 38, .04);

  /* Extended radii */
  --r-2xl: 24px;
  --r-3xl: 32px;

  /* Extended motion */
  --dur-slow: 340ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Narrow content measure (centred prose / CTA copy) */
  --wrap-narrow: 760px;
}

@supports (color: oklch(0.5 0 0)) {
  :root {
    --primary:     oklch(0.535 0.245 261);
    --primary-600: oklch(0.475 0.235 261);
    --primary-700: oklch(0.395 0.205 261);
    --primary-100: oklch(0.94  0.045 261);
    --primary-050: oklch(0.975 0.018 261);
    --accent:      oklch(0.68  0.158 167);
    --accent-600:  oklch(0.605 0.155 165);
    --accent-100:  oklch(0.94  0.045 167);
    --accent-050:  oklch(0.975 0.018 167);
    --ink:      oklch(0.17 0.018 261);
    --ink-700:  oklch(0.33 0.018 261);
    --ink-500:  oklch(0.50 0.014 261);
    --ink-300:  oklch(0.72 0.010 261);
    --ink-200:  oklch(0.86 0.008 261);
    --ink-100:  oklch(0.94 0.006 261);
    --snow:     oklch(0.995 0.004 261);
  }
}