/* ZS R3 LIGHT THEME (r3-light.css), stream FXL. Imported from the very top of r3-tokens.css.
   EVERY rule in this file is scoped to [data-theme="light"]: the dark theme cannot change by a pixel (proof: evidence/r3/final2/FXL/NOTES.md).
   Because the @import sits above the rest of r3-tokens.css, these rules come EARLIER in the cascade than the foundation and the page sheets, so the
   selectors carry main#innehall (an id) where they must win.

   THE LIGHT WORLD
   1. CREAM WORLD (Home, /paket, Starter, Growth, /exempel, /om, /process, /kontakt, hemsida-*): the dark text planes of the dark theme (graphite = the
      Growth stage and every ask, walnut = Premium cards / process) become warm cream planes with ink type. They are still planes (they blend into
      their neighbours over the same 140 / 120 / 96 px) but the neighbours are all cream, so no blend can cross a muddy tan band. Photo, film and
      device plates stay DARK OBJECTS on those planes (the device frame, the film, the photograph with its graded black).
   2. PREMIUM (main.tier-premium): dark photographic plates alternate with cream sheets. The hero and the aperture film are full-bleed dark; the ledger is a cream
      sheet laid OVER the film and the film's foot DISSOLVES into it over the foundation fade (140 / 120 / 96 px) through a walnut-amber midpoint (fix round 2, F-05 / F-11:
      round 1 had a straight edge with a cast shadow, which broke the tone rule); the two showcase plates (Två exempel, the candle-table close) are
      dark photographic slabs set into the cream page with their own corners, so cream meets ink only at the edge of an object or through that one dissolve.
   3. /paket TIER CARDS (fix round 2, F-48): cream-white / taupe / deep brown, so the ladder reads without a price.
   Tokens are the ones of zs-editorial.css / r3-tokens.css; new ones are named --r3-c-stage, --r3-c-sand, --r3x-slab-*, --r3x-card-*, --r3x-pad. */

/* ================================ 1. CREAM WORLD: TONES ================================ */
[data-theme="light"] {
  --r3-c-stage: #EDE6D8;     /* the former graphite plane: a warm cream one step deeper than the page, holds the dark device objects */
  --r3-c-sand: #E8DDCA;      /* the former walnut plane: the warmest cream, the Premium row / process / card */
  --r3-c-glow: 214, 168, 112;   /* rgb triple of the warm light the light theme lays behind a stage and under an ask */
  --r3x-slab-in: max(12px, calc(var(--gutter, 16px) - 6px));   /* the dark Premium slabs sit this far in from the window edge */
  --r3x-slab-r: 22px;
}
/* graphite and walnut are redefined where they are READ (the cream-world pages' <main>), so every plane / blend / card that names them follows;
   void stays ink (photo floors, the Premium world). */
[data-theme="light"] main#innehall:not(.tier-premium) {
  --r3-c-graphite: var(--r3-c-stage);
  --r3-c-walnut: var(--r3-c-sand);
}
/* the former dark planes (and the Premium ledger sheet) take the LIGHT token set: the same values as the light page; --bg is the plane's own cream */
[data-theme="light"] main#innehall:not(.tier-premium) :is(.r3-tone-graphite, .r3-tone-night, .r3-tone-walnut, [data-plane="graphite"], [data-plane="walnut"]),
[data-theme="light"] main#innehall.tier-premium .r3x-p-m1 {
  --bg: var(--r3-c); --bg-2: #E4DDCE; --surface: #FFFFFF; --surface-2: #FBF9F5;
  --ink: #141317; --ink-2: #46424C; --ink-3: #55505B; --line: rgba(20, 19, 23, .16); --line-2: rgba(20, 19, 23, .07);
  --accent: #4B2EC6; --gold: #654810; --stone: #55505B; --btn-bg: #141317; --btn-ink: #F4F1EB; --btn-bg-hover: #000;
  --r3-wash: rgba(20, 19, 23, .07); --r3-wash-2: rgba(20, 19, 23, .12);
  --elev: 0 1px 2px rgba(20, 19, 23, .05), 0 18px 40px rgba(20, 19, 23, .07);
  --logo-dark: block; --logo-light: none; color-scheme: light; color: var(--ink);
}
/* tier colour inside those planes (the foundation's --tier rules read --stone / --accent / --gold of the plane: they now resolve to the light values) */
[data-theme="light"] main#innehall:not(.tier-premium) :is(.r3-tone-graphite, .r3-tone-night, .r3-tone-walnut, [data-plane="graphite"], [data-plane="walnut"]).tier-starter { --tier: var(--stone); }
[data-theme="light"] main#innehall:not(.tier-premium) :is(.r3-tone-graphite, .r3-tone-night, .r3-tone-walnut, [data-plane="graphite"], [data-plane="walnut"]).tier-growth { --tier: var(--accent); }
[data-theme="light"] main#innehall:not(.tier-premium) :is(.r3-tone-graphite, .r3-tone-night, .r3-tone-walnut, [data-plane="graphite"], [data-plane="walnut"]).tier-premium { --tier: var(--gold); }
/* a warm bloom belongs to a dark <-> cream hand-off only; between creams it would paint a stripe */
[data-theme="light"] main#innehall:not(.tier-premium) .r3-plane { --r3-bloom-on: 0; }
[data-theme="light"] body > footer.foot.r3-plane { --r3-bloom-on: 0; }
/* the footer blends from the plane above it; where that is an ask plane (the former graphite) it is cream now */
[data-theme="light"] body > footer.foot.r3-from-graphite, [data-theme="light"] body > footer.foot.r3-from-night { --r3-from: var(--r3-c-stage); }
/* the gold button is a dark-ground colour (#DCBC7E, 1.2 : 1 against sand): on cream it is the bronze of the light theme's gold, with cream type */
[data-theme="light"] main#innehall:not(.tier-premium) .r3-btn--gold { background: #654810; color: #FBF8F1; }
[data-theme="light"] main#innehall:not(.tier-premium) .r3-btn--gold:hover { background: #523A0C; }

/* ================================ 2. CREAM WORLD: PAGE-SPECIFIC REPAIRS (dark-ground assumptions in the page sheets) ================================ */
/* Home: the Growth numeral was hard-coded to a light violet for the graphite card */
[data-theme="light"] main#innehall .r3x-h-row.tier-growth .r3-n--tier { color: var(--accent); }
/* Home, Premium row: the blurred photograph of Glöd behind the row stays, as a warm cloud in the cream instead of a dark wash */
[data-theme="light"] main#innehall .r3x-h-atmos img { opacity: .2; mix-blend-mode: multiply; }
[data-theme="light"] main#innehall .r3x-h-atmos::after { background: linear-gradient(90deg, rgba(232, 221, 202, .92) 0, rgba(232, 221, 202, .3) 58%, rgba(232, 221, 202, .55) 100%); }
/* devices on the cream pages: a tight light-ground shadow. The old stack (30 / 55 px blurs) laid a grey haze over the caption, tier mark or label that sits under a
   device (rendered contrast of ink-2 on that haze: 3.8 : 1); this one is gone within ~30 px of the frame. */
[data-theme="light"] main#innehall:not(.tier-premium) .r3-dev {
  box-shadow: 0 0 0 1px rgba(20, 19, 23, .14), 0 2px 5px rgba(20, 19, 23, .07), 0 18px 34px -12px rgba(20, 19, 23, .24); }
[data-theme="light"] main#innehall:not(.tier-premium) .r3-print { box-shadow: 0 0 0 1px rgba(20, 19, 23, .10), 0 3px 8px rgba(20, 19, 23, .10), 0 22px 28px -16px rgba(20, 19, 23, .22); }
/* dark-ground shadows (0 N px M px -k px rgba(0,0,0,.7-.8)) lay a grey smear on cream: the same objects with a light-ground shadow */
[data-theme="light"] main#innehall .r3x-h-arcimg { box-shadow: 0 0 0 1px rgba(20, 19, 23, .12), 0 30px 50px -30px rgba(20, 19, 23, .42); }
[data-theme="light"] main#innehall .r3x-kg-card { box-shadow: 0 1px 0 rgba(20, 19, 23, .04), 0 26px 50px -32px rgba(20, 19, 23, .38); }
[data-theme="light"] main#innehall .r3x-s-sheet { box-shadow: 0 0 0 1px rgba(20, 19, 23, .08), 0 30px 56px -38px rgba(20, 19, 23, .34); }
/* /exempel swipe rail (<= 1099 px): stream S dissolves the rail into the page tone at both ends (G-78: no card content meets the window edge, which boundary_check samples). On cream a 40 px dissolve of a DARK label plate
   with cream type is a grey smudge whose type is under AA while it fades (the plate fades to cream together with its type). Here the right end is a 3 px dissolve that is transparent 10 px before the window edge:
   the next card is cropped by the rail, with a cream margin, like a card cut by a padded container. */
@media (max-width: 1099px) { [data-theme="light"] main#innehall .r3x-s-arc { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 13px), transparent calc(100% - 10px)); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 13px), transparent calc(100% - 10px)); } }
@media (max-width: 1099px) {   /* the swipe rail is a scroll container: a 36 px drop shadow is cut by its bottom edge (a hard grey band); a shadow that fits the rail's 18 px of padding is not */
  [data-theme="light"] main#innehall .r3x-s-arc__c { box-shadow: 0 0 0 1px rgba(20, 19, 23, .12), 0 8px 14px -8px rgba(20, 19, 23, .34); } }
/* /paket TIER CARDS (F-48, fix round 2). The ladder has to read in the light theme without a price: Starter a cream-white card, Growth a taupe card, Premium Max a deep-brown
   card (the walnut of the dark theme, with the dark token set and the real gold). Round 1 had turned all three into near-identical creams (lift / stage / sand, 1.02 to 1.05 : 1
   apart). Now: #FDFBF6 / #DDD3C1 / #221913 = relative luminance 0.97 / 0.65 / 0.012. The cards are objects on the cream page; the photograph of the Premium card melts into the
   card's own brown through the sheet's .r3x-kp-vis::after gradient (it was hidden in round 1, when the card was sand). */
[data-theme="light"] main#innehall {
  --r3x-card-1: #FDFBF6;     /* Starter: cream-white */
  --r3x-card-2: #DDD3C1;     /* Growth: taupe */
  --r3x-card-3: #221913;     /* Premium Max: deep brown */
}
[data-theme="light"] main#innehall .r3x-kp-card.r3x-kp-s { --r3-c: var(--r3x-card-1); box-shadow: 0 0 0 1px rgba(20, 19, 23, .07), 0 28px 48px -34px rgba(20, 19, 23, .30); }
[data-theme="light"] main#innehall .r3x-kp-card.r3x-kp-g { --r3-c: var(--r3x-card-2); box-shadow: 0 0 0 1px rgba(20, 19, 23, .08), 0 28px 48px -34px rgba(20, 19, 23, .34); }
[data-theme="light"] main#innehall:not(.tier-premium) .r3x-kp-card.r3x-kp-p {
  --r3-c: var(--r3x-card-3);
  --bg: var(--r3-c); --bg-2: #38302B; --surface: #413934; --surface-2: #4E4742;
  --ink: #F3F0EA; --ink-2: #CFCAC1; --ink-3: #A7A298; --line: rgba(243, 240, 234, .18); --line-2: rgba(243, 240, 234, .09);
  --accent: #A48FFF; --gold: #DCBC7E; --stone: #D8D2C6; --btn-bg: #F3F0EA; --btn-ink: #0C0C0F; --btn-bg-hover: #FFFFFF;
  --r3-wash: rgba(243, 240, 234, .09); --r3-wash-2: rgba(243, 240, 234, .15); --elev: 0 0 0 1px var(--line-2);
  --tier: var(--gold); --logo-dark: none; --logo-light: block; color-scheme: dark; color: var(--ink);
  box-shadow: 0 0 0 1px rgba(20, 19, 23, .10), 0 40px 70px -38px rgba(20, 19, 23, .55);
}
/* the hover / focus state of the sheet (data-hot) sets its own ring; the resting shadows above must not beat it */
[data-theme="light"] main#innehall .r3x-kp-ladder[data-hot="0"] .r3x-kp-card.r3x-kp-s,
[data-theme="light"] main#innehall .r3x-kp-ladder[data-hot="1"] .r3x-kp-card.r3x-kp-g,
[data-theme="light"] main#innehall:not(.tier-premium) .r3x-kp-ladder[data-hot="2"] .r3x-kp-card.r3x-kp-p { box-shadow: 0 0 0 2px var(--tier, var(--ink)), 0 40px 70px -34px rgba(20, 19, 23, .45); }
[data-theme="light"] main#innehall:not(.tier-premium) .r3x-kp-p .r3-btn--gold { background: #DCBC7E; color: #141317; }
[data-theme="light"] main#innehall:not(.tier-premium) .r3x-kp-p .r3-btn--gold:hover { background: #E7CB93; }
/* the browser + phone pair on the dark card keeps the dark-ground shadow of the dark theme (the cream pages' tight light-ground shadow would be invisible on brown) */
[data-theme="light"] main#innehall:not(.tier-premium) .r3x-kp-p .r3-dev { box-shadow: 0 0 0 1px rgba(243, 240, 234, .14), inset 0 1px 0 rgba(255, 255, 255, .08), 0 50px 90px -40px rgba(0, 0, 0, .75), 0 30px 100px -34px rgba(var(--r3-glow), .30); }

/* ================================ 3. PREMIUM: dark plates and cream sheets ================================ */
/* 3a. the ledger (chapter 01) is a cream sheet laid over the aperture film. F-05 (fix round 2): the film's foot DISSOLVES into the cream over the foundation fade
   (--r3-fade: 140 px desktop / 120 tablet / 96 phone) instead of ending in a straight edge with a cast shadow (the tone rule: tones blend, they do not meet at an edge).
   It is the sheet's own dip, made longer: --r3p-dip = the fade + a plain-cream pad, so (a) the sheet's overlap, the dissolve and the live (motion) glide all follow one variable,
   (b) the hinge numeral (top: var(--r3p-dip)) starts on plain cream with the pad above it, and (c) the layout height does not change (the sheet is pulled up by exactly the dip it adds). The dissolve is an alpha ramp of the page cream in smootherstep stops (6t^5 - 15t^4 + 10t^3: it leaves the descenders of the headline alone and crosses the grey middle quickly) with a bell of the room's
   own hue (walnut-amber 158,118,86) laid on it, so the middle of the fade is a deliberate warm taupe and not grey smoke (F-11). The cast shadow of the old edge is gone. */
[data-theme="light"] main#innehall.tier-premium .r3x-p-open { --r3x-pad: 24px; --r3p-dip: calc(var(--r3-fade) + var(--r3x-pad)); }
@media (min-width: 768px) { [data-theme="light"] main#innehall.tier-premium .r3x-p-open { --r3x-pad: 36px; } }
/* ... but the headline "Filmiskt bildspråk" stays where it was (it is placed from --r3p-dip inside the aperture: r3x-premium.css, .r3p-aperture__h { bottom: calc(var(--r3p-dip) + ...) }).
   Rising by the 104 px the longer dip adds lifted the gold word into the pan's white sauce (rendered contrast 1.9 : 1 at the 5th percentile, FAIL; at its own place 0 failing), and the
   word's foot only touches the first, fully transparent pixels of the dissolve. So inside the aperture the variable is the foundation's own value again (56 px, 72 px from 768 px). */
[data-theme="light"] main#innehall.tier-premium .r3x-p-open .r3p-aperture { --r3p-dip: 56px; }
@media (min-width: 768px) { [data-theme="light"] main#innehall.tier-premium .r3x-p-open .r3p-aperture { --r3p-dip: 72px; } }
[data-theme="light"] main#innehall.tier-premium .r3x-p-m1 {
  --r3-c: var(--r3-c-page); --r3-from: var(--r3-c-page); --r3-bloom-on: 0;
  --r3p-gold: #654810; --r3p-ink: #141317; --r3p-ink-2: #46424C; --r3x-gold: #654810;
  box-shadow: none;
}
[data-theme="light"] main#innehall.tier-premium .r3p-sheet__dip {
  --r3x-f: calc(100% - var(--r3x-pad));   /* the feathered part of the dip; the pad below it is plain cream */
  background:
    linear-gradient(180deg, rgba(158, 118, 86, 0) 0, rgba(158, 118, 86, .09) 16%, rgba(158, 118, 86, .24) 32%, rgba(158, 118, 86, .38) 50%, rgba(158, 118, 86, .24) 68%, rgba(158, 118, 86, .09) 84%, rgba(158, 118, 86, 0) 100%) top / 100% var(--r3x-f) no-repeat,
    linear-gradient(180deg, rgba(244, 241, 235, 0) 0, rgba(244, 241, 235, .009) 10%, rgba(244, 241, 235, .058) 20%, rgba(244, 241, 235, .163) 30%, rgba(244, 241, 235, .317) 40%, rgba(244, 241, 235, .50) 50%, rgba(244, 241, 235, .683) 60%, rgba(244, 241, 235, .837) 70%, rgba(244, 241, 235, .942) 80%, rgba(244, 241, 235, .991) 90%, #F4F1EB 100%) top / 100% var(--r3x-f) no-repeat,
    linear-gradient(#F4F1EB, #F4F1EB) bottom / 100% var(--r3x-pad) no-repeat;
}
/* the hinge numeral lies on the cream now: the bronze of the light gold, set inside the sheet */
[data-theme="light"] main#innehall.tier-premium .r3p-hinge { color: #7A5A14; top: var(--r3p-dip); transform: translateY(6%); font-size: clamp(5rem, 2.4rem + 7.2vw, 9rem); }
/* 3b. the two showcase plates (Två exempel, the candle-table close) are dark photographic SLABS set into the cream page: they keep their own black (the photographs'
   floor), their corners are the page's own radius, and cream meets ink only at the edge of the object. Flat inside: no blend from the neighbour. */
[data-theme="light"] main#innehall.tier-premium :is(.r3x-p-m2, .r3x-p-close) {
  --r3-from: var(--r3-c-void); --r3-bloom-on: 0;
  margin-inline: var(--r3x-slab-in); border-radius: var(--r3x-slab-r); overflow: clip;
  box-shadow: 0 0 0 1px rgba(20, 19, 23, .06), 0 46px 80px -46px rgba(20, 19, 23, .5);
}
[data-theme="light"] main#innehall.tier-premium .r3x-p-close { padding-top: 0; }
/* 3c. the cream planes around the slabs start flat (the blend belonged to the void they used to grow out of) */
[data-theme="light"] main#innehall.tier-premium :is(.r3x-p-m3, .r3x-p-colophon) { --r3-from: var(--r3-c); --r3-bloom-on: 0; }
/* the compare plane is the page tone here (it sat in lift): the strips beside the slabs are the page, so the cream around a slab is one tone */
[data-theme="light"] main#innehall.tier-premium .r3x-p-m3 { --r3-c: var(--r3-c-page); --r3-from: var(--r3-c-page); }

/* ================================ 4. CREAM WORLD: PHOTOGRAPHS INSIDE CREAM ================================ */
/* Home, process: the dining-room photograph (a dark band behind the heading in the dark theme) would read as smoke on the sand once multiplied into it; the six steps stand on a clean plane */
[data-theme="light"] main#innehall .r3x-h-proc__photo { display: none; }
/* Growth, terrace close: the photograph is a dark photographic OBJECT set into the cream, like the Premium slabs (same 22 px corners and inset), with the cream ask card laid over its lower half.
   It used to dissolve into the cream through 240 px of fog (a dark photograph at half alpha on cream). No mask, no gradient: the edge is the edge of a picture. */
[data-theme="light"] main#innehall .r3x-kg-close .r3p-close__photo {
  -webkit-mask-image: none; mask-image: none; border-radius: var(--r3x-slab-r); overflow: hidden;
  inset: 0 var(--r3x-slab-in) 28px; box-shadow: 0 46px 80px -46px rgba(20, 19, 23, .5); }
[data-theme="light"] main#innehall .r3x-kg-close .r3p-close__card { box-shadow: 0 28px 56px -30px rgba(20, 19, 23, .42); }   /* the dark-ground shadow (.7 black) left a grey smear on the cream below the card */
@media (max-width: 899px) {   /* phones: the picture is the width of the card that overlaps it */
  [data-theme="light"] main#innehall .r3x-kg-close .r3p-close__photo { inset: auto; margin-inline: var(--gutter, 16px); border-radius: var(--r3x-slab-r) var(--r3x-slab-r) 0 0; box-shadow: none; } }

/* ================================ 5. HEADER AFTER A THEME TOGGLE ================================ */
/* zs-proto.js sets .band-dark on the header only on scroll / resize. Switching dark -> light on a cream-world page (the hero used to be dark) therefore left a dark header over
   a cream hero until the next scroll. On those pages nothing under the header is dark in the light theme, so the header is light whatever the stale class says. */
[data-theme="light"] body:has(> main#innehall:not(.tier-premium)) .nav.band-dark {
  --bg: #F4F1EB; --bg-2: #EAE5DC; --surface: #FFFFFF; --surface-2: #FBF9F5;
  --ink: #141317; --ink-2: #46424C; --ink-3: #55505B; --line: rgba(20, 19, 23, .16); --line-2: rgba(20, 19, 23, .07);
  --accent: #4B2EC6; --gold: #654810; --stone: #55505B; --btn-bg: #141317; --btn-ink: #F4F1EB; --btn-bg-hover: #000;
  --logo-dark: block; --logo-light: none; color-scheme: light; border-bottom-color: var(--line-2);
}

/* ================================ 6. WARM LIGHT (the light theme's atmosphere; LC-R2's best light screen had it) ================================ */
/* Home hero: a peach glow behind the stage object. It dies out before the plane's foot, so the join with the ladder is still cream on cream. */
[data-theme="light"] main#innehall .r3x-h-hero {
  background: radial-gradient(ellipse 58% 46% at 72% 38%, rgba(var(--r3-c-glow), .50), rgba(var(--r3-c-glow), .18) 55%, rgba(var(--r3-c-glow), 0) 100%), var(--r3-c);
}
/* Growth hero (the stage plane): the same peach light behind the stage object */
[data-theme="light"] main#innehall:not(.tier-premium) [data-plane="graphite"].r3-plane--first {
  background: radial-gradient(ellipse 56% 50% at 70% 42%, rgba(var(--r3-c-glow), .42), rgba(var(--r3-c-glow), .14) 55%, rgba(var(--r3-c-glow), 0) 100%), var(--r3-c);
}
/* every ask plane (the former graphite): a warm light behind the question, low on the plane, gone well before its foot, so the footer still starts on plain cream */
[data-theme="light"] main#innehall:not(.tier-premium) [data-plane="graphite"]:not(.r3-plane--first):not(.r3p-close) {
  background:
    radial-gradient(ellipse 54% 44% at 22% 34%, rgba(var(--r3-c-glow), .36), rgba(var(--r3-c-glow), .12) 58%, rgba(var(--r3-c-glow), 0) 100%),
    linear-gradient(180deg, var(--r3-from, var(--r3-c-page)) 0, var(--r3-c) var(--r3-fade)) top / 100% var(--r3-fade) no-repeat,
    var(--r3-c);
}