/* ==========================================================================
   CinderTek - Light theme treatments
   Loaded after the page styles. Colour tokens live in variables.css; this
   file adds what tokens alone cannot: section bands, the ember call-to-action
   panels, and the depth (gloss, shadows, ambient light) that the dark theme
   gets for free from glowing edges on black.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ambient light behind the page: warmer and stronger than in the dark theme,
   so the glass has colour to sit on.
   -------------------------------------------------------------------------- */

:root[data-theme="light"] body::before {
    background:
        radial-gradient(42vw 36vw at 84% 6%, rgba(232, 112, 46, 0.2), transparent 70%),
        radial-gradient(48vw 42vw at 4% 44%, rgba(96, 130, 176, 0.16), transparent 70%),
        radial-gradient(40vw 32vw at 72% 98%, rgba(214, 88, 26, 0.14), transparent 70%);
}

/* --------------------------------------------------------------------------
   Bands: the sections that are dark in the dark theme become soft-gray
   bands, so the page keeps its rhythm without black blocks.
   -------------------------------------------------------------------------- */

:root[data-theme="light"] .theme-dark {
    background-color: var(--color-band);
    background-image:
        radial-gradient(70% 60% at 85% 0%, rgba(214, 88, 26, 0.08), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 40%);
    border-top: 1px solid rgba(16, 24, 32, 0.06);
    border-bottom: 1px solid rgba(16, 24, 32, 0.06);
}

/* The drafting grid behind sections, drawn in ink instead of mist. */
:root[data-theme="light"] .sheet::before {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1792' height='1088'><defs><pattern id='g' width='64' height='64' patternUnits='userSpaceOnUse'><path d='M64 0H0V64' fill='none' stroke='%23101820' stroke-opacity='.07'/></pattern><radialGradient id='f' cx='.5' cy='.42' r='.6'><stop offset='.2' stop-color='white'/><stop offset='1' stop-color='white' stop-opacity='0'/></radialGradient><mask id='m'><rect width='100%' height='100%' fill='url(%23f)'/></mask></defs><rect width='100%' height='100%' fill='url(%23g)' mask='url(%23m)'/></svg>") center top / 1792px 1088px no-repeat;
}

/* --------------------------------------------------------------------------
   Glass: white glass with a warm lit edge, a top highlight and layered,
   warm-tinted shadows (soft contact shadow plus a long ambient one).
   -------------------------------------------------------------------------- */

:root[data-theme="light"] .glass-panel {
    background:
        radial-gradient(520px circle at var(--gx, 18%) var(--gy, -20%), rgba(255, 255, 255, calc(var(--glass-glare, 0.06) * 9)), transparent 55%) padding-box,
        linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(250, 248, 244, 0.9) 55%, rgba(255, 250, 245, 0.94)) padding-box,
        linear-gradient(140deg, rgba(255, 255, 255, 1), rgba(16, 24, 32, 0.1) 30%, rgba(16, 24, 32, 0.07) 65%, rgba(214, 88, 26, 0.45)) border-box;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 1px 2px rgba(60, 40, 20, 0.06),
        0 10px 24px -12px rgba(60, 40, 20, 0.16),
        0 34px 64px -34px rgba(60, 40, 20, 0.28);
}

/* Header bar once the page scrolls: frosted paper with a soft shadow. */
:root[data-theme="light"] .site-header.is-scrolled {
    background-color: rgba(246, 245, 241, 0.9);
    box-shadow: 0 8px 24px -18px rgba(60, 40, 20, 0.35);
}

/* Buttons get a little lift. */
:root[data-theme="light"] .btn--primary {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 10px 22px -12px rgba(169, 75, 28, 0.6);
}

:root[data-theme="light"] .btn--outline {
    background-color: rgba(255, 255, 255, 0.6);
}

/* --------------------------------------------------------------------------
   Case-study media: the app shots sit on a warm studio backdrop.
   -------------------------------------------------------------------------- */

:root[data-theme="light"] .project__media,
:root[data-theme="light"] .case__visual {
    background:
        radial-gradient(90% 80% at 72% 12%, rgba(214, 88, 26, 0.2), transparent 62%),
        radial-gradient(70% 70% at 10% 100%, rgba(96, 130, 176, 0.14), transparent 60%),
        linear-gradient(160deg, #F1EEE8, #E4E0D8);
    border-color: rgba(16, 24, 32, 0.08);
    box-shadow: 0 30px 60px -36px rgba(60, 40, 20, 0.35);
}

/* --------------------------------------------------------------------------
   Calls to action: the closing panels turn ember (brand ember to copper)
   with white type, instead of a black block.
   -------------------------------------------------------------------------- */

:root[data-theme="light"] .cta-final {
    background-color: transparent;
    background-image: none;
    border: 0;
}

:root[data-theme="light"] .cta-final__grid.glass-panel,
:root[data-theme="light"] .page-cta {
    --color-text: #FFFFFF;
    --color-text-body: rgba(255, 255, 255, 0.9);
    --color-text-muted: rgba(255, 240, 230, 0.78);
    --color-accent: #FFFFFF;
    --color-accent-strong: #FFE3D1;
    --color-on-accent: #A94B1C;
    --color-border: rgba(255, 255, 255, 0.22);
    --color-border-strong: rgba(255, 255, 255, 0.55);
    --color-link: #FFFFFF;
    --color-link-underline: rgba(255, 255, 255, 0.7);
    --color-focus: #FFFFFF;
    --rgb-line: 255, 255, 255;
    --rgb-paper: 255, 255, 255;
    --rgb-hi: 255, 255, 255;
    --mark-dark: #101820;
    --mark-slate: #2D3641;
    --mark-copper: #6B2508;
    --mark-ember: #FFD8BF;
    color: var(--color-text-body);
}

:root[data-theme="light"] .cta-final__grid.glass-panel {
    border-color: transparent;
    background:
        radial-gradient(60% 80% at 82% 20%, rgba(255, 196, 150, 0.45), transparent 60%) padding-box,
        linear-gradient(135deg, #D9621F 0%, #C4501A 45%, #A94B1C 100%) padding-box,
        linear-gradient(140deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1) 40%, rgba(120, 40, 8, 0.5)) border-box;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 40px 80px -40px rgba(169, 75, 28, 0.65),
        0 12px 28px -16px rgba(60, 30, 10, 0.3);
}

:root[data-theme="light"] .cta-final::before {
    background: radial-gradient(closest-side, rgba(214, 88, 26, 0.22), rgba(214, 88, 26, 0.06) 50%, transparent 100%);
}

:root[data-theme="light"] .page-cta {
    border: 0;
    background:
        radial-gradient(50% 120% at 88% 0%, rgba(255, 196, 150, 0.4), transparent 60%),
        linear-gradient(120deg, #D9621F 0%, #C4501A 50%, #A94B1C 100%);
}

/* On ember, the primary button turns white with copper text. */
:root[data-theme="light"] .cta-final__grid .btn--primary,
:root[data-theme="light"] .page-cta .btn--primary {
    box-shadow: 0 12px 26px -12px rgba(80, 30, 5, 0.55);
}

:root[data-theme="light"] .cta-final__grid .btn--outline,
:root[data-theme="light"] .page-cta .btn--outline {
    background-color: rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------------------
   Footer: a soft-gray band with ink type.
   -------------------------------------------------------------------------- */

:root[data-theme="light"] .site-footer {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 50%);
}

/* --------------------------------------------------------------------------
   Details that use fixed colours in the dark theme
   -------------------------------------------------------------------------- */

/* Blueprint components: white cards instead of graphite. */
:root[data-theme="light"] .bp-node__fill {
    fill: var(--color-surface);
    filter: drop-shadow(0 4px 8px rgba(60, 40, 20, 0.08));
}

:root[data-theme="light"] .bp-node--accent .bp-node__fill {
    fill: #FFF6F0;
}

/* Corner marks on case-study media. */
:root[data-theme="light"] .project__media {
    --frame-color: var(--color-text-muted);
}