/* The Webcam Show - tokens del design system, compilados desde tokens.json.
   GENERADO: no editar a mano. Cambiar el token en el sistema y recompilar. */
@font-face{font-family:'Archivo';src:url('../fonts/Archivo-Variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('../fonts/Newsreader-Variable.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('../fonts/Newsreader-Variable-Italic.woff2') format('woff2');font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/IBMPlexMono-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
:root,[data-theme="dark"]{--surface-base:#0a0f1e;--surface-raised:#121a2d;--surface-overlay:#1b2540;--surface-sunken:#060a14;--surface-inverse:#f1f5fc;--ink-primary:#f1f5fc;--ink-secondary:#aab6cf;--ink-muted:#8593ad;--ink-inverse:#05101f;--brand:#3d8dff;--brand-hover:#62a3ff;--brand-vivid:#006efe;--brand-deep:#003187;--on-brand-deep:#f1f5fc;--brand-soft:#0f2547;--brand-border:#1e4a8f;--on-brand:#05101f;--accent:#fec402;--accent-soft:#2d2405;--accent-ink:#fec402;--on-accent:#171200;--live:#35cdf5;--live-soft:#08293a;--on-live:#05101f;--success:#5fe3a5;--success-soft:#06251a;--warning:#f6a21a;--warning-soft:#2b1d05;--danger:#f4636b;--danger-soft:#2b0f13;--border-subtle:#1e2740;--border-default:#2c3854;--border-strong:#63738f;--focus-ring:#5aa2ff;--scrim:rgba(4, 7, 16, 0.78);--shadow-xs:0 1px 2px rgba(0, 0, 0, 0.55);--shadow-sm:0 2px 8px rgba(0, 0, 0, 0.5);--shadow-md:0 8px 24px rgba(0, 0, 0, 0.55);--shadow-lg:0 18px 48px rgba(0, 0, 0, 0.65);--shadow-glow:0 0 0 1px rgba(61, 141, 255, 0.4), 0 10px 36px rgba(0, 110, 254, 0.32)}
[data-theme="light"]{--surface-base:#ffffff;--surface-raised:#f5f8fd;--surface-overlay:#ffffff;--surface-sunken:#eaeff7;--surface-inverse:#0a0f1e;--ink-primary:#0a0f1e;--ink-secondary:#44506b;--ink-muted:#5c6880;--ink-inverse:#ffffff;--brand:#0057d6;--brand-hover:#0046ad;--brand-vivid:#006efe;--brand-deep:#003187;--on-brand-deep:#f1f5fc;--brand-soft:#e7f0ff;--brand-border:#a9caff;--on-brand:#ffffff;--accent:#fec402;--accent-soft:#fff4d1;--accent-ink:#8a5a00;--on-accent:#171200;--live:#026d92;--live-soft:#e0f5fd;--on-live:#ffffff;--success:#0f7a47;--success-soft:#e3f7ec;--warning:#9a4a00;--warning-soft:#fdf0e0;--danger:#a4161a;--danger-soft:#fdeaea;--border-subtle:#e4e9f2;--border-default:#cbd4e3;--border-strong:#737f98;--focus-ring:#0057d6;--scrim:rgba(10, 15, 30, 0.55);--shadow-xs:0 1px 2px rgba(10, 15, 30, 0.07);--shadow-sm:0 2px 8px rgba(10, 15, 30, 0.08);--shadow-md:0 8px 24px rgba(10, 15, 30, 0.1);--shadow-lg:0 18px 48px rgba(10, 15, 30, 0.16);--shadow-glow:0 0 0 1px rgba(0, 87, 214, 0.22), 0 10px 32px rgba(0, 110, 254, 0.22)}
:root{--space-05:2px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--radius-xs:4px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-2xl:28px;--radius-pill:999px;--opacity-disabled:0.45;--opacity-scrim-soft:0.72;--opacity-hairline:0.14;--font-display:"Archivo", "Helvetica Neue", Arial, sans-serif;--font-sans:"Archivo", "Helvetica Neue", Arial, sans-serif;--font-serif:"Newsreader", Georgia, "Times New Roman", serif;--font-mono:"IBM Plex Mono", ui-monospace, Menlo, monospace}
.display-xl{font-family:var(--font-display);font-size:64px;line-height:60px;font-weight:800;letter-spacing:-0.025em}
.display-lg{font-family:var(--font-display);font-size:48px;line-height:48px;font-weight:800;letter-spacing:-0.02em}
.display-md{font-family:var(--font-display);font-size:36px;line-height:40px;font-weight:700;letter-spacing:-0.015em}
.h1{font-family:var(--font-sans);font-size:32px;line-height:38px;font-weight:700;letter-spacing:-0.015em}
.h2{font-family:var(--font-sans);font-size:26px;line-height:32px;font-weight:700;letter-spacing:-0.01em}
.h3{font-family:var(--font-sans);font-size:21px;line-height:28px;font-weight:600}
.h4{font-family:var(--font-sans);font-size:18px;line-height:24px;font-weight:600}
.h5{font-family:var(--font-sans);font-size:16px;line-height:22px;font-weight:600}
.article-lead{font-family:var(--font-serif);font-size:21px;line-height:32px;font-weight:400}
.article-body{font-family:var(--font-serif);font-size:18px;line-height:30px;font-weight:400}
.article-body-sm{font-family:var(--font-serif);font-size:16px;line-height:27px;font-weight:400}
.article-quote{font-family:var(--font-serif);font-size:24px;line-height:34px;font-weight:500;font-style:italic}
.ui-lg{font-family:var(--font-sans);font-size:17px;line-height:26px;font-weight:500}
.ui-md{font-family:var(--font-sans);font-size:15px;line-height:22px;font-weight:500}
.ui-sm{font-family:var(--font-sans);font-size:13px;line-height:20px;font-weight:500}
.ui-xs{font-family:var(--font-sans);font-size:12px;line-height:16px;font-weight:600}
.button{font-family:var(--font-sans);font-size:15px;line-height:20px;font-weight:600;letter-spacing:0.005em}
.label{font-family:var(--font-sans);font-size:13px;line-height:18px;font-weight:600}
.kicker{font-family:var(--font-sans);font-size:12px;line-height:16px;font-weight:700;letter-spacing:0.12em}
.meta{font-family:var(--font-sans);font-size:13px;line-height:18px;font-weight:500}
.mono-sm{font-family:var(--font-mono);font-size:13px;line-height:20px;font-weight:400}
.mono-xs{font-family:var(--font-mono);font-size:12px;line-height:16px;font-weight:500;letter-spacing:0.02em}