/* Angrious - generated from tokens.json by tools/build-tokens.ts; do not edit */
/* Palette: raw brand values. Components never use these directly. */
:root {
  --brand-logo: #e10600;
  --brand-10: #410100;
  --brand-20: #680200;
  --brand-30: #930300;
  --brand-40: #c00500;
  --brand-50: #ef0700;
  --brand-60: #ff5540;
  --brand-70: #ff8a78;
  --brand-80: #ffb4a8;
  --brand-90: #ffdad4;
  --deg-i-10: #410003;
  --deg-i-20: #680008;
  --deg-i-30: #93000f;
  --deg-i-40: #b72023;
  --deg-i-50: #db3b38;
  --deg-i-60: #fe554e;
  --deg-i-70: #ff8980;
  --deg-i-80: #ffb3ac;
  --deg-i-90: #ffdad6;
  --brand-warm-10: #370e00;
  --brand-warm-20: #5a1c00;
  --brand-warm-30: #7f2b00;
  --brand-warm-40: #a73a00;
  --brand-warm-50: #d04b00;
  --brand-warm-60: #fb5c00;
  --brand-warm-70: #ff8c5d;
  --brand-warm-80: #ffb599;
  --brand-warm-90: #ffdbce;
  --deg-iv-10: #36003e;
  --deg-iv-20: #580064;
  --deg-iv-30: #7d008d;
  --deg-iv-40: #9e1bb0;
  --deg-iv-50: #bc3ecc;
  --deg-iv-60: #da5be8;
  --deg-iv-70: #f47cff;
  --deg-iv-80: #fcaaff;
  --deg-iv-90: #ffd6fc;
  --deg-v-10: #251a00;
  --deg-v-20: #3f2e00;
  --deg-v-30: #5b4300;
  --deg-v-40: #785a00;
  --deg-v-50: #967100;
  --deg-v-60: #b68a00;
  --deg-v-70: #d7a300;
  --deg-v-80: #f9bd00;
  --deg-v-90: #ffdf9b;
  --deg-bvii-10: #001847;
  --deg-bvii-20: #002c72;
  --deg-bvii-30: #0040a0;
  --deg-bvii-40: #0056d0;
  --deg-bvii-50: #126eff;
  --deg-bvii-60: #5a8cff;
  --deg-bvii-70: #88a9ff;
  --deg-bvii-80: #b1c5ff;
  --deg-bvii-90: #dae2ff;
  --deg-biii-10: #002204;
  --deg-biii-20: #00390a;
  --deg-biii-30: #005313;
  --deg-biii-40: #006e1d;
  --deg-biii-50: #008a27;
  --deg-biii-60: #00a831;
  --deg-biii-70: #2bc545;
  --deg-biii-80: #50e25d;
  --deg-biii-90: #70ff77;
  --success-10: #151f00;
  --success-20: #29340d;
  --success-30: #3f4b22;
  --success-40: #566337;
  --success-50: #6f7c4e;
  --success-60: #889665;
  --success-70: #a2b17e;
  --success-80: #becd97;
  --success-90: #d9e9b1;
  --warning-10: #281800;
  --warning-20: #442c00;
  --warning-30: #614000;
  --warning-40: #805600;
  --warning-50: #a06d00;
  --warning-60: #c28500;
  --warning-70: #e29e20;
  --warning-80: #ffba44;
  --warning-90: #ffddaf;
  --info-10: #001944;
  --info-20: #002d6d;
  --info-30: #1f4489;
  --info-40: #3a5ca2;
  --info-50: #5575bd;
  --info-60: #6f8fd9;
  --info-70: #8aaaf6;
  --info-80: #afc6ff;
  --info-90: #d9e2ff;
  --neutral-4: #120d0c;
  --neutral-8: #1c1615;
  --neutral-12: #251e1d;
  --neutral-16: #2d2625;
  --neutral-20: #362f2e;
  --neutral-30: #4d4544;
  --neutral-40: #655c5b;
  --neutral-50: #7f7573;
  --neutral-60: #998e8d;
  --neutral-70: #b4a9a7;
  --neutral-80: #d0c4c2;
  --neutral-90: #ede0dd;
  --neutral-94: #f8ebe9;
  --neutral-98: #fff8f6;
  --black: #120d0c;
  --white: #fff8f6;
  --white-pure: #ffffff;
}
/* Semantic roles, dark theme */
:root, [data-theme="dark"] {
  --bg: var(--black);
  --surface: var(--neutral-8);
  --surface-raised: var(--neutral-12);
  --line: var(--neutral-20);
  --ink: var(--white);
  --ink-muted: var(--neutral-70);
  --primary: var(--brand-logo);
  --on-primary: var(--white-pure);
  --primary-text: var(--brand-60);
  --accent: var(--neutral-70);
  --band-bg: var(--deg-i-10);
  --on-band: var(--white-pure);
  --feature-bg: var(--deg-i-20);
  --on-feature: var(--white-pure);
  --channel-music: var(--deg-i-40);
  --channel-music-text: var(--deg-i-70);
  --channel-shows: var(--deg-iv-40);
  --channel-shows-text: var(--deg-iv-70);
  --channel-games: var(--deg-bvii-40);
  --channel-games-text: var(--deg-bvii-70);
  --channel-tech: var(--deg-biii-40);
  --channel-tech-text: var(--deg-biii-70);
  --channel-content: var(--deg-v-40);
  --channel-content-text: var(--deg-v-70);
  --channel-about: var(--brand-logo);
  --channel-about-text: var(--brand-60);
  --success-container: var(--success-20);
  --on-success-container: var(--success-90);
  --info-container: var(--info-10);
  --on-info-container: var(--info-90);
  --warning-container: var(--warning-20);
  --on-warning-container: var(--warning-90);
  --error-container: var(--deg-i-20);
  --on-error-container: var(--deg-i-90);
  --focus: var(--neutral-90);
  --on-channel: var(--white-pure);
}
/* Semantic roles, light theme */
[data-theme="light"] {
  --bg: var(--white);
  --surface: var(--neutral-94);
  --surface-raised: var(--neutral-90);
  --line: var(--neutral-80);
  --ink: var(--black);
  --ink-muted: var(--neutral-40);
  --primary: var(--brand-40);
  --on-primary: var(--white-pure);
  --primary-text: var(--brand-40);
  --accent: var(--neutral-40);
  --band-bg: var(--deg-i-30);
  --on-band: var(--white-pure);
  --feature-bg: var(--deg-i-30);
  --on-feature: var(--white-pure);
  --channel-music: var(--deg-i-40);
  --channel-music-text: var(--deg-i-40);
  --channel-shows: var(--deg-iv-40);
  --channel-shows-text: var(--deg-iv-40);
  --channel-games: var(--deg-bvii-40);
  --channel-games-text: var(--deg-bvii-40);
  --channel-tech: var(--deg-biii-40);
  --channel-tech-text: var(--deg-biii-40);
  --channel-content: var(--deg-v-40);
  --channel-content-text: var(--deg-v-40);
  --channel-about: var(--brand-40);
  --channel-about-text: var(--brand-40);
  --success-container: var(--success-90);
  --on-success-container: var(--success-20);
  --info-container: var(--info-90);
  --on-info-container: var(--info-20);
  --warning-container: var(--warning-90);
  --on-warning-container: var(--warning-20);
  --error-container: var(--deg-i-90);
  --on-error-container: var(--deg-i-20);
  --focus: var(--info-40);
  --on-channel: var(--white-pure);
}
/* Component tokens */
:root, [data-theme] {
  --halftone-bg: var(--feature-bg);
  --halftone-dot: var(--primary);
}
/* Channels: components read --channel and --channel-text from the nearest data-channel. */
[data-channel="music"] { --channel: var(--channel-music); --channel-text: var(--channel-music-text); }
[data-channel="shows"] { --channel: var(--channel-shows); --channel-text: var(--channel-shows-text); }
[data-channel="games"] { --channel: var(--channel-games); --channel-text: var(--channel-games-text); }
[data-channel="tech"] { --channel: var(--channel-tech); --channel-text: var(--channel-tech-text); }
[data-channel="content"] { --channel: var(--channel-content); --channel-text: var(--channel-content-text); }
[data-channel="about"] { --channel: var(--channel-about); --channel-text: var(--channel-about-text); }
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-0: 0px;
  --radius-pill: 9999px;
  --cut-s: 8px;
  --cut-m: 12px;
  --cut-l: 22px;
  --font-display: "Saira Condensed", "Arial Narrow", sans-serif;
  --font-sub: Barlow, "Helvetica Neue", Arial, sans-serif;
  --font-nav: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", Verdana, sans-serif;
}
/* Type styles */
.display-xl { font-family: var(--font-display); font-size: 112px; line-height: 0.9; font-weight: 900; }
.display-l { font-family: var(--font-display); font-size: 84px; line-height: 0.9; font-weight: 900; }
.display-m { font-family: var(--font-display); font-size: 64px; line-height: 0.9; font-weight: 900; }
.display-s { font-family: var(--font-display); font-size: 36px; line-height: 0.95; font-weight: 900; }
.label { font-family: var(--font-display); font-size: 15px; line-height: 1.2; font-weight: 800; letter-spacing: 0.14em; }
.eyebrow { font-family: var(--font-display); font-size: 13px; line-height: 1.2; font-weight: 800; letter-spacing: 0.24em; }
.subtitle-l { font-family: var(--font-sub); font-size: 24px; line-height: 1.25; font-weight: 600; }
.subtitle { font-family: var(--font-sub); font-size: 20px; line-height: 1.3; font-weight: 600; }
.nav { font-family: var(--font-nav); font-size: 16px; line-height: 1.2; font-weight: 600; letter-spacing: 0.12em; }
.lead { font-family: var(--font-body); font-size: 18px; line-height: 1.6; font-weight: 400; }
.body { font-family: var(--font-body); font-size: 16px; line-height: 1.65; font-weight: 400; }
.small { font-family: var(--font-body); font-size: 14px; line-height: 1.5; font-weight: 400; }
/* Motion: note values at 120 BPM, then roles and easing */
:root {
  --tempo-bpm: 120;
  --note-sixteenth: 125ms;
  --note-eighth: 250ms;
  --note-quarter: 500ms;
  --note-half: 1000ms;
  --note-bar: 2000ms;
  --duration-feedback: var(--note-sixteenth);
  --duration-strum: var(--note-sixteenth);
  --duration-state: var(--note-eighth);
  --duration-exit: var(--note-eighth);
  --duration-enter: var(--note-quarter);
  --duration-page: var(--note-half);
  --duration-intro: var(--note-bar);
  --ease-attack: cubic-bezier(0.2, 0, 0, 1);
  --ease-release: cubic-bezier(0.4, 0, 1, 1);
  --ease-swell: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-sustain: linear;
  --ease-hit: cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Layout grid: columns follow the meter (4/4 mobile, eighths on tablet, 12/8 on desktop) */
:root { --grid-columns: 4; --grid-gutter: var(--space-4); --grid-margin: var(--space-4); --content-max: 1280px; }
@media (min-width: 760px) { :root { --grid-columns: 8; --grid-gutter: var(--space-5); --grid-margin: var(--space-6); } }
@media (min-width: 1120px) { :root { --grid-columns: 12; --grid-gutter: var(--space-6); --grid-margin: var(--space-8); } }
/* Reduced motion: movement stops; color and opacity feedback stays */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-strum: 0ms;
    --duration-exit: 0ms;
    --duration-enter: 0ms;
    --duration-page: 0ms;
    --duration-intro: 0ms;
  }
}