/* =========================================================
   TERCIH24 DESIGN TOKENS
   =========================================================
   One palette for every page, so the landing, the robot and the content pages
   cannot drift apart. Load this before any other stylesheet.

   Single theme: there is no light/dark pair. The palette is the dark side of
   the landing's language, which is what the liquid-glass surfaces need to read
   against. See docs or git history for the reasoning.
   ========================================================= */

:root {
  /* ===== SPACING SCALE (4-unit base) ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ===== TYPOGRAPHY ===== */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* Manrope carries everything; Playfair italic is the accent, as on the
     landing. Mono is kept for rank numerals only, where tabular figures make
     24 rows of numbers readable - it is a system stack, so no extra webfont. */
  --font-sans: Manrope, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-italic: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* ===== RADII ===== */
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;

  /* ===== PALETTE =====
     One theme, no toggle. Navy rather than slate, set to the landing's cutoff
     surface (#152633), a shade under it so the two sit in the same family. The glass system is kept and re-tinted: frosted panels read
     best over a dark ground, which is why this is the dark side of the
     landing's palette rather than its ivory side. */

  /* Surfaces */
  --background: #12212c;
  --background-soft: #182b39;
  --background-gradient:
    radial-gradient(1400px circle at 14% -16%, rgba(229, 189, 131, 0.06) 0%, rgba(229, 189, 131, 0) 58%),
    radial-gradient(1100px circle at 92% 2%, rgba(126, 162, 189, 0.08) 0%, rgba(126, 162, 189, 0) 60%),
    linear-gradient(160deg, #12212c 0%, #152735 100%);
  --foreground: #f4f0e9;
  --card: rgba(24, 43, 57, 0.74);
  --card-foreground: #f4f0e9;
  --popover: rgba(18, 33, 44, 0.95);
  --popover-foreground: #f4f0e9;
  --muted: rgba(31, 53, 70, 0.5);
  --muted-foreground: rgba(236, 243, 244, 0.52);

  /* Interactive - gold is the accent the landing uses for emphasis */
  --primary: #e5bd83;
  --primary-foreground: #12212c;
  --primary-hover: #d7b780;
  --secondary: rgba(255, 247, 234, 0.07);
  --secondary-foreground: #f4f0e9;
  --secondary-hover: rgba(255, 247, 234, 0.12);

  /* Borders & focus */
  --border: rgba(255, 247, 234, 0.16);
  --border-emphasis: rgba(255, 247, 234, 0.26);
  --input: rgba(255, 247, 234, 0.18);
  --ring: rgba(229, 189, 131, 0.45);

  /* Feedback, warmed to sit in the same palette */
  --success: #7fb094;
  --warning: #e5bd83;
  --error: #d99a92;

  /* Component-specific */
  --banner-bg: rgba(24, 43, 57, 0.62);
  --banner-fg: #f4f0e9;
  --banner-gradient: var(--banner-bg);

  /* Hero gradients */
  --hero-gradient-start: #12212c;
  --hero-gradient-end: #152735;
  --hero-gradient-1: #12212c;
  --hero-gradient-2: #182b39;
  --hero-gradient-3: #1f3648;
  --hero-gradient-4: #e5bd83;

  /* CTA button */
  --footer-gradient: linear-gradient(112deg, #0d1a23 0%, #12212c 58%, #17303f 100%);
  --cta-gradient: linear-gradient(145deg, #e5bd83 0%, #c89a57 100%);

  /* Glass system - kept, re-tinted from slate to navy */
  --glass-bg: rgba(24, 43, 57, 0.58);
  --glass-bg-soft: rgba(31, 53, 70, 0.44);
  --glass-bg-strong: rgba(16, 30, 41, 0.76);
  --glass-border: rgba(255, 247, 234, 0.1);
  --glass-border-strong: rgba(255, 255, 255, 0.18);
  --glass-shadow: 0 36px 96px rgba(0, 0, 0, 0.34);
  --glass-shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.26);
  --glass-inner-highlight: inset 0 1px 0 rgba(255, 247, 234, 0.12);
  --glass-blur: 20px;
  --glass-saturate: 118%;
  --liquid-overlay: linear-gradient(150deg, rgba(255, 247, 234, 0.13) 0%, rgba(255, 247, 234, 0.03) 56%, rgba(229, 189, 131, 0.07) 100%);
  --liquid-specular: radial-gradient(135% 110% at 0% 0%, rgba(255, 247, 234, 0.16) 0%, rgba(255, 247, 234, 0) 56%);

  /* ===== SHARED LAYOUT =====
     Consumed by landing.css, content.css, site-header.css and 404.css. These
     are structural, so they carry over from the old stylesheets unchanged. */
  --space-5: 20px;
  --space-14: 56px;
  --space-20: 80px;
  --space-32: 128px;
  --container-max: 1200px;
  --container-padding: 24px;
  --content-max: 1180px;
  --content-narrow: 760px;
  --site-header-inner-height: 48px;
  --site-header-max-width: 1600px;
  --site-header-padding-x: clamp(16px, 2vw, 24px);
  --landing-header-height: calc(var(--site-header-inner-height, 48px) + 2px);
  --landing-hero-padding-top: var(--space-12);
  --landing-hero-padding-bottom: var(--space-20);

  /* Accents. The content pages used a teal that belonged to no palette; gold
     is the accent across the language now. --content-line and --content-surface
     are derived from --foreground/--background, so they track the palette, but
     they still have to be declared here: they used to live in content.css's own
     :root, which this file replaced. */
  --content-line: color-mix(in oklab, var(--foreground) 14%, transparent);
  --content-surface: color-mix(in oklab, var(--background) 88%, var(--foreground) 12%);
  --accent: #d7b98f;
  --border-soft: rgba(255, 247, 234, 0.12);
  --content-accent: #e5bd83;
  --content-accent-contrast: #12212c;
  --liquid-opacity: 0.9;

  /* Height reserved for the drop placeholder while a result row is dragged.
     Lived in app.css's old :root; still very much in use. */
  --placeholder-height: 56px;
}