/* Design Tokens — Next Unit Pro Design System "The AI Grid"
   SINGLE SOURCE OF TRUTH: shared by public site + portal
   DO NOT add component styles here — tokens only
   Version: 1.0 | Created: 2026-04-09 */

:root {
  /* === Colors: Primary (Legacy 50 = blue tint; indigo 100-900 in bridge below) === */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #4a8fd6;
  --color-primary-500: #2272c3;
  --color-primary-600: #1d5fa6;
  --color-primary-700: #1e4d7b;
  --color-primary-800: #1a3d63;
  --color-primary-900: #0f2b4a;

  /* === Colors: Accent (Amber) === */
  --color-accent-50: #fffbeb;
  --color-accent-100: #fef3c7;
  --color-accent-300: #fcd34d;
  --color-accent-400: #f59e0b;
  --color-accent-500: #d97706;
  --color-accent-600: #b45309;
  --color-accent-700: #92400e;

  /* === Colors: Neutral (Warm Gray) === */
  --color-neutral-50: #fafaf5;
  --color-neutral-100: #f4f4ed;
  --color-neutral-200: #e8e8df;
  --color-neutral-300: #d4d4c8;
  --color-neutral-400: #a3a39a;
  --color-neutral-500: #6b6b62;
  --color-neutral-600: #52524a;
  --color-neutral-700: #3d3d39;
  --color-neutral-800: #2a2a26;
  --color-neutral-900: #1c1c1a;
  --color-neutral-950: #0f0f0e;

  /* === Colors: Semantic === */
  --color-success: #16a34a;
  --color-success-dark: #15803d;
  --color-error: #dc2626;
  --color-warning: #d97706;

  /* === Typography === */
  --font-heading: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;

  /* === Radius === */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* === Spacing (4px base) === */
  --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;

  /* === Shadows (shared — values match both systems) === */
  --shadow-sm: 0 1px 3px rgba(15,43,74,0.08), 0 1px 2px rgba(15,43,74,0.04);
  --shadow-md: 0 4px 6px rgba(15,43,74,0.07), 0 2px 4px rgba(15,43,74,0.05);

  /* === Agent Identity === */
  --agent-grace: #2272c3;
  --agent-nora: #059669;
  --agent-roxy: #7c3aed;
  --agent-mia: #0891b2;
  --agent-sophie: #d97706;
}

/* === FieldPilot Design System Bridge (2026-04-23) ===
   Overlays new brand tokens for style.v3.css.
   Full migration to new variable names = separate task.        */
/* Load order: design-tokens.css (1st) → style.v3.css */
/* DO NOT MERGE with :root above — bridge MUST come after to override primary palette */
:root {
  /* Display font: Bricolage Grotesque replaces Inter for headings */
  --font-heading:  'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-display:  'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;

  /* Primary: deep indigo (#4F46E5) replaces blue (#2272c3) — 50 kept in block-1; 100-900 all in bridge block */
  --color-primary-100: #E0E7FF;
  --color-primary-200: #C7D2FE;
  --color-primary-300: #A5B4FC;
  --color-primary-400: #818CF8;
  --color-primary-500: #4F46E5;
  --color-primary-600: #4338CA;
  --color-primary-700: #3730A3;
  --color-primary-800: #312E81;
  --color-primary-900: #1E1B4B;

  /* Brand dark surface (hero, footer) */
  --color-surface-dark: #0F172A;

  /* Agent identity — updated to FieldPilot palette */
  --agent-grace:  #4F46E5;
  --agent-mia:    #7C3AED;
  --agent-roxy:   #EC4899;
  --agent-nora:   #059669;
  --agent-sophie: #0EA5E9;

  /* New semantic aliases (used by colors_and_type.css components) */
  --color-interactive:       #4F46E5;
  --color-interactive-hover: #4338CA;
  --color-interactive-press: #3730A3;
  --color-interactive-soft:  #EEF2FF;
  --color-accent:            #F59E0B;
  --color-accent-hover:      #D97706;
  --color-mia:               #7C3AED;
  --color-roxy:              #EC4899;
  --color-nora:              #059669;
  --color-sophie:            #0EA5E9;

  /* Shadows — extended set */
  --shadow-xs:    0 1px 2px rgba(15,23,42,0.04);
  --shadow-xl:    0 32px 64px -16px rgba(15,23,42,0.18);
  --shadow-hover: 0 20px 40px -12px rgba(15,23,42,0.12), 0 4px 8px rgba(15,23,42,0.04);
  --shadow-focus: 0 0 0 2px #fff, 0 0 0 4px var(--color-primary-500);

  /* Motion */
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast:  150ms;
  --duration-normal: 200ms;
  --duration-slow:  400ms;
}

/* === S1: FieldPilot Orphan Tokens (2026-04-23) ===
   Variables used by style.v3.css that design-tokens.css v1.0 did not define.
   Required for S2 rename pass to have stable target names.                              */
:root {
  /* Typography scale */
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
  --font-size-3xl:  1.875rem;
  --font-size-4xl:  2.25rem;
  --font-size-5xl:  3rem;
  --font-size-6xl:  3.75rem;

  /* Font weights */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Line-height and letter-spacing (from original CSS root) */
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --tracking-tight:  -0.025em;
  --tracking-wide:   0.025em;

  /* Container aliases */
  --container-max:    1200px;
  --section-py:       96px;
  --container-gutter: 24px;

  /* Spacing orphans */
  --space-7:  1.75rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Motion orphan */
  --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Neutral semantic aliases (FieldPilot values) */
  --color-surface-mid:    #F8FAFC;
  --color-border:         #E2E8F0;
  --color-border-strong:  #CBD5E1;
  --color-text-primary:   #0F172A;
  --color-text-secondary: #475569;
  --color-text-muted:     #94A3B8;
  --color-text-tertiary:  #94A3B8;  /* alias: --color-neutral-500 (21 refs) maps here; same slate as --color-text-muted (intentional) */
  --color-text-inverse:   #ffffff;  /* text on dark bg */
  --color-surface-light:  #ffffff;  /* card/panel background */
  --color-surface:        #ffffff;  /* page background surface; for opacity math use --color-white instead */
  --color-danger:         #DC2626;

  /* --color-primary: bare alias = RENAME target for --color-primary-800 (carried from original CSS) */
  --color-primary: #312E81;

  /* Primary indigo tints — intentionally override block-1 blue values (#dbeafe/#bfdbfe/#93c5fd) with FieldPilot indigo */

  /* White opacity aliases */
  --color-white:    #ffffff;
  --color-white-10: rgba(255,255,255,0.10);
  --color-white-40: rgba(255,255,255,0.40);
  --color-white-50: rgba(255,255,255,0.50);
  --color-white-55: rgba(255,255,255,0.55);
  --color-white-60: rgba(255,255,255,0.60);
  --color-white-80: rgba(255,255,255,0.80);
  --color-white-85: rgba(255,255,255,0.85);

  /* Phone illustration palette — raw hex tokens consumed by §7 Phone Illustration component */
  --color-phone-body-start:   #1E293B;
  --color-phone-body-end:     #0F172A;
  --color-phone-notch:        #000000;
  --color-phone-screen-start: #F8F9FA;
  --color-phone-screen-end:   #E5E7EB;

  /* Misc aliases */
  --tile-accent: var(--color-interactive);
}

/* === Nav Dropdown Tokens === */
:root {
  --color-nav-dropdown-surface: var(--color-surface-light);
  --color-nav-dropdown-border:  var(--color-border);
  --color-nav-text:             var(--color-text-secondary);
  --color-nav-hover-bg:         var(--color-interactive-soft);
  --color-nav-hover-text:       var(--color-interactive-press);
  --color-nav-role-text:        var(--color-text-tertiary);
  --color-nav-role-hover:       var(--color-interactive);
  --color-nav-link:             var(--color-text-secondary);
  --color-nav-link-hover:       var(--color-interactive-hover);
}

html.dark {
  --color-nav-dropdown-surface: #1e293b;
  --color-nav-dropdown-border:  #334155;
  --color-nav-text:             #cbd5e1;
  --color-nav-hover-bg:         rgba(79, 70, 229, 0.15);
  --color-nav-hover-text:       #a5b4fc;
  --color-nav-role-text:        #94A3B8;
  --color-nav-role-hover:       #a5b4fc;
  --color-nav-link:             #cbd5e1;
  --color-nav-link-hover:       #a5b4fc;
}