/* Generated by shared/build-tokens.mjs from shared/tokens.json. Do not edit: change shared/tokens.json, then run `node shared/build-tokens.mjs`.
   The design tokens of docs/design.md section 4 (approved library UI-00). */
:root {
  --gold: #F4B73C; /* Brand, primary action, Gold rarity (D-02). Discord embed accent 0xF4B73C */
  --gold-hi: #FFD76E; /* Highlights, gradient top */
  --gold-strong: #E0971C; /* Gradient bottom, pressed */
  --gold-deep: #C9820F; /* Deep edge of the logo tile */
  --on-gold: #1C1203; /* Text and icons on gold */
  --gold-a10: #F4B73C1A; /* Gold at 10%: soft fills */
  --gold-a20: #F4B73C33; /* Gold at 20% */
  --gold-a35: #F4B73C59; /* Gold at 35%: glow-action */
  --gold-a50: #F4B73C80; /* Gold at 50% */
  --bg-base: #0A0A12; /* Page. Also the bot pictures and the gallery */
  --bg-raised: #11111B; /* Dock and top bar fills */
  --surface-1: #181824; /* Panels (today --surface) */
  --surface-2: #20202F; /* Raised items in a panel */
  --surface-3: #2A2A3D; /* Highest item, selected row */
  --overlay: #11111BEB; /* bg-raised at 92%: dock and floating bars */
  --scrim: #00000099; /* Black at 60%: under a sheet or a modal */
  --text-primary: #F5F2EC;
  --text-secondary: #AEABC0;
  --text-muted: #9592AB; /* New value (4.66:1 or more). Replaces #6F6C86 */
  --text-on-color: #FFFFFF; /* Only on a colored fill */
  --border: #2A2A3E; /* Decorative dividers only, never a control edge */
  --border-strong: #76769C; /* New value (3.23:1 or more): control edges. Replaces #3B3B57 */
  --danger: #FF4D63;
  --danger-text: #FF6B7D;
  --danger-soft: #FF4D6324; /* danger at 14% */
  --danger-strong: #D42F45; /* Badge fill with white text (4.89:1) */
  --warning: #FF8A3D; /* Base and text */
  --warning-soft: #FF8A3D24; /* warning at 14% */
  --success: #5BE38A; /* Base and text */
  --success-soft: #5BE38A1F; /* success at 12% */
  --info: #7FB2FF; /* Base and text */
  --info-soft: #7FB2FF24; /* info at 14% */
  --role-attack: #F2611D; /* Fight card role, the plate glow only (D-68). Not --warning */
  --role-support: #3FE3F5; /* Fight card role, the plate glow only (D-68) */
  --rarity-normal: #A3ACBC; /* Normal */
  --rarity-normal-soft: #A3ACBC24;
  --rarity-illustrated_rare: #3E8BFF; /* Illustrated Rare */
  --rarity-illustrated_rare-text: #4DA3FF;
  --rarity-illustrated_rare-soft: #3E8BFF24;
  --rarity-secret_rare: #B15CFF; /* Secret Rare */
  --rarity-secret_rare-text: #B07CFF;
  --rarity-secret_rare-soft: #B15CFF24;
  --rarity-full_art: #FF4FA3; /* Full Art */
  --rarity-full_art-soft: #FF4FA324;
  --rarity-gold: var(--gold); /* Gold */
  --rarity-gold-soft: #F4B73C24;
  --rarity-event: #10B981; /* Event */
  --rarity-event-soft: #10B98124;
  --rarity-promo: #C9CED8; /* Promo */
  --rarity-promo-soft: #C9CED824;
  --element-fire: #FF6A3D; /* Fire */
  --element-water: #3CB6FF; /* Water */
  --element-lightning: #FFD43B; /* Lightning */
  --element-ice: #9BEBFF; /* Ice */
  --element-nature: #5BD66B; /* Nature */
  --element-earth: #C98D55; /* Earth */
  --element-shadow: #8A6CFF; /* Shadow */
  --element-shadow-text: #A08AFF;
  --element-air: #BFEAFF; /* Air */
  --element-arcane: #E06AFF; /* Arcane */
  --element-psychic: #FF6AD0; /* Psychic */
  --element-toxic: #9CD93C; /* Toxic */
  --element-metal: #A8BCCF; /* Metal */
  --element-physical: #DFE6F2; /* Physical */
  --element-light: #FFF1B8; /* Light */
  --effect-boon: #3DD9B4; /* Teal, not gold (D-03) */
  --effect-boon-grad-start: #3DD9B4;
  --effect-boon-grad-end: #1FA886;
  --effect-boon-soft: #3DD9B424;
  --effect-prank: #B28CFF;
  --effect-prank-grad-start: #9A73FF;
  --effect-prank-grad-end: #6B45E6;
  --effect-prank-soft: #B28CFF24;
  --effect-shield: #7FB2FF; /* Shares the info hue; always with a shield icon and a label */
  --effect-shield-grad-start: #7FB2FF;
  --effect-shield-grad-end: #3C7BE0;
  --effect-shield-soft: #7FB2FF24;
  --hunt: #7C5CFF; /* Fill only */
  --hunt-text: #A08AFF;
  --cur-shards: #B8F02A; /* The Shards currency, global */
  --cur-shards-deep: #7FAE12;
  --cur-shards-hi: #F1FFC9;
  --cur-shards-soft: #B8F02A1F; /* cur-shards at 12% */
  --avatar-fallback-start: #7C5CFF; /* One avatar placeholder gradient on every surface */
  --avatar-fallback-end: #FF4FA3;
  --boss-hp-track: #0A0A12C7; /* Library only: the boss HP bar track */
  --boss-hp-low: #B3213A; /* Library only: the boss HP gradient start (then danger, then boss-hp-high) */
  --boss-hp-high: #FF8A96; /* Library only: the boss HP gradient end */
  --name-color-1: #F4B73C; /* The 8 name colors of the name color boon (today NAME_COLORS, 3 copies) */
  --name-color-2: #FF5A5A;
  --name-color-3: #FF9A3C;
  --name-color-4: #5BE38A;
  --name-color-5: #4FD6F0;
  --name-color-6: #5B8CFF;
  --name-color-7: #B45AD8;
  --name-color-8: #FF7AC8;
  --tier-bronze: #D08A4E; /* Bronze (the PR #153 value) */
  --tier-silver: #C9D1DC; /* Silver (the PR #153 value) */
  --tier-platinum: #9FE8D8; /* Platinum (new, D-74: proposal, shown in the UI-00 gallery for Nathan) */
  --tier-diamond: #6FE3FF; /* Diamond (the PR #153 value) */
  --tier-obsidian: #8C7BD8; /* Obsidian (new, D-74: proposal; not the Full Art pink of the old Mythic) */
  --hit: 44px; /* The touch hit area (9.1); Button md, input, Stepper button, Pager/touch, IconButton/touch */
  --ctl-md: 44px; /* Button md, SearchField, Select, Switch row, Countdown/live */
  --ctl-icon: 40px; /* IconButton md (pointer), top bar pills */
  --ctl-sm: 32px; /* Button sm, IconButton sm, Pager (pointer) */
  --tab-h: 34px; /* Tabs/tab (the sub-tab) */
  --chip-md: 28px; /* Chip md, Tabs/segment */
  --chip-sm: 22px; /* Chip sm, the reward pill in a button */
  --counter: 20px; /* Counter (count badge) */
  --check-badge: 24px; /* SelectedMark check badge */
  --dot: 8px; /* Dot, the rarity mark in a filter chip */
  --stack-plate: 14px; /* UI-67: the stack count plate on a status badge (UI-67 review-1 Tokens 2, approved 2026-10-19 decision 5) */
  --turn-bar: 3px; /* UI-67: the enemy-turn bar under a turn-order chip (UI-67 approved 04 and 05-08; UI-52 review-5) */
  --icon-xs: 12px; /* Spinner in a chip or a switch knob */
  --icon-sm: 14px; /* Check in a badge, the Shards coin */
  --icon-md: 16px; /* Icon in a button, tab, chip, toast, pager */
  --icon-lg: 18px; /* Icon in an IconButton or a Stepper button */
  --icon-xl: 20px; /* Icon size 20 (5.2 Icon) */
  --icon-2xl: 24px; /* Icon size 24 (5.2 Icon) */
  --switch-w: 38px; /* Switch track width */
  --switch-h: 22px; /* Switch track height */
  --switch-knob: 18px; /* Switch knob */
  --bar-sm: 4px; /* Progress/linear */
  --bar-md: 8px; /* Progress/segmented */
  --bar-lg: 12px; /* Progress/hp */
  --dialog-w: 414px; /* Dialog/compact width (the most a confirm dialog grows) */
  --sheet-side-w: 380px; /* Sheet/side width */
  --sheet-bottom-w: 430px; /* Sheet/bottom: the most it grows on a wide phone */
  --textarea-h: 120px; /* Textarea height */
  --avatar-xs: 20px; /* Avatar xs */
  --avatar-sm: 28px; /* Avatar sm */
  --avatar-md: 38px; /* Avatar md */
  --avatar-lg: 56px; /* Avatar lg */
  --avatar-xl: 96px; /* Avatar xl */
  --emblem: 38px; /* Logo/emblem (the lion tile in the top bar) */
  --dock-size: 72px; /* Dock/expanded height (medium, expanded) */
  --dock-size-compact: 58px; /* Dock/compact height (compact-port, compact-land) */
  --dock-w: 504px; /* Dock/expanded width: the most the dock grows */
  --dock-btn-h: 54px; /* Dock/button height */
  --dock-btn-h-compact: 48px; /* Dock/button height on compact classes */
  --dock-open: 64px; /* Dock/open circle */
  --dock-open-compact: 56px; /* Dock/open circle on compact classes */
  --dock-open-ring: 74px; /* Dock/open ring behind the circle */
  --dock-bar-w: 18px; /* Dock/button active bar width */
  --dock-bar-h: 3px; /* Dock/button active bar height */
  --menu-tile: 88px; /* MenuTile (UI-60 menu grid) */
  --coin: 20px; /* The Shards coin in the top bar pill */
  --corner-w: 120px; /* The Discord corner zone width, top right (2.3, G-013) */
  --corner-h: 60px; /* The Discord corner zone height, top right (2.3, G-013) */
  --sa-guess-top: 48px; /* The portrait top inset guess (2.3): Discord sent 48 on 4 phones (mobile-log, 2026-10-07) */
  --card-tile: 88px; /* Card size tile (8.1): the minimum width of a card in a grid */
  --card-tile-max: 112px; /* The widest grid tile before the grid adds a column (UI-64 review-1: 88 to 109 px) */
  --card-squad: 80px; /* Card size squad (8.1): the minimum width of a squad slot card */
  --card-thumb: 64px; /* Card size thumb (8.1): pickers, offers */
  --card-mini: 44px; /* Card size mini (8.1): lists, feed rows */
  --card-ratio: 1.4; /* Card height / width (5:7, 8.1) */
  --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
  --font-flavor: 'Instrument Serif', Georgia, serif;
  --fs-display: 48px; /* Celebrations, big numbers */
  --fw-display: 700;
  --lh-display: 1.1;
  --ls-display: -1px;
  --fs-title: 28px; /* Screen title */
  --fw-title: 700;
  --lh-title: 1.1;
  --fs-heading: 20px; /* Panel heading. Flavor text: this size in font-flavor italic */
  --fw-heading: 700;
  --lh-heading: 1.25;
  --fs-stat: 16px; /* Numbers, stats */
  --fw-stat: 600;
  --lh-stat: 1.25;
  --fs-body: 15px;
  --fw-body: 400;
  --lh-body: 1.5;
  --fs-small: 13px; /* Secondary text, small buttons (400 or 600) */
  --fw-small: 400;
  --fw-small-strong: 600;
  --lh-small: 1.25;
  --fs-caption: 12px; /* Decision text minimum */
  --fw-caption: 600;
  --lh-caption: 1.25;
  --fs-label: 11px; /* Labels, dock labels. Uppercase in CSS */
  --fw-label: 600;
  --lh-label: 1.1;
  --ls-label: 1.5px;
  --sp-half: 2px;
  --sp-1: 4px;
  --sp-1-5: 6px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --rad-sm: 6px; /* Tag, small chip */
  --rad-md: 10px; /* Button, input, icon button */
  --rad-lg: 16px; /* Panel, tile, dialog */
  --rad-sheet: 22px; /* Sheet, dock */
  --rad-card-ratio: 0.05; /* rad-card = 5% of the card width (14 px at 280 px), on every surface: calc(card width * var(--rad-card-ratio)) */
  --rad-pill: 999px; /* Chip, pill */
  --rad-round: 50%; /* Avatar */
  --bw-1: 1px; /* Default border */
  --bw-2: 2px; /* Emphasis and rarity */
  --bw-focus: 2px; /* Focus ring */
  --elev-1: 0 8px 24px #00000073; /* Panel (black 45%) */
  --elev-2: 0 12px 40px #0000008C; /* Dock, popover (black 55%) */
  --elev-3: 0 20px 60px #00000099; /* Dialog, sheet (black 60%) */
  --glow-focus: 0 0 0 2px var(--gold); /* Focus ring */
  --glow-action: 0 4px 14px var(--gold-a35); /* Primary action */
  --glow-rarity-normal: 0 0 16px #A3ACBC; /* Rare cards. The color is the rarity color: CSS --glow-rarity-<rarity> */
  --glow-rarity-illustrated_rare: 0 0 16px #3E8BFF;
  --glow-rarity-secret_rare: 0 0 16px #B15CFF;
  --glow-rarity-full_art: 0 0 16px #FF4FA3;
  --glow-rarity-gold: 0 0 16px var(--gold);
  --glow-rarity-event: 0 0 16px #10B981;
  --glow-rarity-promo: 0 0 16px #C9CED8;
  --item-disabled: 0.4; /* opacity. Cue: the reason in the label or under the control */
  --item-locked: grayscale(1) brightness(.6); /* filter. Cue: lock icon */
  --item-not-owned: grayscale(.7) brightness(.7); /* filter. Cue: 'Not owned' in the detail */
  --item-down: grayscale(1) brightness(.5); /* filter. Cue: 'Down' label */
  --z-base: 0; /* Screen content, stages, combat text */
  --z-shell: 100; /* Top bar, sub-tabs, dock, action rail */
  --z-sheet: 200; /* Sheets, drop panels, popovers */
  --z-modal: 300; /* Dialogs, card viewer, full-screen views */
  --z-toast: 400; /* Toasts, banners */
  --z-system: 500; /* Loader, tutorial layer, offline banner */
  --dur-instant: 80ms; /* Press feedback */
  --dur-fast: 120ms; /* Hover, small changes */
  --dur-base: 200ms; /* Screen change, popover */
  --dur-slow: 360ms; /* Sheet, dialog */
  --dur-reveal: 700ms; /* One card reveal */
  --dur-celebrate: 1400ms; /* Celebration */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* Enter */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Pop */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Move */
  --ease-linear: linear; /* Loops */
}