/* Colour, type and surface tokens for both skins. Shared with Sinté and cliply's broadcast OSD. */
@layer tokens, base, app;

@layer tokens {
  /* Sala de control — tokens shared with Sinté (sinte/public/styles.css) and Cliply broadcast OSD */
  :root {
  --bg: #050706; --room: #0A0F0C; --room-hi: #101816;
  --panel: #0A100D; --panel-2: #0A120F; --panel-3: #0C1613; --sunk: #070C0A;
  --line: #17261F; --line-2: #22382E; --edge: #1A2A22;
  --phos: #3BF08C; --phos-dim: #2E915F; --phos-soft: #1B4E34; --phos-hi: #9BFFCB;
  --amber: #FFB020; --amber-dim: #9A6A12;
  --tally: #FF4438; --cyan: #4FE8FF; --pink: #ffb8d1;
  --bone: #D9D3BE; --mute: #668778;
  --on-phos: #04120A; --on-amber: #160C00;
  --scan: rgba(0, 0, 0, .34);
  --inner: inset 0 0 70px rgba(59, 240, 140, .05);
  --glow-p: 0 0 14px rgba(59, 240, 140, .42);
  --glow-a: 0 0 14px rgba(255, 176, 32, .38);
  --glow-t: 0 0 14px rgba(255, 68, 56, .5);
  --noise-op: .045; --noise-blend: screen;
  --vig: rgba(0, 0, 0, .62);
  --sel-bg: #1F1707;
  --turf: #06110B; --turf-2: #081510; --turf-line: rgba(59, 240, 140, .55);
  --shadow: 0 20px 50px -34px #000;
  --r: 10px;
  --cliply-pink: var(--pink);
  --on-pink: #2A0B18; --glow-c: 0 0 14px rgba(255, 184, 209, .45); --pink-ink: var(--pink);
  --led-off: #10241a; --led-off-p: #26161d;
  --warn: #F5C518; --glow-cy: 0 0 14px rgba(79, 232, 255, .4);
  --f-led: 'VT323', ui-monospace, monospace;
  --f-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-slate: 'Anton', Impact, 'Arial Narrow', sans-serif;
  color-scheme: dark;
}
  @media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #D9D6CA; --room: #E6E4D8; --room-hi: #F2F0E6;
    --panel: #F4F2EA; --panel-2: #EBE8DD; --panel-3: #E3E0D3; --sunk: #F0EDE3;
    --line: #D0CCBC; --line-2: #B4AF9E; --edge: #A9A492;
    --phos: #15503A; --phos-dim: #516157; --phos-soft: #BCC8BE; --phos-hi: #0D3A29;
    --amber: #8F5307; --amber-dim: #B08F55; --tally: #A32B1D; --cyan: #155C6B; --pink: #D4557F; --on-pink: #FFF4F8; --glow-c: none; --pink-ink: #A8355E;
    --bone: #17241E; --mute: #546058; --on-phos: #F3F0E5; --on-amber: #F3F0E5;
    --scan: rgba(23, 36, 30, .07); --inner: inset 0 0 60px rgba(11, 115, 67, .05);
    --glow-p: none; --glow-a: none; --glow-t: none; --glow-cy: none; --warn: #8A6D00; --noise-op: .05; --noise-blend: multiply;
    --vig: rgba(60, 52, 30, .22); --sel-bg: #F3E3C4; --led-off: #DCE3D8; --led-off-p: #F0DDE3;
    --turf: #1E5A3E; --turf-2: #22644A; --turf-line: rgba(243, 240, 229, .8);
    --shadow: 0 18px 44px -34px rgba(30, 40, 30, .55);
    color-scheme: light;
  }
}
  :root[data-theme="light"] {
  --bg: #D9D6CA; --room: #E6E4D8; --room-hi: #F2F0E6;
  --panel: #F4F2EA; --panel-2: #EBE8DD; --panel-3: #E3E0D3; --sunk: #F0EDE3;
  --line: #D0CCBC; --line-2: #B4AF9E; --edge: #A9A492;
  --phos: #15503A; --phos-dim: #516157; --phos-soft: #BCC8BE; --phos-hi: #0D3A29;
  --amber: #8F5307; --amber-dim: #B08F55; --tally: #A32B1D; --cyan: #155C6B; --pink: #D4557F;
  --bone: #17241E; --mute: #546058; --on-phos: #F3F0E5; --on-amber: #F3F0E5;
  --scan: rgba(23, 36, 30, .07); --inner: inset 0 0 60px rgba(11, 115, 67, .05);
  --glow-p: none; --glow-a: none; --glow-t: none; --glow-cy: none; --warn: #8A6D00; --noise-op: .05; --noise-blend: multiply;
  --vig: rgba(60, 52, 30, .22); --sel-bg: #F3E3C4; --led-off: #DCE3D8; --led-off-p: #F0DDE3;
  --turf: #1E5A3E; --turf-2: #22644A; --turf-line: rgba(243, 240, 229, .8);
  --shadow: 0 18px 44px -34px rgba(30, 40, 30, .55);
  --on-pink: #FFF4F8; --glow-c: none; --pink-ink: #A8355E;
  color-scheme: light;
}
}