/* Shared design tokens for the phone app and the wall-screen mode.
   Change styling values here, never in components. */

:root {
  /* Surfaces */
  --bg: #0a0a0a;  /* the page; matches manifest.json and the theme-color meta */
  --surface: #161616;  /* cards, sheets, fields */
  --surface2: #202020;  /* raised controls, pressed rows */
  --border: #2c2c2c;
  --board-backdrop: #050505;  /* behind the board in fullscreen and the outline editor */
  --black: #000;  /* the minimap and the editor loupe behind the board photo */
  --white: #fff;  /* the toggle knob, the selected outline vertex */

  /* Brand */
  --accent: #ec4899;
  --accent-hover: #f472b6;
  --cast: #ec4899;
  --cast-hover: #f472b6;
  --ios-blue: #0a84ff;  /* iOS system blue, so the welcome glyph matches the button they're looking for */

  /* Hold colours (start green, intermediate blue, finish red, feet orange) */
  --start: #22c55e;
  --int: #3b82f6;
  --finish: #ef4444;
  --feet: #f59e0b;
  --led-amber: #f59e0b;  /* a circuit run's "hold after next" (the key on the cast sheet) */
  --gold: #fbbf24;  /* the benchmark mark, the challenge clock in rests */
  --start-text: #4ade80;  /* hold colours as text on a dark surface */
  --int-text: #60a5fa;
  --finish-text: #f87171;

  /* Text */
  --text: #f5f5f5;
  --text-muted: #9a9a9a;
  --text-soft: #d4d4d4;  /* long-form reading text (challenge rules, privacy page) */
  --text-faint: #55556a;
  --placeholder: #5a5a66;  /* the create view's name field */
  --placeholder-focus: #45454f;
  --comment-text: #c8c8da;
  --on-accent: #fff;  /* text and icons on an accent or danger fill */
  --on-board: #fff;  /* controls and labels drawn over the board photo */

  /* States */
  --danger: #dc2626;
  --danger-pressed: #b91c1c;
  --error-text: #f87171;
  --success-text: #4ade80;
  --mirror-text: #60a5fa;  /* the mirror toggle and mirrored-tick labels */
  --fave: #f43f5e;

  /* Badges */
  --badge-pink-text: #f9a8d4;
  --badge-pink-fill: rgba(236,72,153,0.16);
  --badge-pink-line: rgba(236,72,153,0.5);
  --badge-green-text: #86efac;
  --badge-green-fill: rgba(34,197,94,0.16);
  --badge-green-line: rgba(34,197,94,0.5);
  --badge-blue-text: #93c5fd;
  --badge-blue-fill: rgba(59,130,246,0.16);
  --badge-blue-line: rgba(59,130,246,0.5);

  /* Alpha variants: --<colour>-aNN is that colour at alpha 0.NN */
  --accent-a05: rgba(236, 72, 153, 0.05);
  --accent-a12: rgba(236,72,153,0.12);
  --accent-a14: rgba(236,72,153,0.14);
  --accent-a19: rgba(236, 72, 153, 0.19);
  --accent-a40: rgba(236,72,153,0.4);
  --accent-a85: rgba(236, 72, 153, 0.85);
  --start-a10: rgba(34,197,94,0.10);
  --start-a14: rgba(34,197,94,0.14);
  --start-a28: rgba(34,197,94,0.28);
  --start-a40: rgba(34,197,94,0.4);
  --start-a55: rgba(34,197,94,0.55);
  --int-a10: rgba(59,130,246,0.10);
  --int-a12: rgba(59,130,246,0.12);
  --int-a24: rgba(59,130,246,0.24);
  --int-a40: rgba(59,130,246,0.4);
  --int-a55: rgba(59,130,246,0.55);
  --finish-a10: rgba(239,68,68,0.10);
  --finish-a30: rgba(239,68,68,0.30);
  --finish-a40: rgba(239,68,68,0.4);
  --finish-a55: rgba(239,68,68,0.55);
  --feet-a12: rgba(245,158,11,0.12);
  --feet-a16: rgba(245,158,11,0.16);
  --feet-a50: rgba(245,158,11,0.5);
  --gold-a95: rgba(251,191,36,0.95);
  --fave-a14: rgba(244,63,94,0.14);
  --mirror-a16: rgba(96,165,250,0.16);
  --success-a12: rgba(74,222,128,0.12);
  --success-a45: rgba(74,222,128,0.45);
  --error-text-a40: rgba(248,113,113,0.4);
  --bg-a00: rgba(10,10,10,0);
  --bg-a55: rgba(10,10,10,0.55);
  --bg-a70: rgba(10,10,10,0.7);
  --bg-a80: rgba(10,10,10,0.8);
  --bg-a82: rgba(10,10,10,0.82);
  --bg-a85: rgba(10,10,10,0.85);
  --white-a075: rgba(255, 255, 255, 0.075);
  --white-a12: rgba(255,255,255,0.12);
  --white-a15: rgba(255,255,255,0.15);
  --white-a22: rgba(255,255,255,0.22);
  --white-a25: rgba(255,255,255,0.25);
  --white-a35: rgba(255,255,255,0.35);
  --white-a60: rgba(255,255,255,0.6);
  --white-a70: rgba(255,255,255,0.7);
  --white-a90: rgba(255,255,255,0.9);

  /* Overlays and bars */
  --topbar-bg: rgba(10,10,10,0.92);  /* the sticky top bar and the compare bar */
  --nav-bg: rgba(15,15,15,0.95);
  --fs-bar-bg: rgba(16,16,16,0.62);  /* the fullscreen viewer's bottom bar */
  --scrim: rgba(0,0,0,0.6);  /* behind sheets and modals */

  /* Outline editor (#outlines, admin only) */
  --ol-edit: #f5c842;  /* the hold being edited */
  --ol-edit-a12: rgba(245,200,66,0.12);
  --ol-edit-a16: rgba(245,200,66,0.16);
  --ol-edit-a45: rgba(245,200,66,0.45);
  --ol-edit-a90: rgba(245,200,66,0.9);
  --ol-other-line: rgba(125,185,255,0.95);  /* the other holds' outlines */
  --ol-vertex-ring: #111;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;  /* PINs and passphrases */

  /* Radii */
  --radius: 12px;  /* cards, menus, panels */
  --btn-radius: 10px;  /* every rectangular button and field */
  --radius-2xs: 3px;
  --radius-xs: 5px;
  --radius-badge: 6px;
  --radius-sm: 8px;
  --radius-chip: 9px;
  --radius-md: 10px;  /* rows, the toast, small cards (same as --btn-radius today, a different job) */
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-sheet: 18px;  /* bottom sheets' top corners, the fullscreen bar */
  --radius-icon: 20px;
  --radius-fell: 22px;  /* the challenge's Fell button */
  --radius-pill: 999px;

  /* Shadows */
  --shadow: 0 4px 24px rgba(0,0,0,0.4);  /* sheets, the toast, the install banner */
  --shadow-menu: 0 14px 34px rgba(0,0,0,0.55);
  --shadow-fell: 0 8px 30px rgba(220,38,38,0.35);
  --shadow-hold: 0 0 0 1px rgba(0,0,0,0.45), 0 0 9px rgba(0,0,0,0.4);
  --shadow-fs-board: 0 10px 40px rgba(0,0,0,0.6);
  --shadow-fs-map: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-fs-map-dim: 0 0 0 999px rgba(0,0,0,0.35);
  --shadow-fs-bar: 0 8px 30px rgba(0,0,0,0.45);
  --shadow-ol-vertex: 0 0 0 3px rgba(245,200,66,0.9);
  --shadow-ol-dot: 0 0 0 1px rgba(0,0,0,0.5);
  --shadow-ol-loupe: 0 6px 22px rgba(0,0,0,0.7);
  --text-shadow-seq: 0 1px 2px rgba(0,0,0,0.9);
  --drop-hold-lines: 0 0 1px rgba(0,0,0,0.85);  /* used as drop-shadow(var(...)) */
  --drop-ol-x: 0 0 1.5px #000;
  --shadow-lights-on: 0 0 0 3px rgba(34,197,94,0.28);  /* the 'lit on the board' dot */

  /* Sizes */
  --nav-h: 60px;  /* the bottom nav; body.ch-away raises it to 100px in styles.css */
  --nav-strip-h: 40px;  /* the 'back to the challenge' strip on top of the nav */
  --cast-run-big: 88px;  /* the circuit run screen's countdown and move count */
  --cast-run-words: 36px;  /* the run screen's "Watch the route" during the trace */
  --title-cast-h: 34px;  /* the problem view's Cast, beside the title */
  --title-cast-pad-x: 12px;
  --title-cast-gap: 6px;  /* between its icon and 'Cast' */
  --title-cast-icon: 16px;
  --feet-opt-h: 34px;  /* the create view's feet-rule options */
  --feet-rule-w: 380px;
  --pill-fade: 28px;  /* the pill row fades out over this at an end with more to scroll */
  --filter-pill-pad-y: 7px;  /* a one-tap filter pill in a list's row */
  --filter-pill-pad-x: 9px;  /* ...its sides: the problems row fits a 390 px phone */
  --filter-btn-w: 44px;  /* the filter icon pill, first in a list's row */
  --filter-btn-icon: 17px;  /* the funnel in it */
  --filter-badge: 18px;  /* the count on it when filters are on */
  --filter-badge-font: 11px;
  --filter-badge-pad: 5px;
  --filter-badge-room: 6px;  /* how far the badge pokes out of the pill (the row makes room) */
  --filter-clear-pad-x: 11px;  /* the row's Clear pill, pinned at the right while anything isn't the default */
  --filter-sheet-max-h: 92vh;  /* the Filter sheet scrolls past this */
  --f-section-gap: 22px;  /* between the sheet's sections */
  --f-label-gap: 10px;  /* under a section's label */
  --f-label-size: 14px;
  --f-opt-gap: 6px;  /* between the sort options and between the toggles */
  --f-opt-pad-y: 10px;
  --f-opt-size: 14px;  /* the sort options and toggles: one line on a 390 px phone */
  --f-foot-gap: 24px;  /* above Reset and Show N */
  --f-reset-pad-x: 18px;  /* Reset, and the empty list's Clear filters */
  --f-empty-btn-gap: 16px;  /* above Clear filters */
  --hold-pick-dim: 0.72;  /* the hold picker dims the board a little more than a problem view (0.62) */
  --hold-pick-line: 3px;  /* a picked hold's white outline */
  --hold-pick-halo-line: 8px;  /* the dark ring under it, so it reads on the pink, white and black of the board */
  --hold-pick-halo: rgba(0,0,0,0.7);
  --hold-pick-fill: var(--accent-a40);  /* the picked hold's wash */
  --hold-pick-thumb-line: 1.5px;  /* the same on the sheet's thumbnail */
  --hold-pick-thumb-halo: 3.5px;
  --hp-thumb-w: 92px;  /* the board thumbnail on the sheet's Holds row */
  --hp-row-pad: 10px 12px;  /* the Holds row */
  --hp-row-gap: 14px;
  --hp-row-title: 16px;
  --hp-row-sub: 13px;
  --hp-go: 20px;  /* the row's chevron */
  --hp-chip-pad: 5px 8px 5px 11px;  /* a picked hold's chip (tap to drop) */
  --hp-chip-gap: 6px;
  --hp-chip-size: 13px;
  --hp-top-pad: 10px 12px;  /* the picker's header: back, Holds, Clear holds */
  --hp-title-size: 18px;
  --hp-text-btn-pad: 8px 10px;
  --hp-text-btn-size: 15px;
  --hp-hint-min-h: 52px;  /* the live line: room for two lines, so the board doesn't jump */
  --hp-pad-x: 16px;  /* the picker's sides */
  --hp-hint-size: 14px;
  --hp-picked-max-h: 96px;  /* the chips scroll past this */
  --hp-foot-pad-b: 14px;  /* under Show N (plus the home bar) */
  --range-thumb: 30px;  /* the Grade slider's handles (the wall's below) */
  --range-track-h: 6px;
  --range-hit-h: 52px;  /* the slider's touch area, taller than the track */
  --range-tick-h: 28px;  /* the row of grade labels under it */

  /* Wall-screen mode (?wall, wall.js): the 1280×720 touchscreen by the board */
  --wall-head-h: 64px;  /* the header with the page tabs */
  --wall-rail-w: 84px;  /* the grade rail down the left edge */
  --wall-side-w: 584px;  /* the rail and the problem list together; the board fills the rest */
  --wall-row-h: 72px;  /* a row of the problem list: a finger's width with room to spare */
  --wall-pill-h: 48px;  /* the filter icon and pills over a list, and the Filter panel's options */
  --wall-filter-btn-w: 64px;  /* the filter icon pill on the wall */
  --wall-filter-btn-icon: 24px;
  --wall-filter-badge: 24px;
  --wall-filter-badge-font: 14px;
  --wall-filter-badge-room: 8px;
  --wall-f-pad-x: 22px;  /* the Filter panel's sides */
  --wall-f-pad-y: 14px;
  --wall-f-title-size: 24px;
  --wall-f-close-size: 20px;
  --wall-f-label-size: 17px;
  --wall-f-section-gap: 26px;
  --wall-f-opt-size: 18px;  /* its sort options and toggles */
  --wall-f-pill-pad-x: 20px;
  --wall-f-btn-pad-y: 16px;  /* Reset and Show N */
  --wall-f-btn-size: 18px;
  --wall-f-reset-pad-x: 24px;
  --wall-f-empty-size: 18px;  /* the empty list's message on the wall */
  --wall-hp-chip-pad: 9px 12px 9px 16px;  /* a picked hold's chip in the Filter panel */
  --wall-hp-chip-size: 17px;
  --wall-hp-hint-size: 16px;  /* the panel's "Tap holds on the board" */
  --wall-range-thumb: 48px;  /* the Grade slider's handles on the wall */
  --wall-range-hit: 80px;
  --wall-range-tick-h: 44px;
  --wall-tap: 60px;  /* Mirror and Start circuit: big enough for a chalky finger */
  --wall-qr: 340px;  /* the QR on Get the app and the first idle slide */
  --wall-c-panel-w: 470px;  /* the Create page's panel beside the board */
  --wall-grade-h: 50px;  /* a grade on the Create page */
  --wall-key-h: 66px;  /* a key on the on-screen keyboard */
  --wall-kb-max-w: 1180px;  /* the keyboard's width (the screen is 1280) */
  --wall-search-font: 18px;  /* the wall's search field in a list's row */
  --wall-search-pad-x: 16px;
  --wall-search-clear: 34px;  /* its × */
  --wall-search-clear-font: 24px;
  --wall-clear-pad-x: 18px;  /* the row's Clear pill on the wall */
  --lights-dot: 8px;  /* the "lit on the board" dot by the create board */
  --qr-dark: #000;  /* QR modules: black on white, or phone cameras struggle */
  --qr-light: #fff;
}