/* ============================================================================ CFlix — cinematic-glass design system ---------------------------------------------------------------------------- Everything is built on tokens (spacing / radius / type / elevation / glass). Dark is the default palette; [data-theme="light"] overrides colour + glass tokens only. An inline guard sets data-theme before first paint; theme.js owns the auto|light|dark preference + toggle UI. ========================================================================= */ :root{ color-scheme: dark; /* ----- colour ----- */ --bg:#0b0e14; --panel:#161b22; --panel2:#1c2330; --border:#293040; --text:#e6edf3; --muted:#9aa4b2; --dim:#6e7681; --accent:#58a6ff; --accent2:#7ee787; --up:#3fb950; --down:#f85149; --wait:#d29922; --bg-glow-1:#12203a; --bg-glow-2:#1a1230; --scrim-rgb:11,14,20; --err-text:#ffb4ad; --ok-text:#8ff0a4; --warn-text:#f0d18a; --on-accent:#08111f; /* ----- glass ----- */ --glass-bg:rgba(22,27,34,.62); --glass-brd:rgba(255,255,255,.09); --glass-hi:rgba(255,255,255,.14); /* hover border */ --glass-blur:16px; --field-bg:rgba(10,13,20,.55); /* ----- status glows ----- */ --glow-up:0 0 26px rgba(63,185,80,.32); --glow-wait:0 0 26px rgba(210,153,34,.28); --glow-down:0 0 26px rgba(248,81,73,.28); --up-rgb:63,185,80; --down-rgb:248,81,73; --wait-rgb:210,153,34; --accent-rgb:88,166,255; /* ----- elevation ----- */ --sh-1:0 1px 2px rgba(0,0,0,.35); --sh-2:0 8px 24px rgba(0,0,0,.38); --sh-3:0 20px 48px rgba(0,0,0,.48); /* ----- spacing scale ----- */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; /* ----- radius scale ----- */ --rad-sm:10px; --rad-md:14px; --rad-lg:20px; --rad-pill:999px; /* ----- type scale ----- */ --fs-cap:12px; --fs-sm:13px; --fs-base:15px; --fs-md:17px; --fs-lg:22px; --fs-xl:30px; --fs-2xl:42px; --fw-normal:400; --fw-medium:500; --fw-semibold:650; --mono:'SFMono-Regular',ui-monospace,'JetBrains Mono','Cascadia Code',Menlo,Consolas,monospace; --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; } [data-theme="light"]{ color-scheme: light; --bg:#eef1f6; --panel:#ffffff; --panel2:#eef1f5; --border:#d0d7de; --text:#1f2328; --muted:#57606a; --dim:#818b98; --accent:#0969da; --accent2:#1a7f37; --up:#1a7f37; --down:#cf222e; --wait:#9a6700; --bg-glow-1:#dbe7fb; --bg-glow-2:#eadef7; --scrim-rgb:238,241,246; --err-text:#b3261e; --ok-text:#1a7f37; --warn-text:#7a5c00; --on-accent:#ffffff; --glass-bg:rgba(255,255,255,.72); --glass-brd:rgba(20,30,50,.10); --glass-hi:rgba(20,30,50,.22); --field-bg:rgba(255,255,255,.85); --glow-up:0 0 22px rgba(26,127,55,.20); --glow-wait:0 0 22px rgba(154,103,0,.18); --glow-down:0 0 22px rgba(207,34,46,.18); --up-rgb:26,127,55; --down-rgb:207,34,46; --wait-rgb:154,103,0; --accent-rgb:9,105,218; --sh-1:0 1px 2px rgba(20,30,50,.06); --sh-2:0 8px 24px rgba(20,30,50,.10); --sh-3:0 20px 48px rgba(20,30,50,.16); } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ background:var(--bg); background-image:radial-gradient(circle at 18% -12%,var(--bg-glow-1) 0%,transparent 46%), radial-gradient(circle at 92% 0%,var(--bg-glow-2) 0%,transparent 42%); background-attachment:fixed; color:var(--text); font-family:var(--sans); min-height:100vh; padding:var(--sp-6) var(--sp-5) var(--sp-7); line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .wrap{max-width:1080px;margin:0 auto;position:relative;z-index:1} .wrap.narrow{max-width:760px} a{color:var(--accent)} /* ---------- accessibility utility ---------- */ /* Visually hidden but present for assistive tech (e.g. a