/* ============================================================
   Lina Design System — Colors & Type
   Source of truth: DESIGN.md
   "Quiet AI-native operating theatre" — single-canvas,
   typography-driven, dark-first with mirrored light mode.
   ============================================================ */

/* ---------- Fonts (Geist Sans + Geist Mono — self-hosted variable fonts) ---------- */
/* Paths are relative to THIS css file (project root /fonts/), which is where it sits. */
@font-face {
  font-family: "Geist";
  src: url("fonts/Geist[wght].woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Italic[wght].woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono[wght].woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* === Font families === */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "Geist Mono", "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* === Spacing scale — strict 4 / 8 / 12 / 16 / 24 / 40 === */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 40px;

  /* === Roundness — ROUND_EIGHT === */
  --r-sm: 4px;
  --r-md: 8px;
  --r-full: 999px;

  /* === Motion — fade only, 200–300ms === */
  --dur-instant: 60ms; /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur: 240ms; /* @kind other */
  --dur-slow: 480ms; /* @kind other */
  --dur-orchestrate: 800ms; /* @kind other */
  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */

  /* === Accent — used with monastic discipline === */
  --iris: #6E7BFF;             /* Electric Iris */
  --iris-glow-dark:  rgba(110, 123, 255, 0.20);
  --iris-glow-light: rgba(110, 123, 255, 0.25);

  /* === Thinking-orb gradient family — agent thinking only === */
  --orb-iris:     #6E7BFF;
  --orb-lavender: #8A7BFF;
  --orb-violet:   #B06BFF;
  --orb-sapphire: #4A6BFF;
  --orb-sky:      #7B9FFF;
}

/* ---------- LIGHT MODE (default) ---------- */
:root,
:root[data-theme="light"] {
  /* Surfaces */
  --bg-base:    #F7F7F8;          /* Warm Paper Off-White */
  --bg-elev:    #FFFFFF;          /* Pure Sheet White */
  --bg-subtle:  #EEEEEF;          /* Pale Mist */

  /* Text */
  --fg1: #0B0B0C;                  /* Deep Ink — primary */
  --fg2: #5A5A62;                  /* Slate Whisper — secondary */
  --fg3: #8A8A92;                  /* Pewter Gray — tertiary / metadata */

  /* Structural lines */
  --hairline:        rgba(0,0,0,0.06);
  --hairline-micro:  rgba(0,0,0,0.04);
  --input-line:      rgba(0,0,0,0.15);

  /* Overlays */
  --scrim: rgba(255,255,255,0.60);

  --iris-glow: var(--iris-glow-light);

  /* Aliases — match reference component CSS */
  --text-primary:   var(--fg1);
  --text-secondary: var(--fg2);
  --text-tertiary:  var(--fg3);

  /* Semantic palette — reserved for system feedback (toasts, stickers).
     Per DESIGN.md: state in product chrome lives in opacity/copy, NOT color.
     These tokens exist only for genuinely systemic feedback surfaces. */
  --info:    #4A6BFF;
  --info-bg:    color-mix(in srgb, #4A6BFF 8%, var(--bg-elev));
  --success: #1F8A4C;
  --success-bg: color-mix(in srgb, #1F8A4C 8%, var(--bg-elev));
  --warn:    #B36B00;
  --warn-bg:    color-mix(in srgb, #B36B00 8%, var(--bg-elev));
  --danger:  #C53030;
  --danger-bg:  color-mix(in srgb, #C53030 8%, var(--bg-elev));
}

/* ---------- DARK MODE (mirror) ---------- */
:root[data-theme="dark"] {
  --bg-base:    #0B0B0C;          /* Deep Ink Near-Black */
  --bg-elev:    #141416;          /* Soft Graphite */
  --bg-subtle:  #1B1B1E;          /* Whisper Graphite */

  --fg1: #F5F5F7;                  /* Porcelain White — primary */
  --fg2: #8A8A92;                  /* Pewter Gray — secondary */
  --fg3: #5A5A62;                  /* Slate Whisper — tertiary */

  --hairline:        rgba(255,255,255,0.06);
  --hairline-micro:  rgba(255,255,255,0.04);
  --input-line:      rgba(255,255,255,0.15);

  --scrim: rgba(0,0,0,0.60);
  --iris-glow: var(--iris-glow-dark);

  --text-primary:   var(--fg1);
  --text-secondary: var(--fg2);
  --text-tertiary:  var(--fg3);

  /* Semantic — dark variants brighter for visibility */
  --info:    #6E8AFF;
  --info-bg:    color-mix(in srgb, #6E8AFF 12%, var(--bg-elev));
  --success: #4ADE80;
  --success-bg: color-mix(in srgb, #4ADE80 10%, var(--bg-elev));
  --warn:    #F0B040;
  --warn-bg:    color-mix(in srgb, #F0B040 10%, var(--bg-elev));
  --danger:  #FF6B6B;
  --danger-bg:  color-mix(in srgb, #FF6B6B 10%, var(--bg-elev));
}

/* ============================================================
   SEMANTIC TYPOGRAPHY
   Apply via element selectors so authors can drop content in
   without thinking. All sizes in px to match design tokens.
   ============================================================ */

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg1);
  background: var(--bg-base);
  font-feature-settings: "ss01", "tnum";
  margin: 0;
}

/* Page-title / display — the single largest specimen, for page heads.
   One step above .t-title (28 → 20 → 14). Still quiet: weight 400, not
   theatrical. Use once per screen, for the primary page heading. */
h1, .t-display {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--fg1);
  margin: 0;
}

/* Section / card / modal heading — one quiet 20px specimen.
   Lina does not theatricalize headings, but 18px was tight
   for a heading by current market norms. */
h2, h3, .t-title {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg1);
  margin: 0;
}

/* Hero input placeholder — onboarding only */
.t-hero {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 300;
  color: var(--fg3);
  line-height: 1.3;
}

/* Body — the workhorse */
p, .t-body {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg1);
  margin: 0;
}

/* Labels — always lowercase, never UPPERCASE */
.t-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--fg2);
  text-transform: lowercase;
}

/* Metadata & monospace — dates, times, counts, domains.
   12px floor: 11px was at the edge of accessibility for
   secondary text. Keep mono micro-labels at 11px via .t-micro. */
.t-meta, time, code, kbd,
.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--fg3);
  font-feature-settings: "tnum";
}

/* Reserved micro-label — only for chrome decorations
   (corner badges, kbd shortcuts). Avoid for paragraphs. */
.t-micro {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--fg3);
  letter-spacing: 0.04em;
}

/* Live thought stream — reserved for agent thinking */
.t-thought {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 13px;
  color: var(--iris);
  opacity: 0.7;
}

/* Tabular numerals everywhere, by default */
* { font-variant-numeric: tabular-nums; }