/* ==========================================================================
   Design tokens — single source of truth for the forum's visual language.

   Every color/font/size/space/border used anywhere in the app resolves to a
   token defined here. Legacy CSS, component CSS, and Tailwind utilities all
   reference these vars, so the retro 4hv palette lives in exactly one place.

   Values are the exact hex/px the visual style was tuned to — changing a token
   changes every consumer, but never silently shifts the look.

   Naming:
     --surface-*  background fills          --text-*    foreground text
     --border-*   borders / rules           --link*     anchors
     --font-*     font stacks               --text-N    font sizes (px)
     --space-N    spacing scale             --radius-*  corner radii
     --shadow-*   elevation                 feedback: --{info,success,warn,danger}-*
   ========================================================================== */

:root {
  /* ---- Base palette (raw, referenced by semantic tokens below) ---- */
  --black: #000000;
  --white: #ffffff;

  /* ---- Surfaces ---- */
  --surface-body: #e7e7e7; /* page background */
  --surface-card: #dae7f3; /* card fill */
  --surface-1: #e4eaf2; /* primary content panel */
  --surface-2: #eef2f7; /* secondary panel / rows / user card */
  --surface-3: #d1dceb; /* tertiary / emphasized panel */
  --surface-alt: #dfe6ef; /* alternate row / lighter header */
  --surface-accent: #bcd0ed; /* accented panel */
  --surface-control: #eaeef2; /* buttons, inputs, nextprev */
  /* Beveled button fill — CSS replacement for the fixed-height button.png gradient. */
  --gradient-button: linear-gradient(to bottom, #fdfdfd 0%, #f5f5f5 30%, #ededed 60%, #e8e8e8 90%, #b9b9b9 100%);
  --surface-quote: #e3e2d7; /* quoted / indented content */
  --surface-caption: #e1dfdf; /* legacy caption bar */
  --surface-caption-alt: #d5d5d5; /* legacy caption bar (light) */
  --surface-header-info: #dbe5f5; /* forum info bar */
  --surface-news-meta: #c8ddee; /* news attribution strip */

  /* ---- Text ---- */
  --text-body: #373737; /* default body text */
  --text-strong: #000000; /* emphasized text */
  --text-muted: #5d6e75; /* secondary / small print */
  --text-soft: #404040; /* softened body */
  --text-accent: #000060; /* dark-blue accents (quotes) */
  --text-accent-strong: #000040; /* code / strong accent */
  --text-slate: #263448; /* slate headings */
  --text-slate-soft: #3a4f6c; /* soft slate */
  --text-on-dark: #ffffff; /* text on dark bars */

  /* ---- Links ---- */
  --link: #716d6d;
  --link-hover: #2a3236;
  --link-on-caption: #ffffcc;
  --link-on-caption-hover: #cccc99;

  /* ---- Borders ---- */
  --border-strong: #000000;
  --border-light: #ffffff; /* inset highlight edge */
  --border-muted: #c3bdbd; /* warm grey (forum headers) */
  --border-accent: #345487; /* blue rule */
  --border-accent-dark: #000080; /* forum border */
  --border-control: #696c6c; /* buttons / inputs */
  --border-subtle: #d5d5d5;
  --border-code: #9f9f9f;

  /* ---- Feedback (Bootstrap-3 derived; kept for continuity) ---- */
  --info-fg: #31708f;
  --info-bg: #d9edf7;
  --info-border: #bce8f1;

  --success-fg: #3c763d;
  --success-bg: #dff0d8;
  --success-border: #d6e9c6;

  --warn-fg: #8a6d3b;
  --warn-bg: #fcf8e3;
  --warn-border: #faebcc;

  --danger-fg: #a94442;
  --danger-bg: #f2dede;
  --danger-border: #ebccd1;

  /* ---- Font families ---- */
  --font-ui:
    verdana, tahoma, arial, helvetica, sans-serif; /* primary UI face */
  --font-caption:
    tahoma, arial, verdana, helvetica, sans-serif; /* caption bars */
  --font-code:
    courier, "Courier New", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;
  --font-system:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

  /* ---- Font sizes (px) ----
     2xs–2xl: retro forum chrome — exact sizing the legacy layout depends on.
     3xl–6xl: heading tiers for the modern/general pages (wiki, admin, static).
     Which size maps to which text *role* is defined in typography.css. */
  --text-2xs: 9px;
  --text-xs: 10px;
  --text-sm: 11px;
  --text-base: 12px;
  --text-md: 13px;
  --text-lg: 14px;
  --text-xl: 15px;
  --text-2xl: 16px;
  --text-3xl: 18px;
  --text-4xl: 20px;
  --text-5xl: 24px;
  --text-6xl: 60px;

  /* ---- Font weights ---- */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Line heights ---- */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* ---- Spacing scale ---- */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 16px;
  --space-5: 24px;

  /* ---- Controls ---- */
  /* One knob for every button/input/select height. Tweak here. */
  --control-height: 22px;

  /* ---- Radii ---- */
  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 11px;

  /* ---- Shadows ---- */
  --shadow-card:
    #505559 0px 0px 1px 2px, #5a5e62 0px 4px 6px -1px, #8b8d90 0px 1px 0px inset;
  --shadow-image: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-kbd: inset 0 -1px 0 var(--border-muted);

  /* ---- Motion ---- */
  --transition: 0.3s ease-in-out;
  --transition-fast: 0.2s;

  /* ---- Opacity ---- */
  --opacity-disabled: 0.6;

  /* ---- Z-index scale ---- */
  --z-behind: -1;
  --z-mobile-menu: 1001;
}