/*
 * The Boating Accident: design tokens for the "in-game newspaper" redesign.
 * See .design/site-redesign/DESIGN_BRIEF.md.
 *
 * Two editions: the paper edition (default) and the night edition
 * (prefers-color-scheme: dark, or data-theme="dark"). Every text/background
 * pair below meets WCAG AA (4.5:1) in both; ratios are noted beside the values.
 * Components reference semantic tokens only, never the raw palette.
 */

:root {
  color-scheme: light dark;

  /* Raw palette: muted 16-bit. Sprites use --px-*; nothing else should. */
  --px-ink: #141a28;
  --px-navy: #24304a;
  --px-slate: #56637c;
  --px-steel: #8d98ab;
  --px-bone: #ebe3cf;
  --px-red: #c4453b;
  --px-coin: #e0a33a;
  --px-sea: #3c6e8c;
  --px-foam: #7fa9a6;
  --px-star: #f2d27a;
  /* Sprite outlines (masts, hull edges). Themed so they don't vanish on navy;
     interior darks like the skull's eyes stay --px-ink. */
  --px-outline: #141a28;

  /* Desk: the dithered surface the sheet sits on */
  --color-desk: #1d2536;
  --color-desk-dither: #222b3e;
  --color-desk-shadow: #0c111c;
  --color-sheet-edge: transparent;    /* drawn inside the sheet; night needs it */

  /* Backgrounds */
  --color-bg-primary: #ebe3cf;        /* the sheet */
  --color-bg-secondary: #e0d7c0;      /* sources box, wells */
  --color-bg-tertiary: #d6ccb2;       /* hover on wells */
  --color-bg-inverse: #141a28;        /* tally box, facts box, active nav */

  /* Text on the sheet */
  --color-text-primary: #141a28;      /* 13.6 on primary, 12.1 on secondary */
  --color-text-secondary: #4f5b73;    /* 5.3 / 4.8 */
  --color-text-tertiary: #4f5b73;     /* same as secondary: captions stay readable */
  --color-text-link: #2b5875;         /* 6.0 / 5.3 */
  --color-text-loss: #a8352c;         /* amounts, kickers: 5.1 / 4.6 */

  /* Text on inverse boxes */
  --color-text-inverse: #ebe3cf;      /* 13.6 */
  --color-text-inverse-muted: #a3adbf;/* 7.7 */
  --color-text-inverse-loss: #e0675c; /* 5.2 */
  --color-text-inverse-coin: #e0a33a; /* 7.8: the running total */

  /* Rules and borders */
  --color-border-primary: #141a28;    /* column rules, masthead rules */
  --color-border-secondary: #b8ad92;  /* dashed brief separators (decorative) */
  --color-border-focus: #a35c00;      /* 4.0 on sheet, 3.6 on wells (UI needs 3:1) */
  --color-border-focus-inverse: #e0a33a;

  /* Accents */
  --color-accent-primary: #141a28;    /* buttons and active section are ink blocks */
  --color-accent-primary-hover: #24304a;
  --color-accent-primary-active: #000000;
  --color-accent-secondary: #2b5875;

  /* Status: stamps */
  --color-status-error: #a8352c;      /* TOTAL LOSS */
  --color-status-warning: #a35c00;    /* NEAR MISS */
  --color-status-success: #2a6247;    /* RECOVERED: 5.6 on sheet, 5.0 on wells */
  --color-status-info: #2b5875;

  /* Outcome stamps: chips, the lead's bar, and the facts box banner. Filled
     with the outcome's color, lettered in --color-outcome-text (the sheet).
     Ratios are text on fill. Warning is darker than the status color, which
     is only 4.0 against the sheet. */
  --color-outcome-text: #ebe3cf;
  --color-outcome-loss: #a8352c;      /* 5.1 */
  --color-outcome-warning: #8a4e00;   /* 5.2 */
  --color-outcome-success: #2a6247;   /* 5.6 */
  --color-outcome-info: #2b5875;      /* 6.0 */
  --color-outcome-muted: #4f5b73;     /* 5.3 */

  /* Stats bars: graphics need 3:1. 5.1 on sheet. */
  --color-bar: #a8352c;

  --color-surface-overlay: rgb(12 17 28 / 0.6);

  /* Spacing: 4px base, the pixel grid */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 96px;
  --space-12: 128px;

  /* Typography. Self-hosted, all OFL. */
  --font-family-display: "Pixelify Sans", ui-monospace, monospace;
  --font-family-label: "Silkscreen", ui-monospace, monospace;
  --font-family-body: "IBM Plex Serif", Georgia, serif;
  --font-family-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* 12px floor: nothing renders smaller, labels included. */
  --font-size-xs: 0.75rem;    /* 12: Silkscreen labels, kickers, datelines */
  --font-size-sm: 0.875rem;   /* 14: sources, briefs */
  --font-size-base: 1rem;     /* 16: column body */
  --font-size-md: 1.125rem;   /* 18: article body */
  --font-size-lg: 1.25rem;    /* 20: deck */
  --font-size-xl: 1.5rem;     /* 24: column headline */
  --font-size-2xl: 2rem;      /* 32: mobile lead, tally on mobile */
  --font-size-3xl: 2.75rem;   /* 44: lead headline, tally */
  --font-size-4xl: 4.5rem;    /* 72: masthead */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.05;  /* pixel headlines */
  --line-height-normal: 1.5;  /* column body */
  --line-height-relaxed: 1.65;/* article body */

  --letter-spacing-tight: 0;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.04em; /* masthead */

  /* Layout */
  --max-width-content: 40rem;  /* article body measure */
  --max-width-wide: 52rem;
  --max-width-page: 65rem;     /* the sheet: 1040px */
  --sidebar-width: 18.75rem;   /* 300px facts/briefs column */
  --column-count: 3;
  --column-gap: 28px;

  /* Pixel geometry: no rounding anywhere. */
  --border-radius-sm: 0;
  --border-radius-md: 0;
  --border-radius-lg: 0;
  --border-radius-full: 0;
  --border-width-hair: 1px;
  --border-width-rule: 2px;
  --border-width-heavy: 4px;
  --notch: 4px;                /* stepped corner size for frames */

  /* Hard, unblurred pixel shadows */
  --shadow-sm: 2px 2px 0 var(--color-desk-shadow);
  --shadow-md: 4px 4px 0 var(--color-desk-shadow);
  --shadow-lg: 8px 8px 0 var(--color-desk-shadow);
  --shadow-focus: 0 0 0 3px var(--color-border-focus);

  /* Sprites scale by whole numbers only. */
  --sprite-icon: 24px;         /* 12×12 at 2× */
  --sprite-icon-sm: 18px;      /* 12×12 at 1.5×: inline in labels */
  --sprite-logo: 80px;         /* 16×12 at 5× */

  /* Motion: stepped, like sprite frames. Disabled under reduced motion. */
  --duration-instant: 50ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;
  --easing-default: steps(4, end);
  --easing-in: steps(3, start);
  --easing-out: steps(3, end);
  --easing-bounce: steps(2, jump-none); /* bobbing life ring */

  /*
   * Breakpoints (custom properties can't be used inside @media; reference only):
   *   < 720px   one column, paper goes full-bleed, desk hidden
   *   720–959   lead full width, sidebar below, 2 columns
   *   >= 960    lead + sidebar, 3 columns
   */
}

/* Night edition: a navy sheet with bone ink on a near-black desk. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-desk: #0b101b;
    --color-desk-dither: #10172a;
    --color-desk-shadow: #000000;
    --color-sheet-edge: #3d4a66;
    --px-outline: #8d98ab;

    --color-bg-primary: #1c2538;
    --color-bg-secondary: #263149;
    --color-bg-tertiary: #2e3a55;
    --color-bg-inverse: #0d1320;

    --color-text-primary: #e6dcc4;      /* 11.2 / 9.5 */
    --color-text-secondary: #a3adbf;    /* 6.8 / 5.7 */
    --color-text-tertiary: #a3adbf;
    --color-text-link: #8fc0dc;         /* 7.8 / 6.6 */
    --color-text-loss: #f07f71;         /* 5.8 / 4.9 */

    --color-text-inverse: #e6dcc4;      /* 13.6 */
    --color-text-inverse-muted: #a3adbf;/* 8.2 */
    --color-text-inverse-loss: #f07f71; /* 7.1 */
    --color-text-inverse-coin: #e8a93c; /* 9.0 */

    --color-border-primary: #e6dcc4;
    --color-border-secondary: #3d4a66;
    --color-border-focus: #e8a93c;      /* 7.4 / 6.3 */
    --color-border-focus-inverse: #e8a93c;

    --color-accent-primary: #e6dcc4;
    --color-accent-primary-hover: #f3ecdb;
    --color-accent-primary-active: #ffffff;
    --color-accent-secondary: #8fc0dc;

    --color-status-error: #f07f71;
    --color-status-warning: #e8a93c;
    --color-status-success: #7fc4a0;
    --color-status-info: #8fc0dc;

    --color-outcome-text: #1c2538;
    --color-outcome-loss: #f07f71;      /* 5.8 */
    --color-outcome-warning: #e8a93c;   /* 7.4 */
    --color-outcome-success: #7fc4a0;   /* 7.5 */
    --color-outcome-info: #8fc0dc;      /* 7.8 */
    --color-outcome-muted: #a3adbf;     /* 6.8 */

    --color-bar: #f07f71;               /* 5.8 */

    --color-surface-overlay: rgb(0 0 0 / 0.7);
  }
}

[data-theme="dark"] {
  --color-desk: #0b101b;
  --color-desk-dither: #10172a;
  --color-desk-shadow: #000000;
  --color-sheet-edge: #3d4a66;
  --px-outline: #8d98ab;

  --color-bg-primary: #1c2538;
  --color-bg-secondary: #263149;
  --color-bg-tertiary: #2e3a55;
  --color-bg-inverse: #0d1320;

  --color-text-primary: #e6dcc4;
  --color-text-secondary: #a3adbf;
  --color-text-tertiary: #a3adbf;
  --color-text-link: #8fc0dc;
  --color-text-loss: #f07f71;

  --color-text-inverse: #e6dcc4;
  --color-text-inverse-muted: #a3adbf;
  --color-text-inverse-loss: #f07f71;
  --color-text-inverse-coin: #e8a93c;

  --color-border-primary: #e6dcc4;
  --color-border-secondary: #3d4a66;
  --color-border-focus: #e8a93c;
  --color-border-focus-inverse: #e8a93c;

  --color-accent-primary: #e6dcc4;
  --color-accent-primary-hover: #f3ecdb;
  --color-accent-primary-active: #ffffff;
  --color-accent-secondary: #8fc0dc;

  --color-status-error: #f07f71;
  --color-status-warning: #e8a93c;
  --color-status-success: #7fc4a0;
  --color-status-info: #8fc0dc;

  --color-outcome-text: #1c2538;
  --color-outcome-loss: #f07f71;
  --color-outcome-warning: #e8a93c;
  --color-outcome-success: #7fc4a0;
  --color-outcome-info: #8fc0dc;
  --color-outcome-muted: #a3adbf;

  --color-bar: #f07f71;

  --color-surface-overlay: rgb(0 0 0 / 0.7);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
  }
}