/* ==========================================================================
   Nil F Nil — Colors & Type
   Dark-first, token-driven. Two-tier: primitives → semantics.
   Components reference SEMANTIC tokens only.

   Ported from design/claude-design/{nfn-tokens.css,aos-tokens.css} (fresh
   Claude Design import wins). Self-hosted webfonts — see fonts.css; the
   Google Fonts @import lines from both source files are dropped. Dark-only
   per spec §7 — the nfn :root[data-theme="light"] block is intentionally
   NOT ported.
   ========================================================================== */

/* ==========================================================================
   PRIMITIVES
   ========================================================================== */
:root {
  /* --- Brand: Green (accent) -------------------------------------------- */
  --nfn-green-100: #C0EDC0;
  --nfn-green-200: #8DDA8D;
  --nfn-green-300: #62C462;
  --nfn-green-400: #4DB352;  /* dark-mode primary · 7.26:1 AAA */
  --nfn-green-500: #3F9B42;
  --nfn-green-600: #2E6E2E;  /* light-mode primary · 6.20:1 AA */
  --nfn-green-700: #215521;
  --nfn-green-800: #163C16;
  --nfn-green-900: #0C220C;

  /* --- Functional: Red / Amber / Blue ----------------------------------- */
  --nfn-red-400: #FF6B6B;
  --nfn-red-500: #EF4444;
  --nfn-red-600: #DC2626;
  --nfn-red-700: #B91C1C;

  --nfn-amber-300: #FCD34D;
  --nfn-amber-400: #FFB340;
  --nfn-amber-500: #F59E0B;
  --nfn-amber-700: #B45309;

  --nfn-blue-300: #93C5FD;
  --nfn-blue-400: #60A5FA;
  --nfn-blue-500: #3B82F6;
  --nfn-blue-600: #2563EB;

  /* --- Extended palette (data-viz) -------------------------------------- */
  --nfn-teal-400: #2DD4BF;
  --nfn-teal-600: #0D9484;
  --nfn-pink-400: #F472B6;
  --nfn-pink-600: #DB2777;
  --nfn-orange-400: #FB923C;
  --nfn-orange-700: #C2410C;

  /* --- Neutral (warm, B channel -2 from R/G) ---------------------------- */
  --nfn-neutral-100: #F2F2EE;
  --nfn-neutral-200: #E4E4DE;
  --nfn-neutral-300: #C8C8C0;
  --nfn-neutral-400: #9A9A92;
  --nfn-neutral-500: #6A6A64;
  --nfn-neutral-600: #4A4A44;
  --nfn-neutral-700: #3A3A36;
  --nfn-neutral-750: #2E2E2B;
  --nfn-neutral-800: #242422;
  --nfn-neutral-850: #1C1C1A;
  --nfn-neutral-900: #161614;
  --nfn-neutral-925: #131312;
  --nfn-neutral-950: #0E0E0C;
  --nfn-neutral-975: #0C0C0A;

  /* ======================================================================
     SEMANTIC TOKENS (DARK — default mode)
     ====================================================================== */

  /* Surfaces */
  --nfn-bg-canvas:    #0E0E0C;                        /* page */
  --nfn-bg-surface:   #161614;                        /* card, panel */
  --nfn-bg-elevated:  #1C1C1A;                        /* modal, dropdown */
  --nfn-bg-muted:     #131312;                        /* inset wells */
  --nfn-bg-code:      #0C0C0A;                        /* code block */
  --nfn-bg-subtle:    rgba(255, 255, 255, 0.03);

  /* Text */
  --nfn-text-primary:   #F2F2EE;
  --nfn-text-secondary: #A0A098;
  --nfn-text-muted:     #858580;
  --nfn-text-disabled:  rgba(133, 133, 128, 0.5);
  --nfn-text-inverse:   #0E0E0C;
  --nfn-text-code:      var(--nfn-green-400);

  /* Borders */
  --nfn-border-default: rgba(255, 255, 255, 0.06);
  --nfn-border-strong:  rgba(255, 255, 255, 0.15);
  --nfn-border-muted:   rgba(255, 255, 255, 0.03);

  /* Accent */
  --nfn-accent-default: var(--nfn-green-400);
  --nfn-accent-hover:   var(--nfn-green-300);
  --nfn-accent-active:  var(--nfn-green-500);
  --nfn-accent-subtle:  rgba(77, 179, 82, 0.12);
  --nfn-accent-on:      #0E0E0C;                      /* text on accent fill */

  /* Status */
  --nfn-status-success: var(--nfn-green-400);
  --nfn-status-error:   var(--nfn-red-400);
  --nfn-status-warning: var(--nfn-amber-400);
  --nfn-status-info:    var(--nfn-blue-400);

  --nfn-status-success-subtle: rgba(77, 179, 82, 0.12);
  --nfn-status-error-subtle:   rgba(255, 107, 107, 0.12);
  --nfn-status-warning-subtle: rgba(255, 179, 64, 0.12);
  --nfn-status-info-subtle:    rgba(96, 165, 250, 0.12);

  /* Interactive — focus ring rides the promoted phosphor accent so the
     identity reaches every focus-visible surface (Command Center, 2026-07-07). */
  --nfn-focus-ring: #42E860;
  --nfn-link:       var(--nfn-blue-400);

  /* Shadows */
  --nfn-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --nfn-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --nfn-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  --nfn-shadow-focus: 0 0 0 3px rgba(66, 232, 96, 0.5);
  --nfn-shadow-focus-destructive: 0 0 0 3px rgba(255, 107, 107, 0.5);

  /* ======================================================================
     SPACING (4px base)
     ====================================================================== */
  --nfn-spacing-0:  0px;
  --nfn-spacing-1:  4px;
  --nfn-spacing-2:  8px;
  --nfn-spacing-3:  12px;
  --nfn-spacing-4:  16px;
  --nfn-spacing-5:  20px;
  --nfn-spacing-6:  24px;
  --nfn-spacing-8:  32px;
  --nfn-spacing-10: 40px;
  --nfn-spacing-12: 48px;
  --nfn-spacing-16: 64px;
  --nfn-spacing-20: 80px;
  --nfn-spacing-24: 96px;

  /* ======================================================================
     RADIUS
     ====================================================================== */
  --nfn-radius-none: 0px;
  --nfn-radius-sm:   4px;  /* tags, badges, small buttons */
  --nfn-radius-md:   6px;  /* buttons, inputs, dropdowns */
  --nfn-radius-lg:   8px;  /* cards, panels, modals */
  --nfn-radius-xl:   12px; /* feature cards, callouts */
  --nfn-radius-2xl:  16px; /* hero, marketing */
  --nfn-radius-full: 9999px;

  /* ======================================================================
     TYPOGRAPHY
     ====================================================================== */
  --nfn-font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --nfn-font-mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Weight */
  --nfn-fw-regular:  400;
  --nfn-fw-medium:   500;
  --nfn-fw-semibold: 600;
  --nfn-fw-bold:     700;
}

/* ======================================================================
   SEMANTIC TYPE STYLES — apply as utility classes or extend
   ====================================================================== */
.nfn-h1 { font-family: var(--nfn-font-sans); font-weight: 700; font-size: 36px; line-height: 100%; letter-spacing: -0.02em; color: var(--nfn-text-primary); }
.nfn-h2 { font-family: var(--nfn-font-sans); font-weight: 600; font-size: 30px; line-height: 125%; letter-spacing: -0.02em; color: var(--nfn-text-primary); }
.nfn-h3 { font-family: var(--nfn-font-sans); font-weight: 600; font-size: 24px; line-height: 130%; letter-spacing: -0.01em; color: var(--nfn-text-primary); }
.nfn-h4 { font-family: var(--nfn-font-sans); font-weight: 600; font-size: 20px; line-height: 130%; letter-spacing: -0.01em; color: var(--nfn-text-primary); }

.nfn-body-lg         { font-family: var(--nfn-font-sans); font-weight: 400; font-size: 18px; line-height: 160%; color: var(--nfn-text-primary); }
.nfn-body            { font-family: var(--nfn-font-sans); font-weight: 400; font-size: 16px; line-height: 150%; color: var(--nfn-text-primary); }
.nfn-body-sm         { font-family: var(--nfn-font-sans); font-weight: 400; font-size: 14px; line-height: 150%; color: var(--nfn-text-secondary); }
.nfn-body-medium     { font-family: var(--nfn-font-sans); font-weight: 500; font-size: 16px; line-height: 150%; color: var(--nfn-text-primary); }
.nfn-body-sm-medium  { font-family: var(--nfn-font-sans); font-weight: 500; font-size: 14px; line-height: 150%; color: var(--nfn-text-primary); }

.nfn-label           { font-family: var(--nfn-font-sans); font-weight: 500; font-size: 11px; line-height: 125%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nfn-text-secondary); }
.nfn-label-sm        { font-family: var(--nfn-font-sans); font-weight: 500; font-size: 10px; line-height: 125%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nfn-text-muted); }
.nfn-caption         { font-family: var(--nfn-font-sans); font-weight: 400; font-size: 12px; line-height: 150%; color: var(--nfn-text-muted); }

.nfn-code            { font-family: var(--nfn-font-mono); font-weight: 400; font-size: 14px; line-height: 160%; color: var(--nfn-text-primary); }
.nfn-code-sm         { font-family: var(--nfn-font-mono); font-weight: 400; font-size: 12px; line-height: 160%; color: var(--nfn-text-secondary); }
.nfn-code-accent     { font-family: var(--nfn-font-mono); font-weight: 500; font-size: 11px; color: var(--nfn-accent-default); }

/* Base reset for the system */
.nfn-root,
.nfn-root * {
  box-sizing: border-box;
}
.nfn-root {
  font-family: var(--nfn-font-sans);
  color: var(--nfn-text-primary);
  background: var(--nfn-bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   AOS-specific tokens layered over NFN. Per the brief — dark only.
   ========================================================================== */
:root {
  /* AOS surfaces — slightly cooler/darker than NFN canvas */
  --aos-bg-canvas:    #0a0a0a;
  --aos-bg-surface-1: #141414;
  --aos-bg-surface-2: #1a1a1a;
  --aos-bg-input:     #222222;
  --aos-bg-chip:      #333333;

  --aos-border-subtle: #222222;
  --aos-border-default: rgba(255,255,255,0.06);
  --aos-border-strong:  rgba(255,255,255,0.15);

  --aos-text-primary:   #f5f5f5;
  --aos-text-secondary: #b8b8b8;
  --aos-text-tertiary:  #999999;
  --aos-text-disabled:  #666666;
  --aos-text-timeline:  #4a4a4a;

  /* Command Center identity (Recorder, promoted to default 2026-07-07).
     Accent is a bespoke phosphor/CRT green — 12.20:1 on #0a0a0a, 34.5 RGB
     from the nearest Tailwind value (green-400 #4ade80), low-blue so it reads
     as terminal-glow green, not the cyan/fintech mint the first pass drifted
     into. RESERVED for live/armed signals on Home; app-wide it is THE accent
     (active nav, Capture, FAB, focus ring). */
  --aos-accent: #42E860;
  --aos-accent-on: #0a0a0a;
  --aos-accent-subtle: rgba(66,232,96,0.14);
  --dir-armed: var(--aos-accent);           /* the one full-chroma live/armed signal */

  /* Complete/success is a quieter sibling of the accent — same phosphor
     family, 8.33:1, 27.9 RGB from Tailwind green-500 — so a merely-ran-clean
     job reads as a real semantic green (NOT the rejected sage desaturation,
     NOT mood) while the armed accent still visibly pops above it. Amber/red
     stay full-strength: status color is data, and the accent must never make
     an alarm state harder to spot. */
  --aos-status-success: #3CBF66;
  --aos-status-error:   #f87171;
  --aos-status-warning: #fbbf24;
  --aos-status-info:    var(--nfn-blue-400);
  --aos-accent-orange:  #f59e0b;

  /* Agent-state dot colors (also used as state-stripe accent) */
  --aos-state-idle:           #4a4a4a;
  --aos-state-running:        var(--aos-status-info);
  --aos-state-blocked:        var(--aos-status-warning);
  --aos-state-awaiting-human: #c084fc;
  --aos-state-errored:        var(--aos-status-error);
  --aos-state-complete:       var(--aos-status-success);

  --aos-font-sans: 'Onest', 'Inter', system-ui, sans-serif;
  --aos-font-mono: 'IBM Plex Mono', 'Fira Code', ui-monospace, monospace;
}

/* AOS-scoped reset / base */
.aos-root,
.aos-root * { box-sizing: border-box; }
body.aos-root {
  /* UA default body margin (8px) survived this scoped reset — it shifted the
     100%-wide shell right and produced horizontal scroll on every route
     (caught by the E3 ship-verify matrix). */
  margin: 0;
  font-family: var(--aos-font-sans);
  color: var(--aos-text-primary);
  background: var(--aos-bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Type — locked at 6 sizes per brief */
.aos-display { font: 500 30px/1.1 var(--aos-font-sans); letter-spacing: -0.01em; color: var(--aos-text-primary); }
.aos-h1      { font: 600 24px/1.2 var(--aos-font-sans); letter-spacing: -0.01em; color: var(--aos-text-primary); }
.aos-h2      { font: 600 20px/1.25 var(--aos-font-sans); letter-spacing: -0.005em; color: var(--aos-text-primary); }
.aos-body    { font: 400 14px/1.45 var(--aos-font-sans); color: var(--aos-text-primary); }
.aos-body-secondary { font: 400 14px/1.45 var(--aos-font-sans); color: var(--aos-text-secondary); }
.aos-label   { font: 500 12px/1.3 var(--aos-font-sans); color: var(--aos-text-tertiary); }
.aos-kicker  { font: 500 12px/1.3 var(--aos-font-sans); color: var(--aos-text-tertiary); letter-spacing: 0; }
.aos-caption { font: 400 11px/1.4 var(--aos-font-mono); color: var(--aos-text-tertiary); letter-spacing: 0.02em; }

/* Scrollbar reset within frames */
.aos-frame { overflow: hidden; }
.aos-frame * { scrollbar-width: none; }
.aos-frame *::-webkit-scrollbar { display: none; }