/* =====================================================================
   Rustwing design tokens (art director, phase 1, 2026-10-28).
   The source of truth is docs/design/art-direction.md; every value here
   is explained there (sections 2 to 4 and 11). Load this file before any
   other stylesheet in src/ui/.

   Naming: --rw-<family>-<role>. Colours are hex; alpha versions use rgba
   of the same hex so a find-and-replace keeps them in step.
   Battlefield colours (shots, pickups, tints) are listed here so the menu
   and the canvas renderer share one set; the renderer must copy them into
   a JS module (it cannot read CSS in Node).
   ===================================================================== */

/* ---------- Fonts (SIL Open Font License 1.1, bundled offline) ----------
   Files come from github.com/google/fonts (see art-direction.md section 3.2):
     ofl/oxanium/Oxanium[wght].ttf        -> assets/fonts/Oxanium-Variable.ttf
     ofl/barlow/Barlow-Regular.ttf        -> assets/fonts/Barlow-Regular.ttf
     ofl/barlow/Barlow-Medium.ttf         -> assets/fonts/Barlow-Medium.ttf
     ofl/barlow/Barlow-SemiBold.ttf       -> assets/fonts/Barlow-SemiBold.ttf
     ofl/sharetechmono/ShareTechMono-Regular.ttf -> assets/fonts/ShareTechMono-Regular.ttf
   plus each family's OFL.txt, saved as assets/fonts/<Family>-OFL.txt. */

@font-face {
  font-family: "Oxanium";
  src: url("../../assets/fonts/Oxanium-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../../assets/fonts/Barlow-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../../assets/fonts/Barlow-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../../assets/fonts/Barlow-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Share Tech Mono";
  src: url("../../assets/fonts/ShareTechMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Surfaces (darkest to lightest) ---------- */
  --rw-void: #05060D;          /* app background, deep space, letterbox */
  --rw-night: #0A0D1A;         /* screen background behind panels */
  --rw-panel: #11162A;         /* panels, sheets, tab bar */
  --rw-panel-2: #192039;       /* cards, selected rows, toasts */
  --rw-panel-3: #222B4B;       /* pressed rows, inputs, disabled button fill */
  --rw-comm-screen: #04141A;   /* inside of the comm-window CRT */
  --rw-line: #2C3760;          /* decorative borders and dividers */
  --rw-line-strong: #5D6DA8;   /* borders that carry meaning (inputs, toggles): 3.6:1 on panel */

  /* ---------- Text ---------- */
  --rw-ink: #EAF0FF;           /* primary text: 12.1:1 or more on every surface */
  --rw-ink-dim: #A7B2D2;       /* secondary text: 6.6:1 or more on every surface */
  --rw-ink-faint: #7D88AD;     /* captions only: 4.6:1 or more on void, night, panel, panel-2; never on panel-3 */
  --rw-ink-dark: #04101A;      /* labels on bright fills (cyan, gold, mint) */
  --rw-comm-ink: #BDF9FF;      /* comm dialogue text on the CRT: 16.2:1 */

  /* ---------- Meaning colours ---------- */
  --rw-cyan: #3FE6FF;          /* YOU: primary action, focus, player shots, identity lights */
  --rw-cyan-press: #22C7E3;    /* primary button pressed */
  --rw-crimson: #FF2E63;       /* HOSTILE: enemy shots, hazards, telegraphs (never text, never decoration) */
  --rw-crimson-ink: #FF6B8B;   /* danger and warning text */
  --rw-danger: #E0164C;        /* armed danger button fill, red-dot badge (white text 4.8:1) */
  --rw-gold: #FFC93C;          /* Galactic Credits, rewards, credit pickups */
  --rw-mint: #5CFFA0;          /* blueprint cores, unlocks, success */
  --rw-magenta: #FF5BD9;       /* menus-only accent: logo glow, swarm speaker tag; never on battlefield objects */

  /* ---------- Rarity tiers: frame and label colour ---------- */
  --rw-r-rusted: #D9773A;
  --rw-r-patched: #9DC95A;
  --rw-r-steel: #6AA8FF;
  --rw-r-chrome: #D6E3F2;
  --rw-r-neon: #C47BFF;
  --rw-r-quantum: #FFE08A;
  --rw-r-quantum-sheen: conic-gradient(from 0deg, #FFE38A, #FFFFFF, #7CF4FF, #C08CFF, #FFE38A);

  /* ---------- Rarity tiers: in-game tint (reactor glow, shield, thruster outer flame) ---------- */
  --rw-glow-rusted: #FF8A3D;
  --rw-glow-patched: #B6E35A;
  --rw-glow-steel: #6FB2FF;
  --rw-glow-chrome: #E6F4FF;
  --rw-glow-neon: #C77BFF;
  --rw-glow-quantum: #FFE38A;

  /* ---------- Battlefield (mirror these in the renderer's palette module) ---------- */
  --rw-shot-enemy: #FF2E63;        /* halo */
  --rw-shot-enemy-core: #FFD9E3;   /* core */
  --rw-shot-player: #3FE6FF;       /* halo */
  --rw-shot-player-core: #E8FFFF;  /* core */
  --rw-pickup-rim: #FFFFFF;
  --rw-telegraph: rgba(255, 46, 99, 0.35);
  --rw-sprite-rim: #070A14;        /* baked outline on every sprite */
  --rw-fx-hot: #FFF4D6;            /* explosion flash */
  --rw-fx-fire: #FFB45C;           /* explosion body */
  --rw-fx-smoke: #3A3F52;          /* explosion smoke, rusted-engine sputter */

  /* ---------- Scrims ---------- */
  --rw-scrim: rgba(5, 6, 13, 0.72);      /* behind modals and the upgrade pick; ink-dim on it is 8.3:1 over a mid-tone painting (title version stamp) */
  --rw-scrim-hud: rgba(5, 6, 13, 0.60);  /* behind HUD text over the battlefield */

  /* ---------- Glows (box-shadow values) ---------- */
  --rw-glow-primary: 0 0 18px rgba(63, 230, 255, 0.35);
  --rw-glow-primary-press: 0 0 8px rgba(63, 230, 255, 0.30);
  --rw-glow-gold: 0 0 16px rgba(255, 201, 60, 0.35);
  /* Rarity card glows. Named --rw-shadow-glow-* because --rw-glow-neon and --rw-glow-quantum above are the
     in-game tint colours render/palette.js mirrors; a second definition would override them (tests/palette.test.mjs). */
  --rw-shadow-glow-neon: 0 0 12px rgba(196, 123, 255, 0.45);
  --rw-shadow-glow-quantum: 0 0 14px rgba(255, 224, 138, 0.50);
  --rw-shadow-panel: 0 8px 24px rgba(0, 0, 0, 0.45);

  /* ---------- Type families ---------- */
  --rw-font-display: "Oxanium", "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rw-font-body: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rw-font-mono: "Share Tech Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* ---------- Type scale (size / line height) ---------- */
  --rw-fs-hero: 40px;    --rw-lh-hero: 44px;     /* Oxanium 800, title and result banners */
  --rw-fs-h1: 28px;      --rw-lh-h1: 32px;       /* Oxanium 700, screen titles, uppercase */
  --rw-fs-h2: 20px;      --rw-lh-h2: 24px;       /* Oxanium 700, section heads */
  --rw-fs-h3: 17px;      --rw-lh-h3: 22px;       /* Oxanium 600, card names, primary button labels */
  --rw-fs-label: 13px;   --rw-lh-label: 16px;    /* Oxanium 600, panel headers, uppercase, tracking 0.12em */
  --rw-fs-tab: 12px;     --rw-lh-tab: 14px;      /* Oxanium 600, tab labels, badge counts (the minimum size) */
  --rw-fs-body-l: 17px;  --rw-lh-body-l: 24px;   /* Barlow 500 */
  --rw-fs-body: 15px;    --rw-lh-body: 22px;     /* Barlow 400 or 500 */
  --rw-fs-small: 13px;   --rw-lh-small: 18px;    /* Barlow 500, captions */
  --rw-fs-mono: 15px;    --rw-lh-mono: 21px;     /* Share Tech Mono, briefing comm text */
  --rw-fs-mono-s: 13px;  --rw-lh-mono-s: 18px;   /* Share Tech Mono, in-flight comm text, HUD labels */
  --rw-fs-hud: 18px;     --rw-lh-hud: 22px;      /* Share Tech Mono, score, timer */
  --rw-track-caps: 0.06em;    /* uppercase Oxanium titles and buttons */
  --rw-track-label: 0.12em;   /* small uppercase labels */

  /* ---------- Spacing (4 px base) ---------- */
  --rw-sp-0: 2px;
  --rw-sp-1: 4px;
  --rw-sp-2: 8px;
  --rw-sp-3: 12px;
  --rw-sp-4: 16px;
  --rw-sp-5: 20px;
  --rw-sp-6: 24px;
  --rw-sp-7: 32px;
  --rw-sp-8: 40px;
  --rw-sp-9: 48px;
  --rw-sp-10: 64px;
  --rw-gutter: 16px;           /* screen side padding */

  /* ---------- Sizes ---------- */
  --rw-tap: 44px;              /* minimum touch target, both width and height */
  --rw-btn-h: 52px;            /* primary button */
  --rw-btn-h-2: 48px;          /* secondary button */
  --rw-chip-h: 36px;           /* currency chip (hit area padded to 44) */
  --rw-tabbar-h: 64px;         /* plus the bottom safe-area inset */
  --rw-tab-hit-h: 56px;        /* each tab's hit box, centred in its cell, so tabs sit 8 apart (ui-screens.md 1.2) */
  --rw-toast-h: 44px;          /* one-line toast */
  --rw-toast-h-2: 66px;        /* two-line toast, the most a toast may hold */
  --rw-badge-dot: 10px;
  --rw-badge-count: 18px;

  /* ---------- Radius and chamfer ---------- */
  --rw-radius-xs: 2px;
  --rw-radius-s: 4px;
  --rw-radius-m: 8px;
  --rw-radius-l: 12px;
  --rw-radius-pill: 999px;
  --rw-cut-s: 6px;             /* 45-degree corner cut: chips, small cards */
  --rw-cut-m: 10px;            /* panels, secondary buttons */
  --rw-cut-l: 14px;            /* primary buttons, upgrade cards, comm window */
  --rw-stroke: 1px;
  --rw-stroke-2: 1.5px;
  --rw-stroke-3: 2px;

  /* ---------- Motion ---------- */
  --rw-dur-press: 70ms;
  --rw-dur-fast: 120ms;
  --rw-dur-base: 180ms;
  --rw-dur-screen: 220ms;
  --rw-dur-slow: 400ms;
  --rw-dur-crt-on: 140ms;
  --rw-dur-toast-hold: 2400ms;
  --rw-xfade-from-opacity: 0.85;  /* a cross-fade's incoming layer starts here, never at 0 (ui-screens.md 1.8) */
  --rw-xfade-from-y: 8px;         /* and 8 px low */
  --rw-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --rw-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --rw-ease-pop: cubic-bezier(0.3, 1.4, 0.5, 1);

  /* ---------- Layers inside #ui (architecture.md 8.3) ---------- */
  --rw-z-hud: 10;
  --rw-z-comm: 20;
  --rw-z-panel: 30;            /* sheets and dock panels */
  --rw-z-modal: 40;            /* the field rig and pause overlays, dialogs */
  --rw-z-toast: 50;            /* above the sheet that caused it; pointer-events: none */
  --rw-z-debug: 60;
  --rw-z-boot: 90;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --rw-dur-screen: 0ms;
    --rw-dur-slow: 120ms;
    --rw-dur-crt-on: 0ms;
  }
}