/* Goshboard design tokens. Keep this file free of class-like text: lint scans it. */

:root {
  /* Surfaces */
  --surface-page: #0b111a;
  --surface-card: rgb(18 24 34 / .8);
  --surface-raised: #1a2230;
  --surface-sunken: #121822;
  --surface-inset: rgb(0 0 0 / .15);
  --surface-overlay: rgb(15 23 42 / .95);
  --surface-header: rgb(11 17 26 / .65);
  --surface-chip: rgb(255 255 255 / .05);
  --surface-chip-hover: rgb(255 255 255 / .1);
  --surface-row: rgb(15 23 42 / .4);
  --surface-row-hover: rgb(15 23 42 / .6);
  --surface-command: rgb(15 23 42 / .4);
  --surface-bar: rgb(11 17 26 / .92);
  --backdrop-blur: 12px;

  /* Text */
  --text-primary: #f8fafc;
  --text-secondary: #a3b1c6;
  --text-faint: #8b9bb4;
  --header-text: #f8fafc;
  --header-text-muted: #a3b1c6;
  --header-accent: #22d3ee;
  --header-rule: 1px solid rgb(34 211 238 / .2);
  --overlay-text: #f8fafc;

  /* Accent: use rgb(var(--accent-rgb) / .2) for tints */
  --accent: #22d3ee;
  --accent-rgb: 34 211 238;
  --accent-2: #38bdf8;
  --accent-deep: #0ea5e9;
  --on-accent: #04222a;
  --focus-ring: #22d3ee;
  /* The page accent, kept for overlays inside the header, which swaps --accent for --header-accent. */
  --page-accent: var(--accent);
  --gradient-primary: linear-gradient(135deg, var(--accent-deep), var(--accent));
  --gradient-secondary: linear-gradient(135deg, var(--accent), var(--accent-2));

  /* Borders */
  --border-subtle: rgb(34 211 238 / .15);
  --border-strong: rgb(34 211 238 / .5);
  --border-card: 1px solid var(--border-subtle);

  /* Status */
  --danger: #f87171;
  --danger-rgb: 248 113 113;
  --success: #34d399;
  /* Steam presence: the avatar dot and the now-playing chip */
  --status-online: #34d399;
  --status-away: #fbbf24;
  --status-busy: #f87171;
  --status-offline: #8b9bb4;
  --status-ingame: #4ade80;
  --status-ingame-rgb: 74 222 128;
  --meta-high-bg: #4ade80;   --meta-high-fg: #064e3b;
  --meta-mixed-bg: #facc15;  --meta-mixed-fg: #422006;
  --meta-low-bg: #f87171;    --meta-low-fg: #450a0a;

  /* Rarity tiers (Rarity in app/models): chips, jewels, table and doughnut. Each is AA as text on
     cards in its theme. Netrunner: amber ultra, then a green lightness ramp. */
  --rarity-ultra: #fbbf24;
  --rarity-very-rare: #fb923c;
  --rarity-rare: #c084fc;
  --rarity-uncommon: #22d3ee;
  --rarity-common: #94a3b8;
  --rarity-unknown: #78869c;

  /* Fixed whatever the theme: the theme menu swatches, and text on a dark scrim over cover art */
  --swatch-default: #22d3ee;
  --swatch-beige: #d2b48c;
  --swatch-hacker: #0f0;
  --swatch-ink: #000;
  --on-art: #fff;
  --on-art-muted: #d5dde8;

  /* Charts */
  --chart-1: #22d3ee;
  --chart-2: #a855f7;
  --chart-3: #fbbf24;
  --chart-4: #f87171;
  --chart-axis: #a3b1c6;
  --chart-grid: rgb(255 255 255 / .06);
  --chart-tooltip-bg: rgb(15 23 42 / .95);
  --chart-tooltip-fg: #f8fafc;
  /* How a line chart is drawn (see chart_theme in the controllers): area, stepped or ink, and its glow in px. */
  --chart-line: area;
  --chart-glow: 10;
  --heat-0: #1a2433;
  --heat-1: #0c5a82;
  --heat-2: #0284c7;
  --heat-3: #38bdf8;
  --heat-4: #bae6fd;
  --heat-outline: rgb(255 255 255 / .06);

  /* Heading treatment */
  --heading-fill: linear-gradient(90deg, #0ea5e9, #22d3ee, #38bdf8);
  --heading-glow: drop-shadow(0 0 12px rgb(34 211 238 / .4));
  --logo-fill: linear-gradient(90deg, #0ea5e9, #22d3ee, #38bdf8);
  --logo-glow: rgb(14 165 233 / .45);

  /* Diamond motif */
  --diamond-fill: var(--surface-page);
  --diamond-stroke: var(--accent);
  --diamond-stroke-w: 2px;
  --diamond-glow: 0 0 12px rgb(34 211 238 / .5), inset 0 0 6px rgb(34 211 238 / .25);
  --diamond-glow-strong: 0 0 25px rgb(34 211 238 / .7), inset 0 0 15px rgb(34 211 238 / .4);
  --diamond-sm: 14px;
  --diamond-lg: 40px;

  /* Elevation */
  --shadow-card: 0 8px 32px rgb(0 0 0 / .4);
  --shadow-pop: 0 10px 25px rgb(0 0 0 / .5);
  --shadow-header: 0 5px 25px rgb(0 0 0 / .5);
  --shadow-glow: 0 0 20px rgb(34 211 238 / .15);
  --glow-text: 0 0 10px rgb(34 211 238 / .3);
  --danger-glow: 0 0 10px rgb(var(--danger-rgb) / .1);
  --danger-glow-strong: 0 0 20px rgb(var(--danger-rgb) / .2);

  /* Type families */
  --font-display: 'Orbitron', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Rajdhani', ui-sans-serif, system-ui, sans-serif;
  --font-data: 'Rajdhani', ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;

  /* Type scale (rem) */
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --leading-tight: 1.2;
  --tracking-label: .06em;

  /* Spacing, 4px base */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* Page layout: one gutter between cards and between page sections, one padding inside a card,
     one width for every page's content. */
  --layout-gutter: var(--space-6);
  --card-pad: var(--space-8);
  --content-max: 1350px;

  /* Shape */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Motion */
  --dur-fast: .15s;

  /* Header bar: one control height and radius for everything in it */
  --bar-h: 56px;
  --bar-h-phone: 48px;
  --tabbar-h: 56px;
  --ctl-h: 36px;
  --ctl-radius: var(--radius-md);

  /* Layers */
  --z-raised: 10;
  --z-header: 1000;
  --z-overlay: 2000;

  /* Modals: one skin per theme. Sheets from the bottom on phones. */
  --modal-w-sm: 28rem;
  --modal-w-md: 46rem;
  --modal-w-lg: 75rem;
  --modal-pad: var(--space-6);
  --modal-radius: 16px;
  --modal-surface: rgb(13 19 31 / .97);
  --modal-header-surface: rgb(var(--accent-rgb) / .04);
  --modal-border: 1px solid var(--border-strong);
  --modal-shadow: 0 24px 60px rgb(0 0 0 / .55), 0 0 24px rgb(34 211 238 / .12);
  --modal-scrim: rgb(2 6 23 / .72);
  --modal-scrim-blur: 6px;
  --modal-title-color: var(--accent);
  --modal-title-prefix: "";
  --modal-enter: 220ms cubic-bezier(.16, 1, .3, 1);
}

/* Retro Desk: manila, ink, hard edges, no glow */
:root[data-theme="beige"] {
  /* Score badges in stamp ink, light text on each. The mustard is darker than the design doc's #b07a1e,
     which gave 3.5:1; this one is about 5.6:1. */
  --meta-high-bg: #3f6b3a;   --meta-high-fg: #fdf8ee;
  --meta-mixed-bg: #8a5c12;  --meta-mixed-fg: #fdf8ee;
  --meta-low-bg: #8e2f1f;    --meta-low-fg: #fdf8ee;
  --surface-page: #eae0cc;
  --surface-card: #f4efe2;
  --surface-raised: #fdfaf3;
  --surface-sunken: #e6dcc6;
  --surface-inset: #e6dcc6;
  --surface-overlay: #fdfaf3;
  --surface-header: #4a3728;
  --surface-chip: rgb(74 55 40 / .06);
  --surface-chip-hover: rgb(74 55 40 / .12);
  --surface-row: #fdfaf3;
  --surface-row-hover: #f4efe2;
  --surface-command: rgb(0 0 0 / .2);
  --surface-bar: #4a3728;
  --backdrop-blur: 0;

  --text-primary: #3e3222;
  --text-secondary: #6a5436;
  --text-faint: #7a5f3e;
  --header-text: #f4efe2;
  --header-text-muted: #d1c1a9;
  --header-accent: #f4efe2;
  --header-rule: 3px double #f4efe2;
  --overlay-text: #3e3222;

  --accent: #8b4513;
  --accent-rgb: 139 69 19;
  --accent-2: #9a4a25;
  --accent-deep: #a0522d;
  --on-accent: #f4efe2;
  --focus-ring: #8b4513;

  --border-subtle: #c9bca7;
  --border-strong: #4a3728;
  --border-card: 2px solid #4a3728;

  --danger: #a3281e;
  --danger-rgb: 163 40 30;
  --success: #47602a;
  /* Lit on the dark brown bar, ringed in it */
  --status-online: #9fcb6b;
  --status-away: #e8b94f;
  --status-busy: #ef8a6f;
  --status-offline: #b8a58a;
  --status-ingame: #9fcb6b;
  --status-ingame-rgb: 159 203 107;

  --rarity-ultra: #7d5610;
  --rarity-very-rare: #8f2d22;
  --rarity-rare: #2f4f86;
  --rarity-uncommon: #47602a;
  --rarity-common: #6a5436;
  --rarity-unknown: #665a4a;

  --chart-1: #8b4513;
  --chart-2: #47602a;
  --chart-3: #a3741c;
  --chart-4: #7a2e2e;
  --chart-axis: #4a3728;
  --chart-grid: rgb(74 55 40 / .15);
  --chart-tooltip-bg: #4a3728;
  --chart-tooltip-fg: #f4efe2;
  --chart-line: ink;
  --chart-glow: 0;
  /* heat-0 sits a clear step below the paper card (#f4efe2) so empty days stay visible. */
  --heat-0: #ddd1b8;
  --heat-1: #d9b98a;
  --heat-2: #b98545;
  --heat-3: #8b4513;
  --heat-4: #4a2508;
  --heat-outline: rgb(74 55 40 / .35);

  --heading-fill: linear-gradient(90deg, #4a3728, #4a3728);
  --heading-glow: none;
  --logo-fill: linear-gradient(90deg, #f4efe2, #f4efe2);
  --logo-glow: transparent;

  --diamond-fill: #eae0cc;
  --diamond-stroke: #4a3728;
  --diamond-glow: none;
  --diamond-glow-strong: none;

  --shadow-card: 0 1px 2px rgb(74 55 40 / .10), 0 3px 8px rgb(74 55 40 / .08);
  --shadow-pop: 0 1px 3px rgb(74 55 40 / .12);
  --shadow-header: none;
  --shadow-glow: none;
  --glow-text: none;
  /* The danger tile keeps the paper shadow every card has. */
  --danger-glow: var(--shadow-card);
  --danger-glow-strong: var(--shadow-card);

  --font-display: 'Courier New', Courier, var(--font-mono);
  --font-body: 'Courier New', Courier, var(--font-mono);
  --font-data: 'Courier New', Courier, var(--font-mono);

  --radius-xs: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;

  --modal-radius: 0;
  --modal-surface: #fdfaf3;
  --modal-header-surface: #e6dcc6;
  --modal-border: 2px solid #4a3728;
  --modal-shadow: var(--shadow-pop);
  --modal-scrim: rgb(74 55 40 / .45);
  --modal-scrim-blur: 0px;
  --modal-title-color: #3e3222;

  /* Desk props that only Retro Desk draws: the brass nameplate logo, the typewriter ribbon under the
     active tab, the Co-op clipboard with pinned polaroids, index-card rows, bevelled buttons, the
     timesheet punch holes and the rubber stamps */
  --nameplate-brass: linear-gradient(#dcbd78, #b08c45 55%, #9c7a37);
  --nameplate-rivet: #6e5427;
  --nameplate-edge: #5c4520;
  --nameplate-ink: #2b1d12;
  --nameplate-diamond: #c9a65a;
  --ribbon: linear-gradient(#1f1a14 0 50%, #c8402c 50%);
  --clipboard-board: #a87b4f;
  --clipboard-lines: rgb(140 98 57 / .18);
  --clipboard-clip: linear-gradient(#d9d9d9, #9a9a9a);
  --clipboard-pin: #b5452e;
  --polaroid: #fff;
  --index-margin: #b5523b;
  --bevel-light: #fff;
  --bevel-dark: #8c6239;
  --punch-ring: #a08060;
  --punch-hole: #4a3426;
  --stamp-red: #8e2f1f;
  --stamp-green: #3f6b3a;
  --scrim-paper: rgb(245 238 225 / .75);
  /* A soft paper shadow for loose props on the desk (box-shadow is reserved for cards in this theme) */
  --paper-drop: drop-shadow(0 1px 1px rgb(74 55 40 / .16)) drop-shadow(0 3px 6px rgb(74 55 40 / .1));
  --cabinet-front: linear-gradient(#b9b2a3, #a29a89);
  --cabinet-edge: #6f6656;

  /* The locked Pile of Shame case file */
  --folder-front: #e3c98f;
  --folder-back: #d4b678;
  --folder-edge: #a5864f;
  --folder-rule: rgb(74 55 40 / .2);
  --clip-metal: #737b86;
  --clip-shine: #eef2f6;
  --clip-shade: rgb(40 44 52 / .35);
}

/* Netrunner: black, phosphor, text and accent separated so hierarchy returns */
:root[data-theme="hacker"] {
  /* Score badges as outlines: the colour is the text and, in the backlog, the border */
  --meta-high-bg: transparent;   --meta-high-fg: #39ff14;
  --meta-mixed-bg: transparent;  --meta-mixed-fg: #e5ff4f;
  --meta-low-bg: transparent;    --meta-low-fg: #ff5f56;
  --surface-page: #000;
  --surface-card: #000;
  --surface-raised: #051005;
  --surface-sunken: #050505;
  --surface-inset: #030803;
  --surface-overlay: #000;
  --surface-header: #000;
  --surface-chip: rgb(0 255 0 / .06);
  --surface-chip-hover: rgb(0 255 0 / .14);
  --surface-row: #051005;
  --surface-row-hover: #0a1f0a;
  --surface-command: #000;
  --surface-bar: #000;
  --backdrop-blur: 0;

  --text-primary: #c8ffc8;
  --text-secondary: #4fd14f;
  --text-faint: #2fb52f;
  --header-text: #c8ffc8;
  --header-text-muted: #4fd14f;
  --header-accent: #0f0;
  --header-rule: 1px solid #0f0;
  --overlay-text: #c8ffc8;

  --accent: #0f0;
  --accent-rgb: 0 255 0;
  --accent-2: #00d000;
  --accent-deep: #00aa00;
  --on-accent: #000;
  --focus-ring: #0f0;

  --border-subtle: rgb(0 255 0 / .3);
  --border-strong: rgb(0 255 0 / .7);
  --border-card: 1px solid #0f0;

  --danger: #ff5c5c;
  --danger-rgb: 255 92 92;
  --success: #0f0;
  --status-online: #0f0;
  --status-away: #e6ff00;
  --status-busy: #ff5c5c;
  --status-offline: #2fb52f;
  --status-ingame: #0f0;
  --status-ingame-rgb: 0 255 0;

  --rarity-ultra: #ffd84a;
  --rarity-very-rare: #e0ffe0;
  --rarity-rare: #8dff8d;
  --rarity-uncommon: #00d000;
  --rarity-common: #3fa83f;
  --rarity-unknown: #7a9a7a;

  --chart-1: #0f0;
  --chart-2: #c8ffc8;
  --chart-3: #00a800;
  --chart-4: #e6ff00;
  --chart-axis: #4fd14f;
  --chart-grid: rgb(0 255 0 / .2);
  --chart-tooltip-bg: #000;
  --chart-tooltip-fg: #0f0;
  --chart-line: stepped;
  --chart-glow: 6;
  --heat-0: #071207;
  --heat-1: #0a4d0a;
  --heat-2: #0a8a0a;
  --heat-3: #00d000;
  --heat-4: #7dff7d;
  --heat-outline: rgb(0 255 0 / .15);

  --heading-fill: linear-gradient(90deg, #0f0, #0f0);
  --heading-glow: drop-shadow(0 0 5px #0f0);
  --logo-fill: linear-gradient(90deg, #0f0, #0f0);
  --logo-glow: rgb(0 255 0 / .2);

  --diamond-fill: #000;
  --diamond-stroke: #0f0;
  --diamond-glow: 0 0 8px rgb(0 255 0 / .6);
  --diamond-glow-strong: 0 0 18px rgb(0 255 0 / .9);

  --shadow-card: 0 0 5px rgb(0 255 0 / .8);
  --shadow-pop: 0 0 10px rgb(0 255 0 / .5);
  --shadow-header: 0 0 10px #0f0;
  --shadow-glow: 0 0 20px rgb(0 255 0 / .3);
  --glow-text: 0 0 8px rgb(0 255 0 / .5);

  --font-display: var(--font-mono);
  --font-body: var(--font-mono);
  --font-data: var(--font-mono);

  --modal-radius: 0;
  --modal-surface: #000;
  --modal-header-surface: #031003;
  --modal-border: 1px solid #0f0;
  --modal-shadow: 0 0 14px rgb(0 255 0 / .25);
  --modal-scrim: rgb(0 0 0 / .85);
  --modal-scrim-blur: 0px;
  --modal-title-prefix: "> ";
}

/* Everything that moves, the header signatures included, stops here. Purely decorative loops (the
   now-playing pulse, the Netrunner cursor) are also declared under prefers-reduced-motion: no-preference. */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}