/* ==========================================================================
   NeuroInk Design Tokens
   Derived from NeuroInkBrandGuideline.pdf (v1 / 2025, Lelle Designs).

   Two tiers:
     --ni-*        primitives. Fixed brand values. Never theme-dependent.
     --ni-c-*      semantic roles. Re-map per theme. Use THESE in components.

   Theme model: light palette on bare :root; dark redefined in both
   prefers-color-scheme and [data-theme="dark"] so an explicit toggle wins.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PRIMITIVES — brand colour
   Values marked (spec) are verbatim from the brand guideline.
   Values marked (derived) are extensions computed for contrast coverage;
   they are not in the source PDF. See BRAND-SYSTEM.md § Colour.
   -------------------------------------------------------------------------- */
:root {
  /* Ink Black — intellect, depth, focus. The brand's anchor. */
  --ni-ink-950: #000420; /* (spec) deepest */
  --ni-ink-900: #1B1F3B; /* (spec) INK BLACK — primary */
  --ni-ink-800: #212649; /* (derived) raised surface */
  --ni-ink-700: #282E57; /* (derived) overlay surface */
  --ni-ink-600: #303768; /* (derived) hairline on dark */
  --ni-ink-500: #213A6E; /* (spec) mid — accessible on light */
  --ni-ink-050: #F3F5FF; /* (spec) lightest */

  /* Neuro Blue — clarity, innovation, trust. The brand's voice. */
  --ni-blue-800: #1C1D1E; /* (spec) darkest */
  --ni-blue-700: #4072B2; /* (derived) accessible link/action on light */
  --ni-blue-600: #4979BD; /* (spec) mid */
  --ni-blue-300: #9AC4FF; /* (spec) NEURO BLUE — primary */
  --ni-blue-050: #E2EEFF; /* (spec) lightest */

  /* Synapse Bloom — balance and creativity. Accent, used sparingly. */
  --ni-bloom-950: #100D12; /* (spec) darkest */
  --ni-bloom-700: #9850C0; /* (derived) accessible on light */
  --ni-bloom-500: #B78EDF; /* (spec) mid */
  --ni-bloom-200: #E3C7FF; /* (spec) SYNAPSE BLOOM — primary */
  --ni-bloom-050: #FBF7FF; /* (spec) lightest */

  /* Fresh Insight — subtle vibrancy for interactive / standout elements. */
  --ni-fresh-700: #007F4C; /* (derived) accessible on light */
  --ni-fresh-600: #00A364; /* (derived) 3:1 UI edges on light */
  --ni-fresh-300: #5FD9A4; /* (derived) mid */
  --ni-fresh-100: #C7FFE3; /* (spec) FRESH INSIGHT — primary */

  /* Neutrals — the guideline defines neutrals as the light/dark shades of the
     brand hues, so these are ink-tinted rather than pure grey. (derived) */
  --ni-neutral-0: #FFFFFF;
  --ni-neutral-100: #E7EAF5;
  --ni-neutral-300: #C2C8DC;
  --ni-neutral-500: #8891AD;
  --ni-neutral-600: #5A6178;
  --ni-neutral-700: #3D4358;

  /* Status (derived — the guideline defines no status palette) */
  --ni-success-700: #007F4C;
  --ni-success-300: #5FD9A4;
  --ni-warning-700: #9A5B00;
  --ni-warning-300: #FFC46B;
  --ni-danger-700: #B3213C;
  --ni-danger-300: #FF9BAE;

  /* ------------------------------------------------------------------------
     2. PRIMITIVES — type
     Orbitron is LOGO-ONLY. It is listed so the wordmark can be reset in
     markup; never use it for headings, UI or body copy.
     ---------------------------------------------------------------------- */
  --ni-font-logo: Orbitron, "Poppins", sans-serif;
  --ni-font-display: "Poppins", "Inter", system-ui, sans-serif;
  --ni-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ni-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ni-font-tagline: "Space Grotesk", "Poppins", sans-serif; /* lockup tagline */

  --ni-weight-regular: 400;
  --ni-weight-medium: 500;
  --ni-weight-semibold: 600;

  /* Fluid scale, 1.25 major third at the desktop end */
  --ni-text-display: clamp(2.75rem, 1.60rem + 5.20vw, 5rem);
  --ni-text-h1: clamp(2.25rem, 1.66rem + 2.65vw, 3.5rem);
  --ni-text-h2: clamp(1.75rem, 1.40rem + 1.59vw, 2.5rem);
  --ni-text-h3: clamp(1.375rem, 1.20rem + 0.79vw, 1.75rem);
  --ni-text-h4: 1.25rem;
  --ni-text-lg: 1.125rem;
  --ni-text-base: 1rem;
  --ni-text-sm: 0.875rem;
  --ni-text-xs: 0.8125rem;
  --ni-text-eyebrow: 0.75rem;

  --ni-leading-tight: 1.05;
  --ni-leading-snug: 1.2;
  --ni-leading-normal: 1.5;
  --ni-leading-relaxed: 1.65;

  --ni-tracking-display: -0.02em;
  --ni-tracking-normal: 0;
  --ni-tracking-wide: 0.06em;
  --ni-tracking-eyebrow: 0.16em; /* mono eyebrows / research labels */

  --ni-measure: 68ch; /* max line length for body copy */

  /* ------------------------------------------------------------------------
     3. PRIMITIVES — space, radius, elevation, motion (derived)
     ---------------------------------------------------------------------- */
  --ni-space-1: 0.25rem;
  --ni-space-2: 0.5rem;
  --ni-space-3: 0.75rem;
  --ni-space-4: 1rem;
  --ni-space-6: 1.5rem;
  --ni-space-8: 2rem;
  --ni-space-12: 3rem;
  --ni-space-16: 4rem;
  --ni-space-24: 6rem;
  --ni-space-32: 8rem;

  --ni-radius-none: 0; /* section bars and offset blocks stay hard-edged */
  --ni-radius-sm: 4px;
  --ni-radius-md: 8px;
  --ni-radius-lg: 16px;
  --ni-radius-xl: 24px;
  --ni-radius-pill: 999px;
  --ni-radius-appicon: 22.5%; /* responsive-logo tile, per guideline p.9 */

  --ni-shadow-sm: 0 1px 2px rgb(0 4 32 / 0.08);
  --ni-shadow-md: 0 6px 20px -6px rgb(0 4 32 / 0.18);
  --ni-shadow-lg: 0 24px 60px -20px rgb(0 4 32 / 0.32);

  --ni-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ni-duration-fast: 150ms;
  --ni-duration-base: 240ms;
  --ni-duration-slow: 400ms;

  --ni-focus-width: 2px;
  --ni-focus-offset: 2px;

  /* ------------------------------------------------------------------------
     4. SEMANTIC ROLES — LIGHT THEME (default)
     NOTE: Neuro Blue #9AC4FF is 1.79:1 on white. It is a SURFACE and a
     DARK-MODE ink, never light-mode text. Light mode uses blue-700.
     ---------------------------------------------------------------------- */
  --ni-c-bg: var(--ni-ink-050);
  --ni-c-bg-raised: var(--ni-neutral-0);
  --ni-c-bg-sunken: var(--ni-blue-050);
  --ni-c-bg-inverse: var(--ni-ink-900);

  --ni-c-text: var(--ni-ink-900); /* 14.79:1 on --ni-c-bg */
  --ni-c-text-muted: var(--ni-neutral-600); /*  5.65:1 */
  --ni-c-text-inverse: var(--ni-ink-050);
  --ni-c-text-brand: var(--ni-ink-500); /* 10.19:1 */

  --ni-c-border: var(--ni-neutral-300);
  --ni-c-border-strong: var(--ni-neutral-500);

  --ni-c-action: var(--ni-blue-700); /*  4.53:1 */
  --ni-c-action-hover: var(--ni-ink-500);
  --ni-c-on-action: var(--ni-ink-050);
  --ni-c-accent: var(--ni-bloom-700); /*  4.55:1 */
  --ni-c-accent-surface: var(--ni-bloom-200);
  --ni-c-highlight: var(--ni-fresh-700);
  --ni-c-highlight-surface: var(--ni-fresh-100);

  --ni-c-success: var(--ni-success-700);
  --ni-c-warning: var(--ni-warning-700);
  --ni-c-danger: var(--ni-danger-700);

  --ni-c-focus: var(--ni-ink-500);
  --ni-c-logo: var(--ni-ink-900);

  /* Categorical data series — light grounds use the 600/700 tier */
  --ni-c-series-1: #213A6E;
  --ni-c-series-2: #9850C0;
  --ni-c-series-3: #007F4C;
  --ni-c-series-4: #4979BD;
  --ni-c-series-5: #B3213C;
  --ni-c-series-6: #9A5B00;
}

/* --------------------------------------------------------------------------
   5. SEMANTIC ROLES — DARK THEME
   NeuroInk is a dark-first brand: the pastel hues reach 8–14:1 on Ink Black
   and wash out on white. Dark is the flagship expression, not a fallback.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ni-c-bg: var(--ni-ink-900);
    --ni-c-bg-raised: var(--ni-ink-800);
    --ni-c-bg-sunken: var(--ni-ink-950);
    --ni-c-bg-inverse: var(--ni-ink-050);

    --ni-c-text: var(--ni-ink-050); /* 14.79:1 */
    --ni-c-text-muted: #A9B2CE; /*  7.62:1 */
    --ni-c-text-inverse: var(--ni-ink-900);
    --ni-c-text-brand: var(--ni-blue-300); /*  8.97:1 */

    --ni-c-border: var(--ni-ink-600);
    --ni-c-border-strong: #4A5488;

    --ni-c-action: var(--ni-blue-300);
    --ni-c-action-hover: var(--ni-blue-050);
    --ni-c-on-action: var(--ni-ink-900);
    --ni-c-accent: var(--ni-bloom-200); /* 10.63:1 */
    --ni-c-accent-surface: rgb(227 199 255 / 0.14);
    --ni-c-highlight: var(--ni-fresh-100); /* 14.43:1 */
    --ni-c-highlight-surface: rgb(199 255 227 / 0.14);

    --ni-c-success: var(--ni-success-300);
    --ni-c-warning: var(--ni-warning-300);
    --ni-c-danger: var(--ni-danger-300);

    --ni-c-focus: var(--ni-blue-300);
    --ni-c-logo: var(--ni-blue-300);

    --ni-c-series-1: #9AC4FF;
    --ni-c-series-2: #E3C7FF;
    --ni-c-series-3: #C7FFE3;
    --ni-c-series-4: #B78EDF;
    --ni-c-series-5: #FF9BAE;
    --ni-c-series-6: #FFC46B;
  }
}

:root[data-theme="dark"] {
  --ni-c-bg: var(--ni-ink-900);
  --ni-c-bg-raised: var(--ni-ink-800);
  --ni-c-bg-sunken: var(--ni-ink-950);
  --ni-c-bg-inverse: var(--ni-ink-050);

  --ni-c-text: var(--ni-ink-050);
  --ni-c-text-muted: #A9B2CE;
  --ni-c-text-inverse: var(--ni-ink-900);
  --ni-c-text-brand: var(--ni-blue-300);

  --ni-c-border: var(--ni-ink-600);
  --ni-c-border-strong: #4A5488;

  --ni-c-action: var(--ni-blue-300);
  --ni-c-action-hover: var(--ni-blue-050);
  --ni-c-on-action: var(--ni-ink-900);
  --ni-c-accent: var(--ni-bloom-200);
  --ni-c-accent-surface: rgb(227 199 255 / 0.14);
  --ni-c-highlight: var(--ni-fresh-100);
  --ni-c-highlight-surface: rgb(199 255 227 / 0.14);

  --ni-c-success: var(--ni-success-300);
  --ni-c-warning: var(--ni-warning-300);
  --ni-c-danger: var(--ni-danger-300);

  --ni-c-focus: var(--ni-blue-300);
  --ni-c-logo: var(--ni-blue-300);

  --ni-c-series-1: #9AC4FF;
  --ni-c-series-2: #E3C7FF;
  --ni-c-series-3: #C7FFE3;
  --ni-c-series-4: #B78EDF;
  --ni-c-series-5: #FF9BAE;
  --ni-c-series-6: #FFC46B;
}

/* --------------------------------------------------------------------------
   6. BASE + PRIMITIVE CLASSES
   Optional. Import the file for tokens alone, or use these as a starting kit.
   -------------------------------------------------------------------------- */
.ni-root {
  background: var(--ni-c-bg);
  color: var(--ni-c-text);
  font-family: var(--ni-font-body);
  font-size: var(--ni-text-base);
  line-height: var(--ni-leading-relaxed);
  -webkit-font-smoothing: antialiased;
}

.ni-display,
.ni-h1,
.ni-h2,
.ni-h3,
.ni-h4 {
  font-family: var(--ni-font-display);
  font-weight: var(--ni-weight-medium);
  line-height: var(--ni-leading-snug);
  letter-spacing: var(--ni-tracking-display);
  color: var(--ni-c-text);
  text-wrap: balance;
}
.ni-display { font-size: var(--ni-text-display); line-height: var(--ni-leading-tight); }
.ni-h1 { font-size: var(--ni-text-h1); }
.ni-h2 { font-size: var(--ni-text-h2); }
.ni-h3 { font-size: var(--ni-text-h3); letter-spacing: var(--ni-tracking-normal); }
.ni-h4 { font-size: var(--ni-text-h4); letter-spacing: var(--ni-tracking-normal); }

.ni-body { max-width: var(--ni-measure); text-wrap: pretty; }
.ni-lead { font-size: var(--ni-text-lg); color: var(--ni-c-text-muted); max-width: var(--ni-measure); }

/* Eyebrow / research label — the IBM Plex Mono voice of the brand */
.ni-eyebrow {
  font-family: var(--ni-font-mono);
  font-size: var(--ni-text-eyebrow);
  letter-spacing: var(--ni-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ni-c-text-brand);
}

/* Signature device: hard-edged section bar with offset blocks breaking the
   right edge. Lifted from the guideline's section headers. */
.ni-section-bar {
  position: relative;
  background: var(--ni-ink-900);
  color: var(--ni-ink-050);
  font-family: var(--ni-font-display);
  font-weight: var(--ni-weight-semibold);
  font-size: var(--ni-text-h2);
  letter-spacing: var(--ni-tracking-display);
  padding: var(--ni-space-4) var(--ni-space-8);
  border-radius: var(--ni-radius-none);
}
/* Two offset blocks break out past the bar's bottom-right corner. They sit
   OUTSIDE the bar's box, so they need no negative z-index — using one would
   push them behind any opaque ancestor background and make them vanish. */
.ni-section-bar::after,
.ni-section-bar::before {
  content: "";
  position: absolute;
  bottom: calc(var(--ni-space-3) * -1);
  height: var(--ni-space-6);
}
.ni-section-bar::after {
  right: 0;
  width: clamp(72px, 20%, 180px);
  background: var(--ni-bloom-200);
}
.ni-section-bar::before {
  right: clamp(56px, 16%, 150px);
  width: clamp(56px, 14%, 120px);
  background: var(--ni-blue-300);
}

.ni-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ni-space-2);
  font-family: var(--ni-font-display);
  font-weight: var(--ni-weight-medium);
  font-size: var(--ni-text-sm);
  padding: var(--ni-space-3) var(--ni-space-6);
  border-radius: var(--ni-radius-pill);
  border: 1px solid transparent;
  background: var(--ni-c-action);
  color: var(--ni-c-on-action);
  cursor: pointer;
  transition: background var(--ni-duration-fast) var(--ni-ease),
              transform var(--ni-duration-fast) var(--ni-ease);
}
.ni-btn:hover { background: var(--ni-c-action-hover); }
.ni-btn:active { transform: translateY(1px); }
.ni-btn--secondary {
  background: transparent;
  color: var(--ni-c-action);
  border-color: var(--ni-c-border-strong);
}

.ni-card {
  background: var(--ni-c-bg-raised);
  border: 1px solid var(--ni-c-border);
  border-radius: var(--ni-radius-lg);
  padding: var(--ni-space-6);
  box-shadow: var(--ni-shadow-sm);
}

:where(.ni-root) :focus-visible {
  outline: var(--ni-focus-width) solid var(--ni-c-focus);
  outline-offset: var(--ni-focus-offset);
  border-radius: var(--ni-radius-sm);
}

/* Logo: colour is inherited, so set `color` on any ancestor. */
.ni-logo { color: var(--ni-c-logo); display: inline-block; }
.ni-logo svg { width: 100%; height: auto; display: block; }

@media (prefers-reduced-motion: reduce) {
  .ni-root *,
  .ni-root *::before,
  .ni-root *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}