/* =========================================================================
   Array Spectrum AI — Foundations
   Tokens for color, type, spacing, radius, shadow.
   Light + dark scopes. Geist is the primary face used across all surfaces.
   ========================================================================= */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src:
    url('./fonts/Geist-VariableFont_wght.ttf') format('truetype-variations'),
    url('./fonts/Geist-VariableFont_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'Geist';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src:
    url('./fonts/Geist-Italic-VariableFont_wght.ttf')
      format('truetype-variations'),
    url('./fonts/Geist-Italic-VariableFont_wght.ttf') format('truetype');
}

/* ---------- LIGHT mode (default) ---------- */
:root {
  /* Brand prism gradient — pink → magenta → indigo → teal.
     This single gradient is the *only* place chromatic color enters the UI.
     Use it as a 1px border, a logo background, a chip glow, or a thin underline
     to draw attention to AI surfaces. Never as a full-bleed page background. */
  --prism: linear-gradient(
    135deg,
    rgb(255, 6, 249) 0%,
    rgb(126, 40, 245) 42%,
    rgb(57, 4, 253) 75%,
    rgb(48, 170, 182) 100%
  );
  /* Prism gradient stops — decorative background only. */
  --prism-stop-pink: rgb(255, 6, 249);
  --prism-stop-violet: rgb(126, 40, 245);
  --prism-stop-indigo: rgb(57, 4, 253);
  --prism-stop-teal: rgb(48, 170, 182);

  /* Feed accent colors — lighter, pastel relatives of the prism stops, used as
     the text/dot color on feed-type pills (the pill fill is mixed from the
     --prism-stop-* above). Hand-tuned for contrast; NOT auto-derived. If you
     retune a prism stop and want the accents to follow, eyeball these too. */
  --accent-teal: #3fc9d6; /* ~prism-stop-teal, +9% lightness */
  --accent-mint: #7fe0cf; /* standalone; closest to teal */
  --accent-violet: #a98bf5; /* ~prism-stop-violet, +19% lightness */
  --accent-pink: #ff6fe0; /* ~prism-stop-pink, +21% lightness */
  --accent-indigo: #6ea8ff; /* ~prism-stop-indigo, hue -29deg -> blue */

  /* Neutral scale — pulled from the Common Library Figma. */
  --neutral-0: rgb(255, 255, 255);
  --neutral-50: rgb(250, 250, 250);
  --neutral-100: rgb(245, 245, 245);
  --neutral-200: rgb(229, 229, 229);
  --neutral-300: rgb(212, 212, 212);
  --neutral-400: rgb(163, 163, 163);
  --neutral-500: rgb(115, 115, 115);
  --neutral-600: rgb(82, 82, 82);
  --neutral-700: rgb(64, 64, 64);
  --neutral-750: rgb(11, 22, 56);
  --neutral-800: rgb(9, 17, 43);
  --neutral-900: rgb(6, 12, 31);
  --neutral-950: rgb(3, 6, 16);

  /* Semantic — borrowed from shadcn defaults the Common Library extends. */
  --success: rgb(11, 110, 39);
  --success-soft: rgb(214, 245, 222);
  --warning: rgb(212, 114, 2);
  --warning-soft: rgb(253, 245, 206);
  --danger: rgb(220, 38, 38);
  --danger-soft: rgb(245, 214, 214);
  --info: rgb(48, 170, 182);

  /* Surfaces (LIGHT) */
  --bg-app: var(--neutral-100); /* outer canvas */
  --bg-panel: var(--neutral-0); /* cards / panels */
  --bg-elevated: var(--neutral-50); /* chat bubbles, inputs */
  --bg-muted: var(--neutral-100); /* table zebra, hover */
  --bg-inverse: var(--neutral-950);

  /* Opaque dark "well" base — the letterbox behind media thumbnails/skeletons,
     always shown on the dark site (not theme-reactive). Sits under the prism
     radial glows on media wells and is the solid fill of loading skeletons, so
     a skeleton reveals into the same base it was covering. A softened navy: the
     ramp's navy steps (e.g. --neutral-750) run ~5x blue-to-red and read too
     saturated as a full-bleed well, so this is a gentler tint (~2x) at the same
     darkness — navy-consistent without dominating. Adjust the blue channel to
     taste; raise it toward --neutral-750 for more navy, lower for more neutral. */
  --surface-well: rgb(16, 21, 38);

  /* Deep navy hero ground — the dark backdrop behind hero/feature sections.
     Alpha variants derive from this one color via color-mix so they can't drift. */
  --bg-hero-navy: #070d22;

  /* Glass-card surface — a faint top-down white sheen used on the many dark
     "glass" cards. Defined once here so the stops can't drift per card. */
  --surface-card-gradient: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.01)
  );

  /* Foreground (LIGHT) */
  --fg-1: var(--neutral-950); /* primary copy */
  --fg-2: var(--neutral-700); /* body, secondary */
  --fg-3: var(--neutral-500); /* labels, captions, placeholders */
  --fg-4: var(--neutral-400); /* disabled / hint */
  --fg-on-prism: var(--neutral-50);

  /* Borders (LIGHT) */
  --border-1: var(--neutral-200); /* default */
  --border-2: var(--neutral-300); /* input outlines, separators in tables */
  --border-strong: var(--neutral-700);

  /* Radii */
  --r-xs: 4px; /* badges, kbd */
  --r-sm: 6px; /* secondary buttons */
  --r-md: 8px; /* primary buttons, inputs, chat bubble */
  --r-lg: 12px; /* surface cards in chat */
  --r-xl: 16px; /* full panels, modals */
  --r-2xl: 24px; /* hero / section cards */
  --r-pill: 9999px;

  /* Shadows — extremely restrained. */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2:
    0 3px 6px -3px rgba(0, 0, 0, 0.1), 0 6px 9px -1.5px rgba(0, 0, 0, 0.1);
  --shadow-3:
    0 8px 24px -4px rgba(0, 0, 0, 0.16), 0 4px 8px -2px rgba(0, 0, 0, 0.08);
  /* Inner glow used on AI input surfaces. */
  --shadow-prism-glow:
    0 0 0 1px transparent, 0 0 24px -8px rgba(126, 40, 245, 0.45);

  /* Spacing scale (4-pt) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-9: 36px;
  --s-10: 40px;
  --s-12: 48px;
  --s-14: 56px;
  --s-16: 64px;
  --s-20: 80px;

  /* Type families */
  --font-sans:
    'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: var(
    --font-sans
  ); /* alias kept for backward-compat; Geist is the only display face */
  --font-mono: 'Geist Mono', ui-monospace, 'JetBrains Mono', Menlo, monospace;

  /* ─── Interaction state tokens (LIGHT)
     Use these for button hover/active so the theme can flip the *direction*
     of the brightness shift without each component reaching for raw neutrals. */
  --btn-primary-bg: var(--neutral-950);
  --btn-primary-fg: var(--neutral-50);
  --btn-primary-bg-hover: var(
    --neutral-800
  ); /* one shade lighter than the resting fill on light */
  --btn-primary-bg-active: var(--neutral-700);

  --btn-secondary-bg: var(--neutral-100);
  --btn-secondary-bg-hover: var(--neutral-200);
  --btn-secondary-bg-active: var(--neutral-300);

  --btn-outline-bg: transparent;
  --btn-outline-bg-hover: var(--neutral-100);
  --btn-outline-bg-active: var(--neutral-200);

  --btn-ghost-bg: transparent;
  --btn-ghost-bg-hover: rgba(0, 0, 0, 0.04);
  --btn-ghost-bg-active: rgba(0, 0, 0, 0.08);
  --btn-ghost-fg: var(--neutral-700);

  --btn-danger-bg: var(--danger);
  --btn-danger-bg-hover: rgb(185, 28, 28);
  --btn-danger-bg-active: rgb(153, 27, 27);

  --focus-ring: var(--neutral-950);
}

/* ─── Interaction state overrides (DARK) ─── */
[data-theme='dark'] {
  --btn-primary-bg: var(--neutral-50);
  --btn-primary-fg: var(--neutral-950);
  --btn-primary-bg-hover: var(
    --neutral-200
  ); /* one shade DARKER than resting white */
  --btn-primary-bg-active: var(--neutral-300);

  --btn-secondary-bg: rgba(255, 255, 255, 0.08);
  --btn-secondary-bg-hover: rgba(255, 255, 255, 0.14);
  --btn-secondary-bg-active: rgba(255, 255, 255, 0.2);

  --btn-outline-bg: transparent;
  --btn-outline-bg-hover: rgba(255, 255, 255, 0.06);
  --btn-outline-bg-active: rgba(255, 255, 255, 0.1);

  --btn-ghost-bg: transparent;
  --btn-ghost-bg-hover: rgba(255, 255, 255, 0.06);
  --btn-ghost-bg-active: rgba(255, 255, 255, 0.1);
  --btn-ghost-fg: var(--neutral-300);

  --btn-danger-bg: var(--danger);
  --btn-danger-bg-hover: rgb(220, 60, 60);
  --btn-danger-bg-active: rgb(248, 113, 113);

  --focus-ring: var(--neutral-50);
}

/* ---------- DARK mode ---------- */
[data-theme='dark'] {
  --bg-app: var(--neutral-800);
  --bg-panel: var(--neutral-900);
  --bg-elevated: rgba(255, 255, 255, 0.06);
  --bg-muted: rgba(255, 255, 255, 0.04);
  --bg-inverse: var(--neutral-50);

  --fg-1: var(--neutral-50);
  --fg-2: rgb(212, 212, 212);
  --fg-3: var(--neutral-400);
  --fg-4: var(--neutral-500);
  --fg-on-prism: var(--neutral-50);

  --border-1: rgba(255, 255, 255, 0.1);
  --border-2: rgba(255, 255, 255, 0.18);
  --border-strong: rgba(255, 255, 255, 0.4);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2:
    0 3px 6px -3px rgba(0, 0, 0, 0.5), 0 6px 9px -1.5px rgba(0, 0, 0, 0.4);
  --shadow-3:
    0 12px 32px -6px rgba(0, 0, 0, 0.55), 0 4px 8px -2px rgba(0, 0, 0, 0.4);
  --shadow-prism-glow: 0 0 24px -6px rgba(126, 40, 245, 0.55);
}

/* ---------- Semantic typography (use these in markup) ---------- */
:where(
  .ds-display,
  .ds-h1,
  .ds-h2,
  .ds-h3,
  .ds-h4,
  .ds-body,
  .ds-body-sm,
  .ds-caption,
  .ds-label,
  .ds-eyebrow,
  .ds-kpi,
  .ds-code
) {
  font-family: var(--font-sans);
  color: var(--fg-1);
  margin: 0;
}
.ds-caption {
  font-weight: 400;
  font-size: 12px;
  line-height: 1.33;
  letter-spacing: 0.015em;
  color: var(--fg-3);
}
.ds-kpi {
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}

/* ---------- Prism border utility ----------
   Apply to any element to give it the signature 1px gradient outline.
   It draws the gradient via background-clip masks; works on any radius. */

/* Subtle prism halo used behind AI-affordance buttons */

/* Base resets used by every preview card */
html,
body {
  background: var(--bg-app);
  color: var(--fg-1);
  font-family: var(--font-sans);
}
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}