/* ===========================================================================
   Q² Studio — Design Tokens (Stage 5.16a)
   ---------------------------------------------------------------------------
   The single source of truth for colour, type, spacing, radius, shadow, and
   motion. No component styles live here — only the raw values.

   Aesthetic: Linear × Vercel × elevate.io.
   Public surfaces use the galaxy palette (quiet night-sky navy).
   Internal surfaces use the neutral palette (near-black work surface).
   =========================================================================== */

:root {

  /* -------------------------------------------------------------------------
     COLOUR — Neutral surface family (internal pages)
     Three background steps + three text steps. Never invent a fourth.
     ------------------------------------------------------------------------- */
  --bg-900: #16161a;   /* page background */
  --bg-800: #1e1e24;   /* card background */
  --bg-700: #26262e;   /* input background */
  --bg-600: #30303a;   /* raised / hover background */

  --text-100: #f5f5f7; /* primary text */
  --text-200: #d4d4dc; /* secondary text (L1: brighter, crisper) */
  --text-300: #a3a3b0; /* tertiary text, placeholders */

  --border-100: rgba(255, 255, 255, 0.06);
  --border-200: rgba(255, 255, 255, 0.10);
  --border-300: rgba(255, 255, 255, 0.16);

  /* -------------------------------------------------------------------------
     COLOUR — Galaxy family (public pages)
     Deep navy at the top, warm horizon glow at the bottom. Starfield sits
     between them. Designed to be almost-black, not "space purple".
     ------------------------------------------------------------------------- */
  --g-bg-top:    #060810;   /* deep navy-black, top of page */
  --g-bg-mid:    #0a0f1e;   /* slightly lifted mid */
  --g-bg-bottom: #16121c;   /* warm-tinted bottom, before horizon */
  --g-horizon:   #2a1e1a;   /* warm horizon glow, faint */

  --g-card:           rgba(18, 20, 30, 0.72);
  --g-card-border:    rgba(255, 255, 255, 0.08);
  --g-card-border-hover: rgba(255, 255, 255, 0.14);

  --g-text-100: #f5f7fb;
  --g-text-200: #dde1ea;
  --g-text-300: #aab1c4;
  --g-text-400: #7f879c;

  --g-link:       #8fa6ff;
  --g-link-hover: #b3c4ff;

  /* -------------------------------------------------------------------------
     COLOUR — Accent (one colour, used everywhere for meaning)
     ------------------------------------------------------------------------- */
  --accent-400: #818cf8;
  --accent-500: #6366f1;
  --accent-600: #4f46e5;

  --accent-soft: rgba(99, 102, 241, 0.12);
  --accent-ring: rgba(99, 102, 241, 0.35);

  /* L1: teal (the modern accent) and gold, beside the indigo */
  --teal-300: #5eead4;
  --teal-400: #2dd4bf;
  --teal-500: #14b8a6;
  --teal-600: #0d9488;
  --teal-soft: rgba(20, 184, 166, 0.14);
  --gold-400: #e6c35c;
  --gold-500: #d4a73a;
  --aurora: linear-gradient(90deg, #6366f1, #14b8a6, #d4a73a, #8b5cf6, #6366f1);

  /* The celestial sky (2026-10-17): deep indigo into twilight purple and teal, with a whisper of pink — after the
     Milky Way over standing stones. Glow strengths are capped (teal 12%, purple 10%, pink 5%) so even where they
     overlap, tertiary text stays above 4.5:1 (4.71 at the brightest point; secondary 7.97, primary higher). */
  --sky-indigo: #13233f;
  --sky-deep: #0a1224;
  --sky-teal: rgba(20, 184, 166, 0.08);
  --sky-green: rgba(74, 222, 128, 0.06);       /* the aurora's green (2026-10-18); teal gave it room */
  --sky-purple: rgba(124, 58, 237, 0.08);
  --sky-pink: rgba(232, 121, 249, 0.05);
  /* With green added the budget was re-split (teal 8, green 6, purple 8, pink 5 apart): tertiary text keeps 4.68:1
     where the three overlap (computed). */

  /* The work pages (dashboard, jobs, review, admin): a lighter grey than the night sky, for reading. Tertiary text
     6.37:1 on the page, cards a step lighter so they lift rather than sink. */
  --work-bg: #10141d;                          /* under the photograph, and wherever it hasn't loaded */
  --work-card: rgba(30, 35, 47, 0.72);
  /* The veil over the work pages' aurora (generated, already dark): light enough that the green and violet show,
     dark enough that tertiary text keeps 4.5:1 over the image's brightest part (tests/test_backgrounds_and_jobs.py
     computes it: 4.9:1 at the middle stop). */
  --work-veil-top: rgba(9, 12, 20, 0.74);
  --work-veil: rgba(9, 12, 20, 0.68);
  --work-veil-foot: rgba(9, 12, 20, 0.84);
  --pink-soft: #f0abfc;
  --magenta-soft: #e879f9;

  /* -------------------------------------------------------------------------
     COLOUR — Semantic
     ------------------------------------------------------------------------- */
  --success-400: #34d399;
  --success-500: #10b981;
  --success-600: #059669;
  --success-soft: rgba(16, 185, 129, 0.12);

  --warning-400: #fbbf24;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-soft: rgba(245, 158, 11, 0.12);

  --danger-400: #f87171;
  --danger-500: #ef4444;
  --danger-600: #dc2626;
  --danger-soft: rgba(239, 68, 68, 0.12);

  --info-400: #60a5fa;
  --info-500: #3b82f6;
  --info-soft: rgba(59, 130, 246, 0.12);

  /* -------------------------------------------------------------------------
     TYPOGRAPHY
     Inter for everything. JetBrains Mono for IDs, job hashes, code, logs.
     Sizes cover 95% of the app. Do not invent sizes.
     ------------------------------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  38px;
  --text-5xl:  52px;

  --leading-tight:   1.15;
  --leading-snug:    1.35;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.02em;
  --tracking-wider:  0.08em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* -------------------------------------------------------------------------
     SPACING — 8px grid. Every margin, padding, and gap is one of these.
     ------------------------------------------------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;

  /* -------------------------------------------------------------------------
     RADII — three values only.
     ------------------------------------------------------------------------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* -------------------------------------------------------------------------
     SHADOWS — two levels only. Cards use sm, modals use md.
     ------------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.40);

  --shadow-glow: 0 0 0 1px rgba(99, 102, 241, 0.20),
                 0 8px 32px rgba(99, 102, 241, 0.18);

  /* -------------------------------------------------------------------------
     MOTION — one easing curve, two durations. Nothing over 400ms. Ever.
     ------------------------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-micro: 150ms;
  --dur-container: 250ms;

  /* -------------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------------- */
  --shell-max: 1120px;
  --shell-max-narrow: 720px;
  --sidebar-w: 232px;
  --topbar-h: 60px;
}

/* ===========================================================================
   RESET — minimal, opinionated.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-100);
  background: var(--bg-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }

::selection {
  background: var(--accent-soft);
  color: var(--text-100);
}

/* ===========================================================================
   THEME — body classes switch palette families.
   body.theme-galaxy    → public pages
   body.theme-neutral   → internal pages (default)
   =========================================================================== */

/* ---- Neutral (internal) ---- */
body.theme-neutral,
body:not(.theme-galaxy) {
  background: var(--bg-900);
  color: var(--text-100);
}

/* ---- Galaxy (public) ----
   The full galaxy effect (starfield, horizon glow) lives in components.css
   so that tokens.css stays purely a value file. Here we only set the base
   colour and text so there is no flash of the wrong theme. */
body.theme-galaxy {
  background: var(--g-bg-top);
  color: var(--g-text-100);
}

/* ===========================================================================
   ACCESSIBILITY
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ===========================================================================
   LOGO — sizing carried over from the previous theme.
   =========================================================================== */

.q2-logo {
  display: block;
  width: auto;
  color: currentColor;
}

.q2-logo-hero {
  height: 96px;
  margin: 0 auto 18px auto;
}

.q2-logo-eyebrow {
  height: 32px;
  margin: 0 0 10px 0;
}