/* CONTROL — Design tokens.
   Ported from "CONTROL Design System/tokens/{colors,typography,spacing}.css".
   Source of truth for color/type/spacing across all three screens (Bay, Hub,
   Systems). app.css consumes these as var(...) instead of hardcoded values. */

/* ── Fonts ──────────────────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&display=swap");

:root {
  /* ── Hull / backgrounds ─────────────────────────────────────────────── */
  --space-900: #05060d;   /* deepest void — vignette edge */
  --space-800: #0b0d1a;   /* primary background */
  --space-700: #0a0c18;   /* panel fill (opaque form) */
  --space-600: #141833;   /* raised background / gradient core */
  --space-500: #1b2044;   /* hover surface */

  --panel-fill: rgba(6, 8, 20, 0.65);
  --panel-fill-strong: rgba(6, 8, 20, 0.8);

  /* ── Borders / hairlines ────────────────────────────────────────────── */
  --line-900: #1c2140;
  --line-800: #252a4a;
  --line-700: #2a2f52;
  --line-600: #333a63;

  /* ── Text (lavender-gray family) ────────────────────────────────────── */
  --text-bright: #e7ebff;
  --text-body: #aeb6d6;
  --text-muted: #5b6289;
  --text-faint: #3a3f63;
  --text-reply: #c3b0b0;
  --text-secondary: #8b93c9;
  --text-highlight: #c8d0f5;

  /* ── HAL / danger (red → amber ramp) ────────────────────────────────── */
  --hal-red: #ff3b3b;
  --hal-red-deep: #2a0000;
  --hal-amber: #ffb347;
  --hal-hot: #ffffff;

  /* ── Semantic status ────────────────────────────────────────────────── */
  --ok: #3ddc97;
  --ok-deep: #0f3d2e;
  --warn: #ffb347;
  --warn-deep: #3d2c0f;
  --danger: #ff3b3b;
  --danger-deep: #3d0f0f;
  --ws: #a071ff;
  --ws-deep: #241040;
  --blue: #4d8dff;
  --blue-deep: #0e2036;

  --method-get: var(--ok);
  --method-post: var(--warn);
  --method-ws: var(--ws);

  --bg: var(--space-800);
  --bg-raised: var(--space-600);
  --surface-card: var(--panel-fill);
  --surface-input: var(--panel-fill-strong);
  --border-default: var(--line-800);
  --border-input: var(--line-700);
  --border-hover: var(--line-600);
  --focus-ring: var(--hal-red);

  --hull-gradient: radial-gradient(120% 120% at 50% 40%,
      var(--space-600) 0%, var(--space-800) 60%, var(--space-900) 100%);

  /* Eye dynamics — set from JS at runtime; defaults = dormant. */
  --arousal: 0.08;
  --threat: 0;
  --pulse: 0;
  --eye-base-h: 0deg;          /* resting eye hue — HAL red */
  --eye-threat-shift: 40deg;   /* hue drift as threat rises (red → amber) */
  --eye-core-h: calc(var(--eye-base-h) + var(--eye-threat-shift) * var(--threat));
  --eye-bright: calc(35% + 55% * var(--arousal) + 10% * var(--threat));

  /* ── Type ───────────────────────────────────────────────────────────── */
  --font-mono: "JetBrains Mono", "SF Mono", "Courier New", monospace;

  --size-2xs: 0.6rem;
  --size-xs:  0.66rem;
  --size-sm:  0.72rem;
  --size-base:0.85rem;
  --size-md:  0.9rem;
  --size-lg:  1rem;
  --size-xl:  1.35rem;
  --size-2xl: 1.8rem;
  --size-3xl: 2.6rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --track-tight: 0;
  --track-label: 0.12em;
  --track-wide: 0.18em;
  --track-caps: 0.22em;
  --track-tag: 0.2em;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-body: 1.6;

  --text-label: var(--size-sm);
  --text-heading: var(--size-xl);
  --text-title: var(--size-2xl);

  /* ── Spacing ────────────────────────────────────────────────────────── */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.4rem;
  --space-6: 2rem;
  --space-7: 2.6rem;
  --space-8: 3.4rem;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;
  --radius-round: 50%;

  --border-hair: 1px solid var(--line-800);
  --border-input-w: 1px;

  --shadow-inset-well: inset 0 0 34px rgba(0, 0, 0, 0.95);
  --shadow-panel: 0 10px 34px rgba(0, 0, 0, 0.45);
  --shadow-lift: 0 24px 60px rgba(0, 0, 0, 0.7);
  --shadow-bezel:
    inset 0 6px 22px rgba(0, 0, 0, 0.9),
    inset 0 -4px 14px rgba(255, 255, 255, 0.04),
    0 24px 60px rgba(0, 0, 0, 0.7);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-glide: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-instant: 0.06s;
  --dur-fast: 0.2s;
  --dur-slow: 0.6s;

  --bay-max: 560px;
  --sys-max: 1080px;
  --eye-size: min(46vh, 340px);
}

/* ── Skin: EL TUTOR / PIP-9000 ──────────────────────────────────────────────
   Fictional in-universe skin for the talk (not Tutor Lab's real branding).
   Only the "personality" tokens change: hull, hairlines, text, and the eye
   family. Semantic status colors, spacing, radius, type, and motion stay put.
   Selected by public/skin.js (data-skin on <html>). */
:root[data-skin="tutor"] {
  --space-900: #0d0a06;
  --space-800: #140f09;
  --space-700: #120d08;
  --space-600: #241a0f;
  --space-500: #30220f;

  --panel-fill: rgba(20, 15, 9, 0.65);
  --panel-fill-strong: rgba(20, 15, 9, 0.8);

  --line-900: #2a2013;
  --line-800: #352814;
  --line-700: #3d2e18;
  --line-600: #4a391f;

  --text-bright: #fff3e0;
  --text-body: #d9c3a0;
  --text-muted: #8a7757;
  --text-faint: #4a3f2c;
  --text-reply: #d8b98a;
  --text-secondary: #c2a476;
  --text-highlight: #f2dcb8;

  --hal-red: #ffb100;
  --hal-red-deep: #3a2200;
  --hal-amber: #ffd56b;
  --hal-hot: #fffaf0;

  /* Guide amber at rest; under threat the eye warms toward red instead. */
  --eye-base-h: 41deg;
  --eye-threat-shift: -41deg;
}