/* Copied from lms-app/app/src/styles/tokens.css by tools/learn_site.py — edit the app, not this. */ /* Axelerate Learn — the theme is these two token blocks, nothing else. The design is Axelerate Ear v1.4's (ear/ui/style.css): the SAME token names, so every component ported from the Ear works unchanged. Only the values differ — the LMS blue from lms/src/index.css: accent #003DFF, deep #0036BC, soft #EAF0FF, ink #0B1F6B, highlight #FFE600. Where the Ear is warm (yellow-washed paper, a blue→violet gradient), this app is cool: blue-white paper washed with the soft blue, navy ink, a pure blue gradient, and the yellow kept to the 10% the brand allows — the hatched featured edge, the highlight medallion, one warm light. Every colour the Ear hard-coded outside its token blocks (the conic ring, the glows, the medallions, the hero lights, the dark menu fill, the mark) is a token here (handoff §3). Light is the default. data-theme on is always set by src/theme.ts (system until the person chooses), so there is exactly one dark block. */ @property --orbit { syntax: ''; initial-value: 0deg; inherits: false; } :root, :root[data-theme='light'] { color-scheme: light; --paper: #f3f6ff; --glass: rgba(255, 255, 255, 0.6); --glass-2: rgba(255, 255, 255, 0.78); --glass-3: rgba(255, 255, 255, 0.94); --edge: rgba(11, 31, 107, 0.08); --edge-2: rgba(11, 31, 107, 0.15); --hl: rgba(255, 255, 255, 0.95); --ink: #0b1f6b; --mid: #2b3a78; --soft: #58648f; --faint: #8a93b6; --ghost: #c5cbe2; --accent: #003dff; --accent-2: #0036bc; --accent-soft: rgba(0, 61, 255, 0.07); --accent-dim: rgba(0, 61, 255, 0.16); --grad: linear-gradient(135deg, #3a6bff 0%, #003dff 52%, #0036bc 100%); --hi: #ffe600; --hi-ink: #1b1700; --hi-soft: rgba(255, 230, 0, 0.3); --ok: #12a150; --danger: #d92d20; --warn: #e8590c; --feature: #0b1a55; --feature-ink: #f3f6ff; --feature-soft: rgba(243, 246, 255, 0.66); --feature-base: #0b1a55; --feature-img: linear-gradient(160deg, #15287e, #081243); --hatch: repeating-linear-gradient(135deg, var(--hi) 0 5px, transparent 5px 11px); --shadow: 0 1px 0 var(--hl) inset, 0 18px 40px -24px rgba(11, 31, 107, 0.3); --shadow-lift: 0 1px 0 var(--hl) inset, 0 28px 54px -26px rgba(11, 31, 107, 0.42); --glow: 0 14px 32px -12px rgba(0, 61, 255, 0.55); --bgimg: radial-gradient(880px 520px at 106% -12%, rgba(0, 61, 255, 0.2), transparent 62%), radial-gradient(620px 460px at -14% 106%, rgba(255, 230, 0, 0.2), transparent 62%), radial-gradient(520px 380px at 58% 122%, rgba(0, 54, 188, 0.12), transparent 60%), linear-gradient(165deg, #fbfcff 0%, #eaf0ff 100%); --grid: rgba(11, 31, 107, 0.03); /* the colours the Ear had hard-coded outside its tokens (handoff §3) */ --glow-rgb: 0, 61, 255; /* the stops only: the angle must be read where the animation runs, not baked in here at :root */ --ring-stops: #ffe600, #6ea4ff 25%, #eaf0ff 50%, #003dff 75%, #ffe600; --medal-hi: linear-gradient(135deg, #ffe600, #ffc400); --medal-hi-glow: rgba(255, 196, 0, 0.8); --medal-sky: linear-gradient(135deg, #4fa3ff, #003dff); --medal-deep: linear-gradient(135deg, #2c4bd1, #0b1f6b); --hero-a: #003dff; --hero-a-op: 0.2; --hero-b: #ffe600; --hero-b-op: 0.36; --menu-fill: var(--glass-3); --dialog-fill: var(--glass-3); --toast-fill: rgba(9, 20, 70, 0.93); --scrim: rgba(5, 12, 45, 0.45); --mark-glow: rgba(0, 61, 255, 0.65); --ok-glow: rgba(18, 161, 80, 0.18); --seg-on: var(--glass-3); --feat-shadow: 0 34px 60px -30px rgba(8, 18, 67, 0.72); --banner: linear-gradient(120deg, #003dff 0%, #0036bc 55%, #0b1f6b 100%); --skeleton: rgba(11, 31, 107, 0.07); --skeleton-sheen: rgba(255, 255, 255, 0.7); --ramp-1: #c7d6ff; --ramp-2: #8eaaff; --ramp-3: #4f7bff; --ramp-4: #003dff; --ramp-5: #0036bc; } :root[data-theme='dark'] { color-scheme: dark; --paper: #040a26; --glass: rgba(255, 255, 255, 0.045); --glass-2: rgba(255, 255, 255, 0.075); --glass-3: rgba(255, 255, 255, 0.12); --edge: rgba(255, 255, 255, 0.085); --edge-2: rgba(255, 255, 255, 0.15); --hl: rgba(255, 255, 255, 0.09); --ink: #eef2ff; --mid: #c6cff2; --soft: #8f9bcb; --faint: #6873a3; --ghost: #3c4677; --accent: #6b92ff; --accent-2: #3d6bff; --accent-soft: rgba(107, 146, 255, 0.12); --accent-dim: rgba(107, 146, 255, 0.24); --grad: linear-gradient(135deg, #3d6bff 0%, #003dff 55%, #0036bc 100%); --hi: #ffe600; --hi-ink: #1b1700; --hi-soft: rgba(255, 230, 0, 0.15); --ok: #35d883; --danger: #ff6a70; --warn: #ff8a3d; --feature: linear-gradient(160deg, rgba(0, 61, 255, 0.38), rgba(0, 54, 188, 0.22) 60%, rgba(255, 255, 255, 0.05)); --feature-ink: #f4f6ff; --feature-soft: rgba(238, 242, 255, 0.7); --feature-base: #0a1550; --feature-img: linear-gradient(160deg, rgba(0, 61, 255, 0.42), rgba(0, 54, 188, 0.24) 60%, rgba(255, 255, 255, 0.04)); --shadow: 0 1px 0 var(--hl) inset, 0 24px 48px -26px rgba(0, 0, 0, 0.75); --shadow-lift: 0 1px 0 var(--hl) inset, 0 32px 60px -26px rgba(0, 0, 0, 0.85); --glow: 0 14px 38px -10px rgba(61, 107, 255, 0.7); --bgimg: radial-gradient(760px 520px at -10% -14%, rgba(0, 61, 255, 0.5), transparent 62%), radial-gradient(700px 540px at 112% 114%, rgba(0, 54, 188, 0.42), transparent 62%), radial-gradient(460px 340px at 88% -8%, rgba(255, 230, 0, 0.08), transparent 60%), linear-gradient(180deg, #030820 0%, #07103a 100%); --grid: rgba(255, 255, 255, 0.035); --glow-rgb: 61, 107, 255; --ring-stops: #ffe600, #6ea4ff 25%, #c9d8ff 50%, #3d6bff 75%, #ffe600; --medal-hi: linear-gradient(135deg, #ffe600, #ffc400); --medal-hi-glow: rgba(255, 196, 0, 0.7); --medal-sky: linear-gradient(135deg, #4fa3ff, #1f4dff); --medal-deep: linear-gradient(135deg, #3354e0, #16287a); --hero-a: #3d6bff; --hero-a-op: 0.55; --hero-b: #4fa3ff; --hero-b-op: 0.26; --menu-fill: rgba(10, 18, 62, 0.97); --dialog-fill: rgba(10, 18, 62, 0.97); --toast-fill: rgba(9, 16, 56, 0.95); --scrim: rgba(2, 5, 22, 0.6); --mark-glow: rgba(61, 107, 255, 0.6); --ok-glow: rgba(53, 216, 131, 0.2); --seg-on: rgba(255, 255, 255, 0.16); --feat-shadow: 0 34px 60px -30px rgba(0, 0, 0, 0.8); --banner: linear-gradient(120deg, #1f4dff 0%, #0036bc 55%, #0a1550 100%); --skeleton: rgba(255, 255, 255, 0.06); --skeleton-sheen: rgba(255, 255, 255, 0.1); --ramp-1: #16287a; --ramp-2: #1f3fb8; --ramp-3: #3d6bff; --ramp-4: #6b92ff; --ramp-5: #c7d6ff; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']){ color-scheme: dark; --paper: #040a26; --glass: rgba(255, 255, 255, 0.045); --glass-2: rgba(255, 255, 255, 0.075); --glass-3: rgba(255, 255, 255, 0.12); --edge: rgba(255, 255, 255, 0.085); --edge-2: rgba(255, 255, 255, 0.15); --hl: rgba(255, 255, 255, 0.09); --ink: #eef2ff; --mid: #c6cff2; --soft: #8f9bcb; --faint: #6873a3; --ghost: #3c4677; --accent: #6b92ff; --accent-2: #3d6bff; --accent-soft: rgba(107, 146, 255, 0.12); --accent-dim: rgba(107, 146, 255, 0.24); --grad: linear-gradient(135deg, #3d6bff 0%, #003dff 55%, #0036bc 100%); --hi: #ffe600; --hi-ink: #1b1700; --hi-soft: rgba(255, 230, 0, 0.15); --ok: #35d883; --danger: #ff6a70; --warn: #ff8a3d; --feature: linear-gradient(160deg, rgba(0, 61, 255, 0.38), rgba(0, 54, 188, 0.22) 60%, rgba(255, 255, 255, 0.05)); --feature-ink: #f4f6ff; --feature-soft: rgba(238, 242, 255, 0.7); --feature-base: #0a1550; --feature-img: linear-gradient(160deg, rgba(0, 61, 255, 0.42), rgba(0, 54, 188, 0.24) 60%, rgba(255, 255, 255, 0.04)); --shadow: 0 1px 0 var(--hl) inset, 0 24px 48px -26px rgba(0, 0, 0, 0.75); --shadow-lift: 0 1px 0 var(--hl) inset, 0 32px 60px -26px rgba(0, 0, 0, 0.85); --glow: 0 14px 38px -10px rgba(61, 107, 255, 0.7); --bgimg: radial-gradient(760px 520px at -10% -14%, rgba(0, 61, 255, 0.5), transparent 62%), radial-gradient(700px 540px at 112% 114%, rgba(0, 54, 188, 0.42), transparent 62%), radial-gradient(460px 340px at 88% -8%, rgba(255, 230, 0, 0.08), transparent 60%), linear-gradient(180deg, #030820 0%, #07103a 100%); --grid: rgba(255, 255, 255, 0.035); --glow-rgb: 61, 107, 255; --ring-stops: #ffe600, #6ea4ff 25%, #c9d8ff 50%, #3d6bff 75%, #ffe600; --medal-hi: linear-gradient(135deg, #ffe600, #ffc400); --medal-hi-glow: rgba(255, 196, 0, 0.7); --medal-sky: linear-gradient(135deg, #4fa3ff, #1f4dff); --medal-deep: linear-gradient(135deg, #3354e0, #16287a); --hero-a: #3d6bff; --hero-a-op: 0.55; --hero-b: #4fa3ff; --hero-b-op: 0.26; --menu-fill: rgba(10, 18, 62, 0.97); --dialog-fill: rgba(10, 18, 62, 0.97); --toast-fill: rgba(9, 16, 56, 0.95); --scrim: rgba(2, 5, 22, 0.6); --mark-glow: rgba(61, 107, 255, 0.6); --ok-glow: rgba(53, 216, 131, 0.2); --seg-on: rgba(255, 255, 255, 0.16); --feat-shadow: 0 34px 60px -30px rgba(0, 0, 0, 0.8); --banner: linear-gradient(120deg, #1f4dff 0%, #0036bc 55%, #0a1550 100%); --skeleton: rgba(255, 255, 255, 0.06); --skeleton-sheen: rgba(255, 255, 255, 0.1); --ramp-1: #16287a; --ramp-2: #1f3fb8; --ramp-3: #3d6bff; --ramp-4: #6b92ff; --ramp-5: #c7d6ff; } }