:root,
[data-theme="dark"] {
  --color-accent:          #FF8A3D;
  --color-on-accent:       #17130F;

  --color-success:         #62D49A;
  --color-warning:         #F4C566;
  --color-danger:          #FF8585;
  --color-overlay:         #080A0CCC;

  --fo-cancel-bg:      #303437; --fo-cancel-hover:  #3E4347; --fo-cancel-pressed: #25292C;
  --fo-action-bg:      #B88732; --fo-action-hover:  #C99A45; --fo-action-pressed: #A8792C;
  --fo-accept-bg:      #465B3D; --fo-accept-hover:  #526B47; --fo-accept-pressed: #394B32;
  --fo-danger-bg:      #A43D32; --fo-danger-hover:  #B64A3D; --fo-danger-pressed: #8D3229;

  --fo-radius-control: 0px; --fo-radius-panel: 0px;
  --fo-slant: 10px; --fo-cut: 12px; --fo-field-cut: 6px;
  --fo-shape-button: polygon(var(--fo-slant) 0, 100% 0, calc(100% - var(--fo-slant)) 100%, 0 100%);
  --fo-shape-panel: polygon(var(--fo-cut) 0, 100% 0, 100% calc(100% - var(--fo-cut)), calc(100% - var(--fo-cut)) 100%, 0 100%, 0 var(--fo-cut));
  --fo-shape-field: polygon(0 0, calc(100% - var(--fo-field-cut)) 0, 100% var(--fo-field-cut), 100% 100%, 0 100%);

  --fo-gold: #C69A45; --fo-silver: #BCC6CE; --fo-bronze: #BC8055;
  --fo-gold-edge: #886124; --fo-silver-edge: #78848E; --fo-bronze-edge: #794829;

  --fo-light-ink: #F5F1E7; --fo-dark-ink: #171A1C;
  --fo-steel: #777C7C;

  --fo-page:            #111416;
  --fo-surface:         #25292C;
  --fo-surface-hover:   #303437;
  --fo-surface-pressed: #1C2023;
  --fo-text:            #F5F1E7;
  --fo-muted:           #A7ADB4;
  --fo-border:          #777C7C;
  --fo-button-border:   #A7ADB4;
  --fo-focus:           #E2B765;
  --fo-disabled-bg:     #343A40;
  --fo-disabled-text:   #A7ADB4;
  --fo-disabled-border: #777C7C;
  --fo-input:           #191D20;
  --fo-line:            #3D4449;
  --fo-error:           #F2A49B; --fo-error-surface:   #352321;
  --fo-success:         #C0D2A8; --fo-success-surface: #263123;

  --fo-grain:       url("/static/img/fo/painted-metal-grain.png");
  --fo-edge:        url("/static/img/fo/rusted-metal-frame.png");
  --fo-edge-panel: 4px;
  --fo-rust-patch:  url("/static/img/fo/rust-chips-overlay.png");

  --fo-chrome-plate: #25292C;
  --fo-icon-accent:  #C69A45;
}

[data-theme="light"] {
  --fo-chrome-plate: #E2E5E8;
  --fo-icon-accent:  #774D10;

  --fo-page:            #F3F4F5;
  --fo-surface:         #FFFFFF;
  --fo-surface-hover:   #ECEFF1;
  --fo-surface-pressed: #E2E5E8;
  --fo-text:            #171A1C;
  --fo-muted:           #5B6470;
  --fo-button-border:   #303437;
  --fo-focus:           #774D10;
  --fo-disabled-bg:     #E2E5E8;
  --fo-disabled-text:   #59616A;
  --fo-input:           #FFFFFF;
  --fo-line:            #D4D9DD;
  --fo-error:           #963D32; --fo-error-surface:   #F9EDEB;
  --fo-success:         #3C552F; --fo-success-surface: #EDF2E8;
}

[data-theme="light"] {
  --color-accent:          #C65312;
  --color-on-accent:       #17130F;

  --color-success:         #24764B;
  --color-warning:         #8A6A10;
  --color-danger:          #B83232;
  --color-overlay:         #101318B8;
}

:root {
  /* font-display is reserved for the broadcast overlay; the site uses font-sans. */
  --font-display: "Oswald", "Roboto Condensed", sans-serif;
  --font-sans:    "IBM Plex Sans", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --fs-h1:      30px;
  --fs-h1-sm:   25px;
  --fs-h2:      21px;
  --fs-h3:      16px;
  --fs-body:    16px;
  --fs-ui:      14px;
  --fs-small:   13px;

  --lh-tight:   1.25;
  --lh-body:    1.5;

  --border-w:   1px;

  --row-h:        44px;
  --row-h-touch:  48px;
  --cell-pad-y:   8px;
  --cell-pad-x:   12px;

  --gap-xs:  4px;
  --gap-sm:  8px;
  --gap-12:  12px;
  --gap-md:  16px;
  --gap-lg:  24px;
  --gap-32:  32px;
  --gap-xl:  48px;

  --content-max: 1280px;
  --content-readable: 760px;
  --container-pad: 32px;

  --control-h: 44px;

  --focus-ring: 0 0 0 2px var(--fo-page), 0 0 0 4px var(--color-accent);
  --shadow-popover: 0 18px 48px #00000052;
  --shadow-panel: 0 12px 32px #00000014;

  /* Photo text/background tokens remain independent of the page theme. */
  --color-photo-text: #fff;
  --color-photo-text-muted: rgba(255, 255, 255, .9);
  --color-photo-text-dim: rgba(255, 255, 255, .82);
  --color-photo-tint-05: rgba(8, 9, 11, .05);
  --color-photo-tint-55: rgba(8, 9, 11, .55);
  --color-photo-tint-60: rgba(8, 9, 11, .6);
  --color-photo-shadow: rgba(0, 0, 0, .7);
}

@media (pointer: coarse) {
  :root {
    --row-h: var(--row-h-touch);
    --cell-pad-y: 12px;
  }
}

@media (max-width: 1023px) {
  :root { --container-pad: 24px; }
}
@media (max-width: 767px) {
  :root { --container-pad: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}