/* ============================================================================
   ITRUST DESIGN SYSTEM
   docs/premium-v2/01-DESIGN-LANGUAGE.md

   One file, no build step, no framework. Loaded by every page.

   It is written as a system rather than a stylesheet: tokens first, then
   primitives, then components. Nothing here targets a page.
   ========================================================================= */

/* ── 1. TOKENS ───────────────────────────────────────────────────────────
   Accent-derived values are injected as --accent-rgb by PHP, so the whole
   system re-skins from one admin field without color-mix(), which fails
   silently where it is unsupported and takes every tinted surface with it. */

:root {
    /* Two accents, not one. `--accent-fill` is the brand colour as-is, used
       for solid backgrounds where dark ink sits on top. `--accent` is what
       text, links, icons and borders use.

       In dark mode they are the same value. In light mode they are not: the
       default lime measures 1.26:1 on white, and no amount of good layout
       rescues text nobody can read. Both are computed in PHP from the single
       primary_color setting, so an administrator still configures one colour.
       See docs/premium-v2/07-LIGHT-MODE.md. */
    --accent-rgb: 200, 245, 69;
    --accent-deep-rgb: 90, 110, 31;
    --accent:      rgb(var(--accent-rgb));
    --accent-fill: rgb(var(--accent-rgb));
    --accent-04:   rgba(var(--accent-rgb), .04);
    --accent-08:   rgba(var(--accent-rgb), .08);
    --accent-14:   rgba(var(--accent-rgb), .14);
    --accent-24:   rgba(var(--accent-rgb), .24);
    --accent-40:   rgba(var(--accent-rgb), .40);
    --accent-ink:  #08120A;

    /* Surfaces. Six steps with visible daylight between them — the previous
       palette moved four points of blue across the entire interface, which is
       why everything read as one flat plane. */
    --s0: #05070C;   /* page, deepest */
    --s1: #0A0E17;   /* recessed */
    --s2: #111725;   /* card */
    --s3: #18202F;   /* raised */
    --s4: #212A3D;   /* overlay */
    --s5: #2C374E;   /* hover */

    /* Hairlines. .06 alpha on a dark screen is invisible on most displays,
       which is why the old cards read as flat rectangles. */
    --line:   rgba(255,255,255,.09);
    --line-2: rgba(255,255,255,.16);
    --line-3: rgba(255,255,255,.26);

    --ink:   #FFFFFF;
    --ink-2: #C2CCDC;
    --ink-3: #8391A8;
    --ink-4: #5A6779;

    --ok: #34E29B;   --ok-bg: rgba(52,226,155,.13);   --ok-line: rgba(52,226,155,.28);
    --up: #FFC94A;   --up-bg: rgba(255,201,74,.13);   --up-line: rgba(255,201,74,.28);
    --no: #FF6B75;   --no-bg: rgba(255,107,117,.13);  --no-line: rgba(255,107,117,.28);
    --in: #5AA2FF;   --in-bg: rgba(90,162,255,.13);   --in-line: rgba(90,162,255,.28);

    /* ── Fluid type ──────────────────────────────────────────────────────
       clamp() everywhere, so a heading is proportionate on a phone and on a
       27-inch display without a single breakpoint. Tracking tightens as size
       grows: this is what stops large text looking like enlarged body copy. */
    --t-xs:   0.75rem;
    --t-sm:   0.8125rem;
    --t-base: 0.9375rem;
    --t-md:   clamp(1rem,     0.96rem + 0.20vw, 1.125rem);
    --t-lg:   clamp(1.125rem, 1.05rem + 0.36vw, 1.375rem);
    --t-xl:   clamp(1.375rem, 1.22rem + 0.75vw, 1.875rem);
    --t-2xl:  clamp(1.75rem,  1.45rem + 1.45vw, 2.75rem);
    --t-3xl:  clamp(2.25rem,  1.70rem + 2.70vw, 4rem);
    --t-4xl:  clamp(2.75rem,  1.90rem + 4.20vw, 5.5rem);

    /* ── Space: 8-point, fluid at the large end ───────────────────────── */
    --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
    --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
    --sp-12: 48px; --sp-16: 64px;
    --sp-section: clamp(72px, 4rem + 6vw, 160px);
    --sp-gutter:  clamp(20px, 1rem + 2vw, 40px);

    --r-1: 8px; --r-2: 12px; --r-3: 16px; --r-4: 22px; --r-5: 28px; --r-full: 999px;

    /* ── Elevation with light direction ───────────────────────────────────
       Three stacked shadows plus an inner top highlight. A single shadow
       reads as a sticker; this reads as an object under a light source. */
    --e1: 0 1px 2px rgba(0,0,0,.4);
    --e2: 0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.32), 0 12px 32px rgba(0,0,0,.28);
    --e3: 0 2px 4px rgba(0,0,0,.32), 0 12px 28px rgba(0,0,0,.4),  0 32px 64px rgba(0,0,0,.4);
    --e4: 0 4px 8px rgba(0,0,0,.36), 0 24px 48px rgba(0,0,0,.48), 0 60px 120px rgba(0,0,0,.5);
    --lit: inset 0 1px 0 rgba(255,255,255,.10);

    /* ── Motion ───────────────────────────────────────────────────────────
       Spring easing on anything a person initiates; linear-ish on anything
       ambient. The overshoot is what makes an interface feel responsive
       rather than merely animated. */
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --ease-out:    cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --d-1: 140ms; --d-2: 240ms; --d-3: 400ms; --d-4: 700ms;

    --maxw: 1220px;
    --maxw-prose: 68ch;
}

/* ── 1b. COMPATIBILITY ALIASES ───────────────────────────────────────────
   Older names, kept until every page is rewritten against the current tokens.

   These previously lived in the app shell's inline block, which meant any page
   NOT loading that shell — the auth pages, the standalone error pages — had
   nine undefined variables and rendered surfaces and borders as nothing at all.
   Defining them here means every page sees them, whatever shell it uses.

   Each line is deletable once no markup references it. */
:root {
    --bg:            var(--s0);
    --surface-1:     var(--s1);
    --surface-2:     var(--s2);
    --surface-3:     var(--s3);
    --surface-4:     var(--s4);
    --line-strong:   var(--line-2);

    --accent-soft:   var(--accent-14);
    --accent-line:   var(--accent-24);
    --accent-glow:   var(--accent-40);

    --ok-soft:       var(--ok-bg);   --ok-border:     var(--ok-line);
    --warn:          var(--up);      --warn-soft:     var(--up-bg);   --warn-border: var(--up-line);
    --danger:        var(--no);      --danger-soft:   var(--no-bg);   --danger-border: var(--no-line);
    --info:          var(--in);      --info-soft:     var(--in-bg);   --info-border: var(--in-line);
    --muted-soft:    rgba(128,128,128,.10);  --muted-border: var(--line);

    --r-sm: var(--r-1); --r-md: var(--r-2); --r-lg: var(--r-3); --r-xl: var(--r-4);
    --fast: var(--d-1); --base: var(--d-2); --slow: var(--d-3);
    --ease-spring-alias: var(--ease-spring);
}

/* ── 2. RESET ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    font-family: 'DM Sans', 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: var(--t-base);
    line-height: 1.6;
    color: var(--ink-2);
    background: var(--s0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    font-feature-settings: 'cv11' 1, 'ss01' 1;
}

/* Film grain. Two lines of CSS, and it is most of the difference between a
   surface that looks like plastic and one that looks like a material. */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: 1;
    pointer-events: none; opacity: .35;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

::selection { background: var(--accent-24); color: var(--ink); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--r-1);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--s0); }
::-webkit-scrollbar-thumb {
    background: var(--s4); border-radius: var(--r-full);
    border: 3px solid var(--s0);
}
::-webkit-scrollbar-thumb:hover { background: var(--s5); }

/* ── 3. TYPE ──────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
    color: var(--ink);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.022em;
    text-wrap: balance;
}
h1 { font-size: var(--t-4xl); font-weight: 800; letter-spacing: -0.042em; line-height: 0.98; }
h2 { font-size: var(--t-3xl); font-weight: 800; letter-spacing: -0.034em; line-height: 1.04; }
h3 { font-size: var(--t-xl);  letter-spacing: -0.026em; }
h4 { font-size: var(--t-lg);  letter-spacing: -0.02em; }
h5 { font-size: var(--t-md); }

p { text-wrap: pretty; }
p a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.display  { font-size: var(--t-4xl); font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; }
.lede     { font-size: var(--t-md); color: var(--ink-2); max-width: 58ch; line-height: 1.62; }
.eyebrow  {
    font-size: var(--t-xs); font-weight: 700; letter-spacing: .18em;
    text-transform: uppercase; color: var(--accent);
}
.muted    { color: var(--ink-3); }
.prose    { max-width: var(--maxw-prose); }

/* Figures line up in a column and do not jitter as they change. The single
   most useful typographic detail in a financial interface. */
.num, .money, table td, table th {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}
.money { font-weight: 700; letter-spacing: -0.015em; }

/* A gradient headline, used once per page at most. */
.grad {
    background: linear-gradient(120deg, var(--ink) 20%, var(--accent) 65%, var(--ink) 95%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ── 4. LAYOUT ────────────────────────────────────────────────────────── */
.shell   { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sp-gutter); }
.shell-w { max-width: 1440px; }
.shell-n { max-width: 880px; }

.section       { padding-block: var(--sp-section); position: relative; }
.section-tight { padding-block: clamp(48px, 3rem + 3vw, 96px); }

/* A recessed band, with hairlines that fade at the edges rather than running
   hard across the viewport. */
.band { background: var(--s1); position: relative; }
.band::before, .band::after {
    content: ''; position: absolute; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-2) 15%, var(--line-2) 85%, transparent);
}
.band::before { top: 0; } .band::after { bottom: 0; }

.stack   > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-8); }

/* 20px left cards nearly touching, which reads as a table rather than a set of
   distinct things. Gap scales with the viewport like the padding does. */
.grid { display: grid; gap: clamp(16px, .8rem + .8vw, 28px); }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
/* 260px produced four columns at desktop width, each so narrow that body text
   wrapped every three words. 300px was better but wrapped four items as 3 + 1,
   leaving a lone card on its own row — worse than either. `auto-fit` with a
   width that divides evenly into both 2 and 4 avoids the orphan. */
.g-auto { grid-template-columns: repeat(auto-fit, minmax(min(268px,100%), 1fr)); }

/* An explicit 4-up that becomes 2-up rather than 3 + 1. */
.g-4-even { display: grid; gap: clamp(16px, .8rem + .8vw, 28px); grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1080px) { .g-4-even { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px)  { .g-4-even { grid-template-columns: 1fr; } }

/* Bento: a deliberately uneven grid. Equal boxes in a row read as a template;
   uneven ones read as considered. */
.bento { display: grid; gap: clamp(16px, .8rem + .8vw, 28px); grid-template-columns: repeat(6, 1fr); }
.bento > .b-3 { grid-column: span 3; }
.bento > .b-2 { grid-column: span 2; }
.bento > .b-4 { grid-column: span 4; }
.bento > .b-6 { grid-column: span 6; }
.bento > .tall { grid-row: span 2; }

.row  { display: flex; gap: var(--sp-3); align-items: center; }
.row-b{ display: flex; gap: var(--sp-4); align-items: center; justify-content: space-between; }
.wrap { flex-wrap: wrap; }

.head { max-width: 720px; margin-bottom: clamp(44px, 2rem + 3.4vw, 80px); }
.head.center { margin-inline: auto; text-align: center; }
.head .eyebrow + h2 { margin-top: var(--sp-4); }
.head h2 + p { margin-top: var(--sp-4); }

/* ── 5. AMBIENT LIGHT ─────────────────────────────────────────────────── */
/* Large, very soft washes. Enough to stop a dark page reading as a black
   rectangle, subtle enough never to compete with content. */
.glow { position: relative; overflow: hidden; isolation: isolate; }
.glow::after {
    content: ''; position: absolute; inset: -20% -10% auto -10%; height: 120%;
    z-index: -1; pointer-events: none;
    background:
        radial-gradient(58% 44% at 14% 0%,  var(--accent-08), transparent 62%),
        radial-gradient(48% 40% at 88% 8%,  rgba(90,162,255,.09), transparent 60%);
}

.mesh { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
    background:
        radial-gradient(38% 32% at 22% 18%, var(--accent-14), transparent 60%),
        radial-gradient(34% 30% at 76% 30%, rgba(90,162,255,.14), transparent 62%),
        radial-gradient(30% 28% at 50% 82%, rgba(255,201,74,.08), transparent 60%);
    filter: blur(28px);
}

/* Fine grid, for hero backgrounds. */
.gridlines { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(70% 55% at 50% 30%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(70% 55% at 50% 30%, #000 20%, transparent 78%);
}

/* ── 6. SURFACES ──────────────────────────────────────────────────────── */
.card {
    position: relative;
    background: var(--s2);
    border: 1px solid var(--line);
    border-radius: var(--r-4);
    box-shadow: var(--e2), var(--lit);
    /* 24px was too tight for a card 300px wide or more: content sat against
       the border and the whole page read as cramped. The reference set runs
       32-40px, and it scales with the viewport rather than being fixed. */
    padding: clamp(22px, 1.1rem + 1vw, 36px);
    transition: transform var(--d-2) var(--ease-out),
                box-shadow var(--d-2) var(--ease-out),
                border-color var(--d-2) var(--ease-out),
                background var(--d-2) var(--ease-out);
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--e3), var(--lit);
    border-color: var(--line-2);
    background: var(--s3);
}
.card-flat  { box-shadow: none; background: var(--s1); }
.card-glass {
    background: rgba(17,23,37,.7);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border-color: var(--line-2);
}
.card-accent { border-color: var(--accent-24); background: linear-gradient(180deg, var(--accent-04), transparent 45%), var(--s2); }
.card-pad-0 { padding: 0; }

/* A moving highlight along the top edge, for the one card that should draw
   the eye. Used sparingly. */
.card-lit::before {
    content: ''; position: absolute; inset: -1px -1px auto -1px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-40) 30%, var(--accent-40) 70%, transparent);
    border-radius: inherit;
}

/* ── 7. BUTTONS ───────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    padding: 14px 26px;
    border-radius: var(--r-2);
    font-size: var(--t-base); font-weight: 700; letter-spacing: -0.01em;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: transform var(--d-1) var(--ease-spring),
                box-shadow var(--d-2) var(--ease-out),
                background var(--d-1) linear,
                border-color var(--d-1) linear;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .5; pointer-events: none; }

.btn-primary {
    background: var(--accent-fill); color: var(--accent-ink);
    box-shadow: 0 4px 16px var(--accent-24), var(--lit);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px var(--accent-40); }

.btn-ghost { background: rgba(255,255,255,.04); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: rgba(255,255,255,.08); border-color: var(--line-3); transform: translateY(-2px); }

.btn-quiet { color: var(--ink-2); padding-inline: var(--sp-3); }
.btn-quiet:hover { color: var(--ink); }

.btn-lg { padding: 17px 34px; font-size: var(--t-md); border-radius: var(--r-3); }
.btn-sm { padding: 9px 16px; font-size: var(--t-sm); border-radius: var(--r-1); }
.btn-block { width: 100%; }

/* ── 8. PILLS, BADGES, CHIPS ──────────────────────────────────────────── */
.pill {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: 7px 14px; border-radius: var(--r-full);
    font-size: var(--t-xs); font-weight: 600;
    background: rgba(255,255,255,.05); border: 1px solid var(--line);
    color: var(--ink-2);
}
.pill-accent { background: var(--accent-08); border-color: var(--accent-24); color: var(--accent); }

.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: var(--r-full);
    font-size: var(--t-xs); font-weight: 700;
    border: 1px solid transparent;
}
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge-ok { background: var(--ok-bg); color: var(--ok); border-color: rgba(52,226,155,.26); }
.badge-up { background: var(--up-bg); color: var(--up); border-color: rgba(255,201,74,.26); }
.badge-no { background: var(--no-bg); color: var(--no); border-color: rgba(255,107,117,.26); }
.badge-in { background: var(--in-bg); color: var(--in); border-color: rgba(90,162,255,.26); }
.badge-mute { background: rgba(255,255,255,.05); color: var(--ink-3); border-color: var(--line); }

/* ── 9. FORMS ─────────────────────────────────────────────────────────── */
.field + .field { margin-top: var(--sp-5); }
.label { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); margin-bottom: var(--sp-2); }
.hint  { font-size: var(--t-xs); color: var(--ink-3); margin-top: var(--sp-2); }

.input, input[type=text], input[type=email], input[type=tel],
input[type=password], input[type=number], input[type=date], select, textarea {
    width: 100%;
    padding: 14px 16px;
    background: var(--s1);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    color: var(--ink);
    transition: border-color var(--d-1), box-shadow var(--d-1), background var(--d-1);
}
.input:hover, input:hover, select:hover, textarea:hover { border-color: var(--line-2); }
.input:focus, input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent-40);
    background: var(--s2);
    box-shadow: 0 0 0 4px var(--accent-14);
}
::placeholder { color: var(--ink-4); }

/* ── 10. MOTION ───────────────────────────────────────────────────────── */
[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity var(--d-4) var(--ease-out), transform var(--d-4) var(--ease-out);
    will-change: opacity, transform;
}
[data-reveal].in { opacity: 1; transform: none; }

/* The fade started at 8%, which cut text mid-word at both edges. Pushing it to
   3% and softening the ramp means items fade rather than being sliced. */
.marquee { display: flex; overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.marquee-track { display: flex; gap: clamp(32px, 2rem + 2vw, 64px); align-items: center;
    animation: slide 44s linear infinite; padding-right: clamp(32px, 2rem + 2vw, 64px); }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }

.pulse-dot { position: relative; }
.pulse-dot::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: inherit; animation: pulse 2.4s var(--ease-out) infinite;
}
@keyframes pulse { 0% { transform: scale(1); opacity: .7; } 70%,100% { transform: scale(2.4); opacity: 0; } }

/* ── 11. RESPONSIVE ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .bento > .b-3, .bento > .b-2, .bento > .b-4 { grid-column: span 6; }
    .bento > .tall { grid-row: span 1; }
}
@media (max-width: 720px) {
    .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
    .card { padding: var(--sp-5); border-radius: var(--r-3); }
    .btn { padding: 13px 22px; }
    .btn-lg { padding: 15px 26px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
}

/* Anything that must never be seen but must be read aloud. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT MODE
   docs/premium-v2/07-LIGHT-MODE.md

   Not an inversion. Four things genuinely differ and each is decided here:
   the accent used for text, the direction of elevation, the polarity of
   borders, and how texture is applied.
   ══════════════════════════════════════════════════════════════════════ */

[data-theme="light"] {
    /* Text accent darkens; fill stays the brand colour. Dark ink on bright
       lime is perfectly legible, so buttons are unaffected. */
    --accent:      rgb(var(--accent-deep-rgb));
    --accent-fill: rgb(var(--accent-rgb));
    --accent-ink:  #10160A;

    --accent-04: rgba(var(--accent-deep-rgb), .05);
    --accent-08: rgba(var(--accent-deep-rgb), .09);
    --accent-14: rgba(var(--accent-deep-rgb), .13);
    --accent-24: rgba(var(--accent-deep-rgb), .22);
    --accent-40: rgba(var(--accent-deep-rgb), .34);

    /* Surfaces. The page is the grey one and cards stay white — the opposite
       of the dark ramp, where the page is darkest and cards lift lighter.
       A faint blue cast keeps it from looking like unstyled paper. */
    /* Warm off-white rather than cool grey. The reference set uses cream
       (#FAF7EF) and it is the single clearest difference between a light
       theme that reads as designed and one that reads as unstyled: cold grey
       is what you get when nobody chose. */
    --s0: #F7F5EF;   /* page — warm */
    --s1: #FFFFFF;   /* card */
    --s2: #FFFFFF;   /* card; on light, depth comes from shadow not brightness */
    --s3: #FBF9F4;   /* recessed / hover */
    --s4: #FFFFFF;   /* overlay */
    --s5: #F0EDE4;   /* pressed */

    /* Borders swap polarity. A white border on a light card is invisible,
       which is the commonest tell of a light theme built by inversion. */
    /* Warm-toned hairlines, so borders do not read blue against cream. */
    --line:   rgba(41, 37, 28, .10);
    --line-2: rgba(41, 37, 28, .16);
    --line-3: rgba(41, 37, 28, .26);

    /* Ink. Not pure black: #0F172A reads as considered, #000 as unfinished. */
    --ink:   #0F172A;
    --ink-2: #475569;
    --ink-3: #64748B;
    /* 4.36:1 on white. Placeholder text is still text: at #94A3B8 it measured
       2.56:1, which is unreadable for anyone with reduced contrast sensitivity
       and fails AA outright. */
    --ink-4: #6B7A91;

    /* Semantic colours darken so they pass on white. The dark-mode greens and
       yellows are pastel and would fail badly here. */
    --ok: #067A50;   --ok-bg: rgba(6,122,80,.10);   --ok-line: rgba(6,122,80,.24);
    --up: #A15C07;   --up-bg: rgba(161,92,7,.10);   --up-line: rgba(161,92,7,.24);
    --no: #C2334A;   --no-bg: rgba(194,51,74,.09);  --no-line: rgba(194,51,74,.24);
    --in: #1D62D8;   --in-bg: rgba(29,98,216,.09);  --in-line: rgba(29,98,216,.24);

    /* Shadows go soft, large and slightly blue. A hard black shadow on white
       reads as dirt rather than depth. */
    --e1: 0 1px 2px rgba(41,37,28,.05);
    --e2: 0 1px 2px rgba(41,37,28,.04), 0 4px 12px rgba(41,37,28,.06), 0 12px 28px rgba(41,37,28,.05);
    --e3: 0 2px 4px rgba(41,37,28,.05), 0 12px 24px rgba(41,37,28,.08), 0 28px 56px rgba(41,37,28,.07);
    --e4: 0 4px 8px rgba(41,37,28,.06), 0 20px 40px rgba(41,37,28,.10), 0 48px 96px rgba(41,37,28,.10);

    /* The lit top edge is a dark-mode device: it simulates a light source
       catching an edge above a dark background. On white there is nothing to
       catch, so it goes to almost nothing. */
    --lit: inset 0 1px 0 rgba(255,255,255,.8);

    color-scheme: light;
}

/* Grain: overlay on dark makes a material; on white it makes dirt. */
[data-theme="light"] body::before {
    opacity: .10;
    mix-blend-mode: multiply;
}

[data-theme="light"] body {
    background: var(--s0);
    color: var(--ink-2);
}

/* Cards need a visible edge on light, since they no longer differ from the
   page by brightness alone. */
[data-theme="light"] .card { background: #FFFFFF; border-color: var(--line); }
[data-theme="light"] .card-flat { background: var(--s3); box-shadow: none; }
[data-theme="light"] .card-glass {
    background: rgba(255,255,255,.78);
    border-color: var(--line);
}

/* The recessed band inverts: on dark it is lighter than the page, on light it
   is darker. */
[data-theme="light"] .band { background: #F1EEE5; }

/* Ambient washes are far too strong on white. */
[data-theme="light"] .glow::after { opacity: .5; }
[data-theme="light"] .mesh { opacity: .3; filter: blur(40px); }
[data-theme="light"] .gridlines { opacity: .7; }

/* Scrollbar. */
[data-theme="light"] ::-webkit-scrollbar-track { background: var(--s0); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #D6D0C2; border-color: var(--s0); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* Inputs sit slightly recessed against white cards, rather than raised. */
[data-theme="light"] .input,
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea {
    background: #FFFFFF;
    border-color: var(--line-2);
}
[data-theme="light"] .input:focus,
[data-theme="light"] input:focus, [data-theme="light"] select:focus, [data-theme="light"] textarea:focus {
    background: #FFFFFF;
    box-shadow: 0 0 0 4px var(--accent-14);
}

/* Ghost buttons need a real border on white. */
[data-theme="light"] .btn-ghost { background: #FFFFFF; border-color: var(--line-2); color: var(--ink); }
[data-theme="light"] .btn-ghost:hover { background: var(--s3); border-color: var(--line-3); }

/* Pills and badges: the dark-mode 5% white fill vanishes on white. */
[data-theme="light"] .pill { background: var(--s3); border-color: var(--line); }
[data-theme="light"] .badge-mute { background: var(--s3); color: var(--ink-3); border-color: var(--line); }

/* The gradient headline needs a dark end on light, or it fades out. */
[data-theme="light"] .grad {
    background: linear-gradient(120deg, var(--ink) 20%, var(--accent) 70%, var(--ink) 95%);
    -webkit-background-clip: text; background-clip: text;
}

/* ── THEME TOGGLE ───────────────────────────────────────────────────────── */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: var(--r-2);
    background: transparent; border: 1px solid var(--line);
    color: var(--ink-2);
    transition: background var(--d-1), color var(--d-1), border-color var(--d-1);
}
.theme-toggle:hover { background: var(--s3); color: var(--ink); border-color: var(--line-2); }
.theme-toggle .sun { display: none; }
.theme-toggle .moon { display: block; }
[data-theme="light"] .theme-toggle .sun { display: block; }
[data-theme="light"] .theme-toggle .moon { display: none; }

/* ── L2: PUBLIC SECTIONS IN LIGHT MODE ──────────────────────────────────
   Each section carries a little of its own CSS; these are the pieces that
   assume a dark background. Checked one section at a time. */

/* Hero flow diagram */
[data-theme="light"] .flow-node { background: #FFFFFF; border-color: var(--line); }
[data-theme="light"] .flow-node.held {
    background: linear-gradient(180deg, var(--accent-08), #FFFFFF 60%);
    border-color: var(--accent-24);
    box-shadow: var(--e3), 0 0 0 4px var(--accent-08);
}
[data-theme="light"] .flow-lock { color: var(--accent-ink); }

/* Steps */
[data-theme="light"] .step-n {
    background: linear-gradient(180deg, var(--accent-14), var(--accent-04));
    border-color: var(--accent-24);
}
[data-theme="light"] .step-where { background: var(--s3); border-color: var(--line); }

/* Bento + protection icons */
[data-theme="light"] .bento-icon,
[data-theme="light"] .prot-n { background: var(--accent-08); border-color: var(--accent-24); }

/* FAQ */
[data-theme="light"] .faq-mark { background: var(--s3); border-color: var(--line); }
[data-theme="light"] .faq-item[open] .faq-mark { background: var(--accent-fill); color: var(--accent-ink); }

/* Demo */
[data-theme="light"] .demo-col { background: var(--s3); border-color: var(--line); }
[data-theme="light"] .demo-track { background: #E2E8F0; }
[data-theme="light"] .demo-fill { background: var(--accent-fill); }

/* Navigation + footer */
[data-theme="light"] .nav.stuck { background: rgba(255,255,255,.82); }
[data-theme="light"] .site-footer { background: #F1EEE5; }

/* ── L3: APP SHELL IN LIGHT MODE ────────────────────────────────────────── */
[data-theme="light"] aside#sidebar,
[data-theme="light"] aside#mobileSidebar { background: #FFFFFF !important; }

[data-theme="light"] header.sticky { background: rgba(255,255,255,.85) !important; }

[data-theme="light"] a.sidebar-link:hover { background: var(--s3) !important; }
[data-theme="light"] a.sidebar-link.active { background: var(--accent-14) !important; }

[data-theme="light"] .glass-card.glass-card,
[data-theme="light"] .card.card { background: #FFFFFF !important; }
[data-theme="light"] .glass-card.glass-card::before,
[data-theme="light"] .card.card::before { display: none; }

[data-theme="light"] .stat-tile.stat-tile { background: #FFFFFF; }
[data-theme="light"] .dropdown-menu { background: #FFFFFF !important; }
[data-theme="light"] .dropdown-menu a:hover { background: var(--s3) !important; }
[data-theme="light"] .mobile-nav { background: rgba(255,255,255,.94); }
[data-theme="light"] .skeleton { background: linear-gradient(90deg, #F0EDE4 25%, #FBF9F4 50%, #F0EDE4 75%); }

/* Dashboard and wallet hero bands */
[data-theme="light"] .dash-hero,
[data-theme="light"] .wal-hero { background: #FFFFFF; }
[data-theme="light"] .esc-row { background: #FFFFFF; }
[data-theme="light"] .esc-row:hover { background: var(--s3); }
[data-theme="light"] .seg { background: var(--s3); }
[data-theme="light"] .seg-item.on { background: #FFFFFF; }
[data-theme="light"] .deal-card, [data-theme="light"] .wal-part:hover { background: #FFFFFF; }
[data-theme="light"] .deal-terms { background: var(--s3); }

/* ── L6: LEGACY UTILITY BRIDGE ──────────────────────────────────────────
   The inline-colour sweep is DONE: the 84 hardcoded dark values baked into
   page markup have been replaced with tokens at source, so those elements now
   follow the theme on their own. The attribute-selector overrides that used to
   sit here are deleted rather than left as dead weight.

   What remains below is only the Tailwind utility classes, which cannot be
   token-ised without editing every class attribute in the project. They go as
   each page is rewritten. */

[data-theme="light"] .bg-surface,
[data-theme="light"] .bg-surface-50  { background-color: var(--s0) !important; }
[data-theme="light"] .bg-surface-100 { background-color: #FFFFFF !important; }
[data-theme="light"] .bg-surface-200 { background-color: var(--s3) !important; }
[data-theme="light"] .bg-surface-300 { background-color: var(--s5) !important; }

[data-theme="light"] .text-white   { color: var(--ink) !important; }
[data-theme="light"] .text-gray-300,
[data-theme="light"] .text-gray-400 { color: var(--ink-2) !important; }
[data-theme="light"] .text-gray-500 { color: var(--ink-3) !important; }
[data-theme="light"] .text-gray-600 { color: var(--ink-4) !important; }

[data-theme="light"] [class*="border-white/"] { border-color: var(--line) !important; }
[data-theme="light"] [class*="divide-white/"] > * + * { border-color: var(--line) !important; }
[data-theme="light"] [class*="hover:bg-white/"]:hover { background-color: var(--s3) !important; }
[data-theme="light"] [class*="bg-white/"] { background-color: var(--s3) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   REFERENCE DEVICES
   docs/premium-v2/08-REFERENCE-STUDY.md

   Each of these is drawn from the supplied references, and each derives its
   colour from --accent-rgb rather than hardcoding somebody else's green, so
   the whole set re-skins from the one admin setting.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Floating pill navigation ────────────────────────────────────────────
   The nav detaches from the page edge and sits as its own rounded bar. It is
   the fastest single change from "default" to "designed". */
.nav-pill {
    position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
    z-index: 90; width: calc(100% - 32px); max-width: 1140px;
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
    padding: 10px 12px 10px 22px;
    border-radius: var(--r-full);
    background: rgba(10, 14, 23, .72);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid var(--line-2);
    box-shadow: var(--e3);
    transition: background var(--d-2), box-shadow var(--d-2), top var(--d-2);
}
.nav-pill.stuck { top: 10px; box-shadow: var(--e4); }

[data-theme="light"] .nav-pill {
    background: rgba(255, 255, 255, .82);
    border-color: var(--line);
}

.nav-pill-links { display: flex; gap: 4px; }
.nav-pill-links a {
    padding: 9px 16px; border-radius: var(--r-full);
    font-size: var(--t-sm); font-weight: 600; color: var(--ink-2);
    transition: background var(--d-1), color var(--d-1);
}
.nav-pill-links a:hover { background: rgba(128,128,128,.12); color: var(--ink); }

@media (max-width: 900px) { .nav-pill-links { display: none; } }

/* ── Glow cards ──────────────────────────────────────────────────────────
   A saturated gradient bleeding from the lower edge of the card. In the
   reference this device carries almost all of the premium feel.

   Three hues so a row does not read as one repeated card; the accent one is
   always used for whatever matters most. */
.glow-card {
    position: relative; overflow: hidden; isolation: isolate;
    border-radius: var(--r-4);
    padding: clamp(22px, 1.1rem + 1vw, 36px);
    background: var(--s2);
    border: 1px solid var(--line);
    box-shadow: var(--e2), var(--lit);
    transition: transform var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out);
}
.glow-card::after {
    content: ''; position: absolute; inset: 42% -20% -60% -20%; z-index: -1;
    border-radius: 50%;
    filter: blur(46px); opacity: .85;
    transition: opacity var(--d-3), transform var(--d-3) var(--ease-out);
}
.glow-card:hover { transform: translateY(-5px); box-shadow: var(--e3), var(--lit); }
.glow-card:hover::after { opacity: 1; transform: translateY(-8px) scale(1.06); }

.glow-accent::after { background: radial-gradient(circle, rgba(var(--accent-rgb), .55), transparent 68%); }
.glow-blue::after   { background: radial-gradient(circle, rgba(59, 130, 246, .5),   transparent 68%); }
.glow-amber::after  { background: radial-gradient(circle, rgba(249, 146, 42, .5),   transparent 68%); }
.glow-violet::after { background: radial-gradient(circle, rgba(139, 92, 246, .45),  transparent 68%); }

[data-theme="light"] .glow-card::after { opacity: .5; filter: blur(52px); }
[data-theme="light"] .glow-card:hover::after { opacity: .68; }

/* ── Ambient orbs ────────────────────────────────────────────────────────
   Large, blurred, very low opacity. Placed at corners so they never sit
   behind body text. */
.orb { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: -1; }
.orb-a { background: rgba(var(--accent-rgb), .30); }
.orb-b { background: rgba(59, 130, 246, .22); }
[data-theme="light"] .orb { opacity: .5; }

/* ── Trend badge ─────────────────────────────────────────────────────────
   From the dashboard reference: every figure carries a pill saying which way
   it moved. A number without a direction is not yet information. */
.trend {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: var(--r-full);
    font-size: 11px; font-weight: 800; letter-spacing: -.01em;
}
.trend-up   { background: var(--ok-bg); color: var(--ok); }
.trend-down { background: var(--no-bg); color: var(--no); }
.trend-flat { background: rgba(128,128,128,.12); color: var(--ink-3); }

/* ── Icon tile ───────────────────────────────────────────────────────────
   Every reference puts its glyphs inside a tinted rounded square rather than
   floating them bare. */
.icon-tile {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: var(--r-2);
    background: var(--accent-08); border: 1px solid var(--accent-24);
    color: var(--accent); flex-shrink: 0;
}
.icon-tile-lg { width: 54px; height: 54px; border-radius: var(--r-3); }
.icon-tile-solid { background: var(--accent-fill); color: var(--accent-ink); border-color: transparent; }
.icon-tile-mute { background: rgba(128,128,128,.10); border-color: var(--line); color: var(--ink-2); }

/* ── Vertical gradient display type ─────────────────────────────────────
   From the SynaptiQ reference: the heading fades top to bottom. Only ever on
   one heading per page. */
.grad-v {
    background: linear-gradient(180deg, var(--ink) 30%, var(--ink-3) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ── Elevated card, for the recommended option in a row ─────────────────── */
.card-raised {
    background: var(--s3);
    border-color: var(--accent-24);
    box-shadow: var(--e3), 0 0 0 4px var(--accent-08), var(--lit);
    transform: translateY(-10px);
}
@media (max-width: 720px) { .card-raised { transform: none; } }

/* ── Full-width gradient banner ─────────────────────────────────────────── */
.banner-accent {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--sp-5);
    padding: var(--sp-6) var(--sp-8);
    border-radius: var(--r-4);
    background: linear-gradient(100deg, rgba(var(--accent-rgb), .95), rgba(var(--accent-rgb), .62));
    color: var(--accent-ink);
    box-shadow: 0 12px 40px rgba(var(--accent-rgb), .28);
}
.banner-accent h3 { color: var(--accent-ink); }

/* ── SPACING CORRECTIONS ─────────────────────────────────────────────────
   From reviewing the rendered page rather than the code. Everything here is a
   measured fix to something that looked cramped in the browser. */

/* Steps sat flush with no card around them, so the numbered badge collided
   with the text beside it and nothing separated one step from the next. */
.step {
    padding: clamp(20px, 1rem + 1vw, 30px);
    background: var(--s1);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    transition: border-color var(--d-2), transform var(--d-2) var(--ease-out);
}
.step:hover { border-color: var(--line-2); transform: translateY(-2px); }
.steps { gap: clamp(16px, .8rem + .8vw, 26px) !important; }

/* Flow nodes were pressed against their own border. */
.flow-node { padding: clamp(24px, 1.2rem + 1vw, 34px) clamp(18px, 1rem + .8vw, 26px) !important; }
.flow { gap: clamp(12px, .6rem + .6vw, 20px) !important; }

/* The lead bento card left a large void: the icon pinned to the top, the text
   to the bottom, nothing between. Content is grouped at the bottom and the
   card no longer stretches to twice the height of its neighbours — `tall` now
   means "somewhat taller", not "double". */
.bento > .tall { justify-content: flex-end !important; }
.bento > .tall > *:first-child { margin-bottom: clamp(40px, 3rem + 2vw, 88px); }
.bento > .tall { grid-row: span 1 !important; min-height: clamp(280px, 20rem + 4vw, 400px); }

/* Which means the small cards to its right need to fill the same band. */
.bento > .b-2 { min-height: clamp(130px, 9rem + 2vw, 186px); }

/* Section headings: left-aligned by default, centred only where the section
   is itself centred. The page mixed the two with no rule, so the eye had no
   consistent starting point down the page. */
.section > .shell > .head:not(.center) { margin-left: 0; }

/* Demo panel and pricing table needed the same internal air as a card. */
.demo-col { padding: clamp(16px, .8rem + .8vw, 22px) var(--sp-3) !important; }

/* FAQ rows were tall but the text ran full width, so answers read as loose
   lines rather than paragraphs. */
.faq-item summary { padding-block: clamp(20px, 1rem + 1vw, 28px) !important; }
.faq-item p { padding-bottom: clamp(20px, 1rem + 1vw, 28px) !important; max-width: 62ch; }

/* Two-column card grids get more air between columns than rows: side by side
   needs more separation than stacked to read as separate. */
.g-2 { column-gap: clamp(20px, 1rem + 1.4vw, 40px); }

/* On a phone every one of these can come down again — the space that reads as
   generous on a desktop reads as wasteful on a 380px screen. */
@media (max-width: 640px) {
    .card, .glow-card { padding: 20px; }
    .step { padding: 18px; }
    .section { padding-block: clamp(56px, 3rem + 4vw, 80px); }
}