/* =========================================================================
   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-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);

  /* 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( 51,  51,  51);
  --neutral-800:  rgb( 38,  38,  38);
  --neutral-900:  rgb( 23,  23,  23);
  --neutral-950:  rgb( 10,  10,  10);

  /* 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);

  /* 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,.06);
  --shadow-2: 0 3px 6px -3px rgba(0,0,0,.10), 0 6px 9px -1.5px rgba(0,0,0,.10);
  --shadow-3: 0 8px 24px -4px rgba(0,0,0,.16), 0 4px 8px -2px rgba(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,.45);

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

  /* 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"], .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.20);

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

  --btn-ghost-bg:             transparent;
  --btn-ghost-bg-hover:       rgba(255, 255, 255, 0.06);
  --btn-ghost-bg-active:      rgba(255, 255, 255, 0.10);
  --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"], .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.10);
  --border-2: rgba(255,255,255,0.18);
  --border-strong: rgba(255,255,255,0.40);

  --shadow-1: 0 1px 2px rgba(0,0,0,.40);
  --shadow-2: 0 3px 6px -3px rgba(0,0,0,.50), 0 6px 9px -1.5px rgba(0,0,0,.40);
  --shadow-3: 0 12px 32px -6px rgba(0,0,0,.55), 0 4px 8px -2px rgba(0,0,0,.40);
  --shadow-prism-glow: 0 0 24px -6px rgba(126,40,245,.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-display    { font-family: var(--font-display); font-weight: 800; font-size: 100px; line-height: 1.0;  letter-spacing: 0.08em; text-transform: uppercase; }
.ds-h1         { font-family: var(--font-display); font-weight: 700; font-size: 48px;  line-height: 1.05; letter-spacing: 0.06em; text-transform: uppercase; }
.ds-h2         { font-weight: 600; font-size: 30px; line-height: 1.15; letter-spacing: -0.01em; }
.ds-h3         { font-weight: 600; font-size: 24px; line-height: 1.25; letter-spacing: -0.005em; }
.ds-h4         { font-weight: 600; font-size: 20px; line-height: 1.30; }
.ds-eyebrow    { font-weight: 600; font-size: 12px; line-height: 1.33; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.ds-body       { font-weight: 400; font-size: 16px; line-height: 1.50; color: var(--fg-2); }
.ds-body-sm    { font-weight: 400; font-size: 14px; line-height: 1.50; letter-spacing: 0.005em; color: var(--fg-2); }
.ds-label      { font-weight: 500; font-size: 14px; line-height: 1.50; color: var(--fg-1); }
.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.00; letter-spacing: -0.02em; color: var(--fg-1); }
.ds-code       { font-family: var(--font-mono); font-size: 13px; line-height: 1.45; color: var(--fg-1); background: var(--bg-muted); padding: 0 4px; border-radius: var(--r-xs); }

/* ---------- 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. */
.prism-border {
  position: relative;
  isolation: isolate;
  background: var(--bg-panel);
}
.prism-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;                                    /* the stroke width */
  border-radius: inherit;
  background: var(--prism);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.prism-border-2::before { padding: 2px; }

/* Subtle prism halo used behind AI-affordance buttons */
.prism-halo {
  position: relative;
}
.prism-halo::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  background: var(--prism);
  filter: blur(18px);
  opacity: 0.35;
  z-index: -1;
}

/* 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; }