/* ===========================================================================
   revocle-light.css — the site-wide light theme.

   Loads on every page, after revocle-site.css and revocle-pages.css, and does
   nothing at all unless the visitor's device asks for light. Everything below
   lives inside one @media (prefers-color-scheme: light) block, so the dark
   theme is untouched by construction — this file can only ever add.

   Most of the work is done by redefining the design system's custom
   properties. What follows the palette is the list of rules in the dark
   stylesheets that hardcoded a colour and therefore need a counterpart.

   Deliberately still dark on light: the vinyl disc, the cassette and the
   Studio mockup. Those are physical objects and a product screenshot — a
   black record on a warm page reads correct, a beige one reads broken.

   Contrast was measured, not estimated: headings 14.8:1, body 7.8:1,
   meta 4.6:1, links 5.7:1, white on the accent button 6.5:1 — all AA.
   =========================================================================== */

@media (prefers-color-scheme: light){

  :root{
    --bg:oklch(95.4% .012 82);
    --bg2:oklch(93.2% .016 80);
    --panel:oklch(99% .006 88 / .82);
    --line:oklch(38% .025 70 / .2);
    --line2:oklch(38% .025 70 / .12);

    --cream:oklch(23% .024 55);
    --muted:oklch(41% .024 65);
    --faint:oklch(53% .022 68);

    --accent:oklch(50% .185 38);
    --accent-2:oklch(43% .17 30);
    --violet:oklch(46% .17 295);
    --green:oklch(45% .13 158);
    --rose:oklch(50% .17 12);

    /* one surface token so every card below stays in step */
    --surface:oklch(100% 0 0 / .84);
    --surface-2:oklch(100% 0 0 / .94);
    --shadow:oklch(35% .03 60 / .1);

    color-scheme:light;
  }

  /* --- ambient ----------------------------------------------------------- */
  .aurora{
    background:
      radial-gradient(54% 42% at 16% -8%,oklch(86% .07 45 / .55),transparent 62%),
      radial-gradient(46% 38% at 88% 4%,oklch(88% .05 300 / .45),transparent 60%),
      radial-gradient(52% 46% at 50% 112%,oklch(89% .06 30 / .5),transparent 62%),
      var(--bg);
  }
  .aurora::after{background-image:radial-gradient(oklch(30% .04 45 / .07) 1px,transparent 1px)}
  .grain{display:none}                      /* reads as dirt on a light page */
  .cursor-glow{background:radial-gradient(circle,oklch(62% .16 45 / .08),transparent 62%)}

  /* --- chrome ------------------------------------------------------------ */
  .nav.scrolled{background:oklch(97% .008 84 / .86);border-color:var(--line)}
  .mobile-menu{background:oklch(97.5% .008 84 / .98)}
  .scrim{background:oklch(30% .01 70 / .38)}
  .brand picture{display:contents}

  /* --- buttons ----------------------------------------------------------- */
  .btn-gold,.btn-gold:hover,.mobile-menu a.btn-gold,.toggle button.active,.pbadge{
    color:oklch(100% 0 0);
  }
  .btn-gold{box-shadow:0 6px 20px oklch(55% .17 40 / .26),inset 0 1px 0 oklch(100% 0 0 / .22)}
  .btn-gold:hover{box-shadow:0 10px 30px oklch(55% .17 40 / .36)}
  .btn-ghost{background:oklch(100% 0 0 / .6);border-color:var(--line);color:var(--cream)}
  .btn-ghost:hover{background:oklch(100% 0 0 / .95);border-color:oklch(50% .185 38 / .4)}

  /* --- surfaces ---------------------------------------------------------- */
  .card,.store,.step,.s-card,.chip,.plan,.num-card,.panel,.pcard,.chkbox,.gcard,.deep-item{
    background:var(--surface);
    border-color:var(--line);
  }
  .card{background:linear-gradient(170deg,oklch(100% 0 0 / .92),oklch(99% .008 85 / .74))}
  .card:hover{border-color:oklch(50% .185 38 / .38);box-shadow:0 18px 44px var(--shadow)}
  .num-card{background:oklch(100% 0 0 / .9)}
  .num-card:hover{background:oklch(100% 0 0)}
  .plan{background:linear-gradient(170deg,oklch(100% 0 0 / .92),oklch(99% .008 85 / .76))}
  .plan:hover{border-color:oklch(50% .185 38 / .4)}
  .plan.pop{
    border-color:oklch(50% .185 38 / .5);
    background:linear-gradient(170deg,oklch(96% .045 45 / .8),oklch(100% 0 0 / .9));
    box-shadow:0 24px 60px oklch(55% .12 45 / .16);
  }
  .store:hover{background:oklch(100% 0 0);border-color:oklch(50% .185 38 / .34)}
  .panel{box-shadow:0 1px 2px oklch(35% .03 60 / .05),0 14px 38px oklch(35% .03 60 / .07)}
  .box{background:oklch(100% 0 0 / .9);border-color:var(--line)}
  .pcard:hover,.chkbox:hover{background:oklch(100% 0 0);border-color:oklch(50% .185 38 / .4)}
  .calc-card{
    background:linear-gradient(165deg,oklch(100% 0 0 / .94),oklch(98% .012 82 / .86));
    border-color:oklch(50% .185 38 / .3);
    box-shadow:0 24px 60px var(--shadow);
  }
  .bar-track{background:oklch(88% .012 80)}
  .tl i{background:oklch(80% .015 75)}
  .tape-b{background:oklch(97% .01 82 / .93)}
  /* The orange band keeps the accent gradient, which is deeper in this theme
     than in dark — so its text flips to white rather than staying near-black.
     The second band is outlined type by design (color:transparent + a stroke);
     darken the stroke rather than filling it in, which would lose the effect. */
  .tape-a .tp{color:oklch(100% 0 0)}
  .tape-a .star{color:oklch(100% 0 0 / .8)}
  .tape-b .tp{color:transparent;-webkit-text-stroke:1px oklch(38% .025 70 / .55)}
  .tape-b .star{color:oklch(38% .025 70 / .45)}
  .dsp{color:oklch(41% .024 65 / .8)}
  .dsp .sep{color:oklch(38% .025 70 / .28)}

  /* --- text that was written for a dark background ------------------------ */
  .prose{color:var(--muted)}
  .prose em,.prose b{color:var(--cream)}
  .prose a{color:var(--accent);text-decoration-color:oklch(50% .185 38 / .35)}
  .prose ul{border-left:2px solid oklch(50% .185 38 / .16)}
  .prose code{background:oklch(96% .01 80);border-color:var(--line)}
  .cmp{color:var(--muted)}
  .cmp td:last-child{background:oklch(97% .012 80 / .8)}
  .chkbox,.consent{color:var(--muted)}
  .field .help{color:var(--faint)}
  .gdesc{color:var(--muted)}
  .field :is(input,select,textarea){background:oklch(100% 0 0 / .9);border-color:var(--line);color:var(--cream)}
  .field :is(input,select,textarea)::placeholder{color:var(--faint)}
  .login-err{color:oklch(48% .17 25);border-color:oklch(55% .16 25 / .4);background:oklch(96% .04 25 / .6)}

  /* --- depth: black shadows go warm and much lighter ---------------------- */
  /* The Studio mockup goes light as a whole. Keeping the window dark while
     its cards inherited the light surface left a dark frame around light
     content — worse than either choice made consistently. */
  .studio{
    background:oklch(99% .006 86 / .96);
    border:1px solid var(--line);
    box-shadow:0 40px 90px oklch(35% .03 60 / .18),inset 0 1px 0 oklch(100% 0 0 / .7);
  }
  .studio-bar{border-bottom:1px solid var(--line2)}
  .url{background:oklch(96% .008 84);border:1px solid var(--line2);color:var(--faint)}
  .tl i{background:oklch(86% .01 75)}
  .s-card{background:oklch(97.5% .008 84 / .8);border-color:var(--line2)}
  .bars i{background:linear-gradient(180deg,oklch(58% .17 42 / .85),oklch(58% .17 42 / .18))}
  .bars i.hot{background:linear-gradient(180deg,var(--accent),oklch(62% .14 60 / .32));
    box-shadow:0 0 18px oklch(55% .17 44 / .3)}
  .plan.pop,.card,.calc-card,.num-card{--shadow:oklch(35% .03 60 / .1)}

  /* --- Help Center specifics --------------------------------------------- */
  .hcat,.hlist a:hover,.help-search{background:var(--surface-2)}
  .hcat:hover{background:oklch(100% 0 0);border-color:oklch(50% .185 38 / .42)}
  .hsec-title{color:var(--accent)}
  .hcat:nth-child(6n+1) .hicon{background:oklch(50% .185 38 / .12);color:var(--accent)}
  .hcat:nth-child(6n+2) .hicon{background:oklch(46% .17 295 / .12);color:var(--violet)}
  .hcat:nth-child(6n+3) .hicon{background:oklch(45% .13 158 / .13);color:var(--green)}
  .hcat:nth-child(6n+4) .hicon{background:oklch(50% .17 12 / .12);color:var(--rose)}
  .hcat:nth-child(6n+5) .hicon{background:oklch(47% .14 245 / .12);color:oklch(47% .14 245)}
  .hcat:nth-child(6n+6) .hicon{background:oklch(43% .17 30 / .12);color:var(--accent-2)}

  /* --- left deliberately dark --------------------------------------------
     .disc/.hole/.vlabel  — the vinyl record
     .c-body/.c-window/.c-label/.spool/.tape-fill — the cassette
     .disc-mini/.login-disc — smaller vinyl records
     .tw-* (tweaks panel) — dev-only, present in no page's markup
     ----------------------------------------------------------------------- */

  /* --- second pass: gaps found by auditing the dark stylesheets ----------- */

  /* The brand sheen is a near-white highlight masked by the WHITE lockup PNG.
     On light it is invisible, and the light lockup has different proportions
     so the mask would not line up either. Retire it for this theme. */
  .brand::after{display:none}
  .brand:hover .mark{filter:drop-shadow(0 3px 12px oklch(50% .185 38 / .3))}

  /* calculator slider: unfilled track was a dark bar */
  .calc-slider{background:linear-gradient(90deg,var(--accent) var(--fill,10%),oklch(86% .012 80) var(--fill,10%))}
  .calc-slider::-webkit-slider-thumb{box-shadow:0 4px 14px oklch(35% .03 60 / .28)}
  .calc-slider::-moz-range-thumb{box-shadow:0 4px 14px oklch(35% .03 60 / .28)}

  /* subpage surfaces the first pass missed */
  .ccard,.lead,.quote-mini,.stat-strip>div,.side-stack .rx,.contact-cards .rx{
    background:var(--surface);border-color:var(--line);
  }
  .more>summary span{color:var(--faint)}
  .more,.fsec{border-color:var(--line2)}

  /* the oversized footer wordmark is an outline — a light stroke disappears */
  .foot-word{-webkit-text-stroke:1px oklch(38% .025 70 / .18)}

  /* dashed orbit rings were drawn for a dark sky */
  .orbit,.ringx,.ring-bg{border-color:oklch(38% .025 70 / .16)}

  /* remaining pure-black drop shadows go warm and much lighter */
  .coin-scene,.coin-float,.cassette{filter:drop-shadow(0 12px 26px oklch(35% .03 60 / .18))}

  /* --- third pass: selectors that outrank a bare class override -----------
     The form redesign block in revocle-pages.css uses .page-grid>.panel and
     .field input, which beat a plain .panel or .field :is(...). These
     counterparts mirror those selectors exactly, so specificity ties and
     source order decides — this file loads last. --------------------------- */

  a:hover{color:var(--accent)}
  html.is-mobile .nav{background:oklch(97% .008 84 / .92);border-bottom:1px solid var(--line)}

  /* the form card lifts off the page — in the other direction */
  .page-grid>.panel,.side-panel,.login-card{
    background:linear-gradient(168deg,oklch(100% 0 0 / .94),oklch(99% .008 85 / .9));
    border:1px solid var(--line);
    box-shadow:0 18px 48px oklch(35% .03 60 / .1),inset 0 1px 0 oklch(100% 0 0 / .6);
  }

  /* labels were near-white for the dark panel */
  .field label{color:var(--cream)}
  .field .help{color:var(--faint)}

  /* fields sit ON the panel: on light that means slightly tinted, not white
     on white, so the input still reads as a distinct surface */
  .field input,.field select,.field textarea{
    background:oklch(97.5% .008 84);
    border:1px solid oklch(38% .025 70 / .26);
    color:var(--cream);
  }
  .field input::placeholder,.field textarea::placeholder{color:var(--faint)}
  .field :is(input,select,textarea):hover{
    background:oklch(99% .004 85);border-color:oklch(38% .025 70 / .4);
  }
  .field :is(input,select,textarea):focus{
    background:oklch(100% 0 0);
    border-color:oklch(50% .185 38 / .85);
    box-shadow:0 0 0 4px oklch(50% .185 38 / .16);
  }
  /* The chevron SVG is stroked light grey for the dark theme. Restating it
     dark also means restating repeat/position: the `background:` shorthand in
     the rule above resets them, which would tile the arrow across the control
     — the same trap the dark stylesheet documents. */
  .field select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235a5148' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 15px center;
  }

  /* comparison table rules were drawn light-on-dark */
  .cmp th,.cmp td{border-bottom-color:var(--line2)}
  .cmp thead th{border-bottom-color:var(--line)}

  /* --- fourth pass: text sitting ON the accent -----------------------------
     --accent is a deeper orange in this theme (50% vs the dark theme's 72%),
     so anything that put near-black text on an accent fill lost contrast.
     The tape band was the visible case; these are the rest. ---------------- */
  ::selection{color:oklch(100% 0 0)}
  .fnode.hi{color:oklch(100% 0 0)}
  .ok-icon{color:oklch(100% 0 0)}
  .lava{color:oklch(100% 0 0)}

  /* Help Center search + category pages */
  .hres{background:oklch(99% .006 88);border-color:var(--line);
    box-shadow:0 24px 60px oklch(35% .03 60 / .16)}
  .hres-item:hover,.hres-item.is-active{background:oklch(96% .01 84);border-color:var(--line)}
  .hart,.hchip{background:var(--surface-2)}
  .hart:hover{border-color:oklch(50% .185 38 / .42)}
  .hchip:hover{border-color:oklch(50% .185 38 / .45);color:var(--cream)}
}