/* Stagger Digital Motorsports, design tokens.
 *
 * This file defines values only. It contains no selectors that style real
 * elements, no layout, no components. Everything else in the site consumes
 * these custom properties and never hard codes a colour or a size.
 *
 * DENSITY IS THE POINT. This is a forum, not a landing page. The reference is
 * Stunod: small type, tight rows, a lot of real content above the fold. Body
 * text is 13px. If something here starts growing, that is the bug.
 *
 * Dark theme tokens on :root. The site is dark-only for now.
 *
 * The brand is monochrome. Racing red is punctuation: links, active state and
 * primary buttons. It is not a paint colour, do not fill panels with it.
 */

:root,
[data-theme="dark"] {
  /* Charcoal, the way a racing forum should look at 11pm. */
  --bg: #111316;
  --surface: #191c20;
  --surface-raised: #1f2328;
  --surface-sunken: #0d0f11;
  --surface-hover: #23272d;
  --text: #e6e8ea;
  --muted: #949ba2;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --overlay: rgba(0, 0, 0, 0.72);

  /* The strip of colour that separates a category header from a row. */
  --header-bar: #0b0d0f;

  /* Text and hit states that sit ON the bar above. These exist because the bar
   * is dark in one theme and light in the other, so anything drawn on it has to
   * flip too. Nothing may hard code a colour on top of --header-bar. */
  --bar-text: #e6e8ea;
  --bar-muted: #9aa1a8;
  --bar-strong: #ffffff;
  --bar-hover: rgba(255, 255, 255, 0.07);
  --bar-border: rgba(255, 255, 255, 0.12);

  --accent: #e10600;
  --accent-hover: #ff1a12;
  --accent-text: #ff5147;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(225, 6, 0, 0.16);

  /* The rounded control that carries a count: vote, replies, views. It needs a
   * surface of its own in both themes, so it cannot be built from --surface. */
  --pill-bg: #23272d;
  --pill-hover: #2d323a;

  /* A held downvote. Deliberately not the danger colour: disagreeing with a
   * post is not an error state. */
  --vote-down: #6ea8fe;

  --danger: #ff6b6b;
  --danger-soft: rgba(255, 107, 107, 0.14);
  --success: #4ade80;
  --success-soft: rgba(74, 222, 128, 0.14);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, 0.14);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.65);

  --brand-mark: url("/assets/brand/stagger-flag-white-web.png");
  --brand-lockup: url("/assets/brand/stagger-primary-white-web.png");

  color-scheme: dark;
}

/* Values that do not change between themes. */
:root {
  /* Type. 13px body, and the largest thing on the site is 24px. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --text-xs: 0.6875rem;
  --text-sm: 0.75rem;
  --text-base: 0.8125rem;
  --text-md: 0.875rem;
  --text-lg: 0.9375rem;
  --text-xl: 1.0625rem;
  --text-2xl: 1.25rem;
  --text-3xl: 1.5rem;
  --text-4xl: 1.75rem;

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

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-widest: 0.16em;

  /* Space. Tight on purpose. */
  --space-1: 0.25rem;
  --space-2: 0.375rem;
  --space-3: 0.5rem;
  --space-4: 0.75rem;
  --space-5: 1rem;
  --space-6: 1.25rem;
  --space-8: 1.5rem;
  --space-10: 2rem;
  --space-12: 2.5rem;
  --space-16: 3rem;
  --space-20: 3.5rem;

  /* Radii. Nearly square, the way forum software looks. */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-pill: 999px;

  /* Layout */
  --page-max: 1200px;
  --content-max: 52rem;
  --header-height: 44px;
  --subnav-height: 34px;
  --sidebar-width: 15rem;

  /* The Reddit style vote gutter, sized once so every row lines up. */
  --vote-width: 2.5rem;

  /* Controls */
  --control-height: 2rem;
  --control-height-sm: 1.75rem;
  --control-height-lg: 2.25rem;

  /* Focus, 2px ring plus a 2px offset gap so it reads on any surface */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --duration-fast: 100ms;
  --duration-base: 160ms;
  --duration-slow: 260ms;

  /* Stacking */
  --z-base: 0;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
}