/* TK Track 7.5: canonical values from design/stitch-v7.5/tokens.json. */
:root {
  --canvas: #F2F2F7;
  --surface: #FFFFFF;
  --surface-muted: #F2F2F7;
  --header-bg: rgba(255,255,255,.90);
  --header-border: rgba(0,0,0,.04);
  --pill-bg: rgba(0,0,0,.04);
  --hairline: rgba(0,0,0,.08);
  --card-border: rgba(0,0,0,.04);
  --chip-bg: #FFFFFF;
  --chip-border: rgba(0,0,0,.08);
  --chip-text: #1C1C1E;
  --shadow: 0 1px 2px rgba(0,0,0,.05);
  --search-bg: rgba(255,255,255,.95);
  --search-border: rgba(0,0,0,.08);
  --search-shadow: 0 2px 8px rgba(0,0,0,.08);
  --tab-bg: rgba(255,255,255,.95);
  --tab-border: rgba(0,0,0,.08);
  --text-1: #111827;
  --text-2: #6B7280;
  --icon-muted: #9CA3AF;
  --brand-icon: #007AFF;
  --brand-fill: #007AFF;
  --on-brand: #FFFFFF;
  --corner-blue-fill: #007AFF;
  --corner-red-fill: #D70015;
  --corner-blue-text: #007AFF;
  --corner-red-text: #D70015;
  --win-bg: #E8F5E9;
  --win-text: #1B5E20;
  --loss-bg: #EAEAEA;
  --loss-text: #6B7280;
  --overlay: rgba(0,0,0,.40);
  --sheet-bg: #FFFFFF;
  --sheet-border: rgba(0,0,0,.08);
  --grabber-bg: rgba(60,60,67,.28);
  --btn-secondary-bg: rgba(0,0,0,.05);
  --btn-secondary-active: rgba(0,0,0,.10);
  --switch-track-on: #007AFF;
  --switch-track-off: rgba(120,120,128,.16);
  --floating-shadow: 0 4px 16px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04);
  --round-badge-bg: var(--corner-blue-fill);
  --round-badge-text: var(--on-brand);
  --corner-blue-stripe: var(--corner-blue-fill);
  --corner-red-stripe: var(--corner-red-fill);
}
:root[data-theme="dark"] {
  --canvas: #101415;
  --surface: #1C1C1E;
  --surface-muted: #2C2C2E;
  --header-bg: rgba(28,28,30,.90);
  --header-border: rgba(255,255,255,.08);
  --pill-bg: rgba(255,255,255,.10);
  --hairline: #2C2C2E;
  --card-border: rgba(255,255,255,.08);
  --chip-bg: #1C1C1E;
  --chip-border: rgba(255,255,255,.10);
  --chip-text: rgba(255,255,255,.80);
  --shadow: none;
  --search-bg: rgba(28,28,30,.95);
  --search-border: rgba(255,255,255,.10);
  --search-shadow: none;
  --tab-bg: rgba(28,28,30,.95);
  --tab-border: rgba(255,255,255,.10);
  --text-1: #FFFFFF;
  --text-2: #9EA8B3;
  --icon-muted: #8E8E93;
  --brand-icon: #0A84FF;
  --brand-fill: #174ED0;
  --on-brand: #FFFFFF;
  --corner-blue-fill: #174ED0;
  --corner-red-fill: #762420;
  --corner-blue-text: #B4C6FF;
  --corner-red-text: #FFAAA5;
  --win-bg: rgba(48,209,88,.16);
  --win-text: #39CF91;
  --loss-bg: rgba(255,255,255,.06);
  --loss-text: #8E8E93;
  --overlay: rgba(0,0,0,.65);
  --sheet-bg: #1C1C1E;
  --sheet-border: rgba(255,255,255,.10);
  --grabber-bg: rgba(235,235,245,.28);
  --btn-secondary-bg: rgba(255,255,255,.10);
  --btn-secondary-active: rgba(255,255,255,.18);
  --switch-track-on: #0A84FF;
  --switch-track-off: rgba(120,120,128,.32);
  --floating-shadow: 0 4px 16px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08);
  --round-badge-bg: var(--corner-blue-fill);
  --round-badge-text: var(--on-brand);
  --corner-blue-stripe: var(--corner-blue-fill);
  --corner-red-stripe: var(--corner-red-fill);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #101415;
    --surface: #1C1C1E;
    --surface-muted: #2C2C2E;
    --header-bg: rgba(28,28,30,.90);
    --header-border: rgba(255,255,255,.08);
    --pill-bg: rgba(255,255,255,.10);
    --hairline: #2C2C2E;
    --card-border: rgba(255,255,255,.08);
    --chip-bg: #1C1C1E;
    --chip-border: rgba(255,255,255,.10);
    --chip-text: rgba(255,255,255,.80);
    --shadow: none;
    --search-bg: rgba(28,28,30,.95);
    --search-border: rgba(255,255,255,.10);
    --search-shadow: none;
    --tab-bg: rgba(28,28,30,.95);
    --tab-border: rgba(255,255,255,.10);
    --text-1: #FFFFFF;
    --text-2: #9EA8B3;
    --icon-muted: #8E8E93;
    --brand-icon: #0A84FF;
    --brand-fill: #174ED0;
    --on-brand: #FFFFFF;
    --corner-blue-fill: #174ED0;
    --corner-red-fill: #762420;
    --corner-blue-text: #B4C6FF;
    --corner-red-text: #FFAAA5;
    --win-bg: rgba(48,209,88,.16);
    --win-text: #39CF91;
    --loss-bg: rgba(255,255,255,.06);
    --loss-text: #8E8E93;
    --overlay: rgba(0,0,0,.65);
    --sheet-bg: #1C1C1E;
    --sheet-border: rgba(255,255,255,.10);
    --grabber-bg: rgba(235,235,245,.28);
    --btn-secondary-bg: rgba(255,255,255,.10);
    --btn-secondary-active: rgba(255,255,255,.18);
    --switch-track-on: #0A84FF;
    --switch-track-off: rgba(120,120,128,.32);
    --floating-shadow: 0 4px 16px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08);
    --round-badge-bg: var(--corner-blue-fill);
    --round-badge-text: var(--on-brand);
    --corner-blue-stripe: var(--corner-blue-fill);
    --corner-red-stripe: var(--corner-red-fill);
  }
}
:root {
  --color-highlight: var(--text-2);
  --color-bg: var(--canvas);
  --color-surface: var(--surface);
  --color-text: var(--text-1);
  --color-muted: var(--text-2);
  --color-border: var(--hairline);
  --color-chong: var(--corner-blue-text);
  --color-hong: var(--corner-red-text);
  --color-mode-next: var(--brand-icon);
  --color-mode-next-tint: var(--brand-fill);
  --color-mode-team: var(--brand-icon);
  --color-mode-team-tint: var(--brand-fill);
  --color-privacy-switch-thumb: var(--on-brand);
  --color-control: var(--surface-muted);
  --color-action: var(--brand-fill);
  --color-on-action: var(--on-brand);
  --color-success: var(--win-text);
  --color-loss: var(--loss-text);
  --color-outcome-strip: var(--loss-bg);
  --color-win-strip: var(--win-bg);
  --color-nearest-blue: var(--corner-blue-fill);
  --color-nearest-red: var(--corner-red-fill);
  --color-current: var(--surface-muted);
  --color-team-highlight: var(--surface-muted);
  --color-overlay: var(--overlay);
  --color-qr-background: var(--on-brand);
  --color-share: var(--brand-icon);
  --color-navigation: var(--tab-bg);
  --color-qr-foreground: light-dark(var(--text-1), var(--canvas));
  --page-gutter: 16px;
  --card-padding: 16px;
  --tile-gap: 10px;
  --chip-gap: 8px;
  --chip-height: 40px;
  --sheet-radius: 28px;
  --search-radius: 16px;
  --button-height: 48px;
  --header-height: 58px;
  --overlay-blur: 4px;
  --shadow-toast: var(--floating-shadow);
  --shadow-popover: var(--floating-shadow);
  --shadow-dialog: var(--floating-shadow);
  --text-selector: .875rem;
  --text-queue: 1.0625rem;
  --text-nav: .625rem;
  --text-outcome: .6875rem;
  --tile-width: calc((100vw - 84px) / 3);
  --tile-height: 80px;
  --radius-selector: 12px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --space-related: 8px;
  --space-group: 16px;
  --surface-padding: 16px;
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
  --text-tag: 0.875rem;
  --text-meta: .8125rem;
  --text-compact: 0.8125rem;
  --text-subheading: 1.0625rem;
  --text-small: 0.875rem;
  --text-body: 1rem;
  --text-control: 1rem;
  --tint-hover: 4%;
  --tint-selected: 8%;
  --tint-strong: 14%;
  --radius-control: 8px;
  --radius-card: 16px;
  --radius-dialog: 18px;
  --radius-pill: 999px;
  /* Component typography; responsive roles are overridden below. */
  --text-heading: 1.375rem;
  --text-score: 2.75rem;
  --text-result: 2.5rem;
  --text-stat: 1.75rem;
  --text-score-small: 1.5rem;
  --text-title: 1.25rem;
  --text-emphasis: 1.0625rem;
  --text-match-number: 1.75rem;
  --text-team-matches: 1.875rem;
  --text-current-tag: 0.5rem;
  --text-tournament-date: .8rem;
  --text-tournament-day: .9em;
  --text-display: 2rem;
  --text-admin-number: 1.4375rem;
  --tracking-brand: 2px;
  --tracking-mode: 1.3px;
  --tracking-score: 4px;
  --tracking-badge: .2px;
  --tracking-heading: -.8px;

  /* Fixed spacing: unlike surface padding, these do not shrink on mobile. */
  --space-fine: 2px;
  --space-small: 4px;
  --space-compact: 6px;
  --space-control: 10px;
  --space-field: 12px;
  --space-line: 14px;
  --space-block: 18px;
  --space-section: 20px;
  --space-panel: 22px;
  --space-content: 24px;
  --space-page: 16px;
  --space-intro: 30px;
  --space-menu: 32px;
  --toast-padding: 11px var(--space-group);

  /* Small surfaces and graphics have distinct rounding roles. */
  --radius-graph: 3px;
  --radius-track: 4px;
  --radius-tag: 4px;
  --radius-metadata: 5px;
  --radius-row: 6px;
  --radius-score: 8px;
  --radius-mode-icon: 12px;

  /* State tints preserve their source color and destination surface. */
  --tint-picker-active: 60%;
  --tint-preview-winner: 8%;
  --tint-winner: 9%;
  --tint-mode-icon: 15%;
  --tint-mode-active: 9%;
  --tint-tag: 10%;
  --tint-team-moved: 5%;
  --tint-team-moved-border: 35%;
  --tint-notification-swipe: 10%;
  --tint-next-divider: 55%;
  --tint-next-current: 7%;
  --tint-team-highlight: 18%;
  --tint-admin-moved: 8%;
  --tint-admin-moved-border: 55%;
  --tint-admin-moved-ring: 20%;
  --tint-admin-swipe: 15%;
  --tint-admin-swipe-edge: 70%;
  --tint-admin-related-border: 65%;

  --chevron-size: 8px;
  --chevron-size-small: 5px;
  --chevron-stroke: 1.5px;
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-screen: 320ms;
  --tap-min: 44px;
  --layer-sticky: 20;
  --navigation-blur: 20px;
  --opacity-pressed: 0.7;
  --navigation-height: 48px;
  --navigation-icon: 22px;
  --switch-width: var(--notification-switch-width);
  --switch-height: var(--notification-switch-height);
  --switch-thumb: var(--notification-switch-thumb);
  --content-max: 100%;
  --equipment-icon-size: 40px;
  --opacity-disabled: 0.55;
  --focus-width: 2px;
  --focus-offset: 3px;
}


:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-screen: 0ms; } }

/* Fixed lengths for component details not assigned a named geometry role in the export. */
:root {
  --size-100px: 100px;
  --size-10px: 10px;
  --size-1100px: 1100px;
  --size-12px: 12px;
  --size-14px: 14px;
  --size-16px: 16px;
  --size-172px: 172px;
  --size-180px: 180px;
  --size-18px: 18px;
  --size-1p125rem: 1.125rem;
  --size-1p1875rem: 1.1875rem;
  --size-1p25rem: 1.25rem;
  --size-1p375rem: 1.375rem;
  --size-1p5rem: 1.5rem;
  --size-1p75rem: 1.75rem;
  --size-1px: 1px;
  --size-1rem: 1rem;
  --size-20px: 20px;
  --size-224px: 224px;
  --size-22px: 22px;
  --size-23px: 23px;
  --size-24px: 24px;
  --size-260px: 260px;
  --size-28px: 28px;
  --size-2p125rem: 2.125rem;
  --size-2px: 2px;
  --size-2rem: 2rem;
  --size-320px: 320px;
  --size-32px: 32px;
  --size-360px: 360px;
  --size-36px: 36px;
  --size-3px: 3px;
  --size-40px: 40px;
  --size-42px: 42px;
  --size-44px: 44px;
  --size-46px: 46px;
  --size-480px: 480px;
  --size-48px: 48px;
  --size-48rem: 48rem;
  --size-4px: 4px;
  --size-54px: 54px;
  --size-58px: 58px;
  --size-5px: 5px;
  --size-60px: 60px;
  --size-64px: 64px;
  --size-66px: 66px;
  --size-6px: 6px;
  --size-70px: 70px;
  --size-7px: 7px;
  --size-8px: 8px;
  --size-96px: 96px;
  --size-9px: 9px;
  --size-p2em: .2em;
  --size-p875rem: .875rem;
}

:root {
  --text-input: 1rem;
  --text-label: .9375rem;
  --share-qr-size: 200px;
  --notification-switch-width: 51px;
  --notification-switch-height: 31px;
  --notification-switch-thumb: 27px;
  --equipment-filter: grayscale(1);
}
:root[data-theme="dark"] { --equipment-filter: grayscale(1) brightness(1.7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --equipment-filter: grayscale(1) brightness(1.7); } }

:root {
  --size-n1px: -1px;
  --size-n4px: -4px;
  --size-n8px: -8px;
}