/* ==========================================================================
   kc-light.css - the kalyanchart.com skin for the SHARED app chrome.

   Loaded by partials.php head(), immediately after app.css, ONLY when
   site() === 'kc'. matkamatrix.com never requests this file, so nothing here
   can reach the MM (dark) skin.

   WHY A TOKEN FLIP IS ENOUGH: app.css states its palette as 20 custom
   properties (app.css:7-28) and 220 of its 276 colour-bearing declarations
   (80%) already read them through var(--...). Redefining the tokens on :root
   from a later stylesheet repaints all 220 at once. The ~46 places app.css
   writes a literal hex are handled one by one at the bottom of this file.

   IT REPLACES the inline <style> that used to sit at partials.php:33-35 and
   painted kalyanchart.com DARK (--bg:#0a0d0a, --ink:#e8ece6). That single
   block was why every KC app page wore the MM look.

   PALETTE: measured from the live kalyanchart.com, and identical to the one
   kcblock.php and finder-light.css already use, so the app chrome, the result
   block and the Finder are one house.
   ========================================================================== */

:root {
  color-scheme: light;

  /* surfaces */
  --bg:        #fffdf5;   /* the KC page: warm white, not pure white        */
  --bg-2:      #fffaf0;   /* inset strips, inputs, tooltips                 */
  --card:      #fff;      /* every .card, .plan, .tile, .row                */
  --card-2:    #fffaf0;   /* the second surface inside a card               */
  --line:      #e6ddc4;   /* KC's own rule colour                           */

  /* ink */
  --ink:       #151005;   /* 18.6:1 on --bg                                 */
  --ink-2:     #4a4438;   /*  9.5:1, body copy                              */
  --ink-3:     #6b6559;   /*  5.7:1, the quietest text we ship              */

  /* gold: a FILL and a TEXT colour, and they are NOT the same colour.
     #f5c518 measures 1.6:1 on white, so it can carry dark text but can
     never BE text. #8a6d00 is the same gold as type, 4.8:1 = AA. */
  --gold:      #f5c518;
  --gold-ink:  #8a6d00;
  --gold-dim:  #b3901f;   /* 3.0:1 borders (.plan.feat, .buybar, .deadline) */

  /* state */
  --hot:       #1d9e63;   /* KC's brand green. A FILL/border at 3.4:1.      */
  --hot-ink:   #157a4c;   /* the same green as small TEXT, 5.3:1 = AA.      */
  --cold:      #6b6559;
  --broke:     #b3261e;   /* 6.4:1                                          */
  --focus:     #1552b0;   /* 7.2:1, matches the Finder's family-1 blue      */

  --shadow:    0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.07);

  /* kalyanchart.com's own face. Lato carries no Devanagari, so the Hindi
     edition still falls through to Noto Sans Devanagari, as before. */
  --sans: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Devanagari", Roboto, sans-serif;
}

/* --------------------------------------------------------------------------
   THE RESIDUAL: the places app.css writes a literal hex instead of a token.
   Each one is listed with the app.css line it answers.
   -------------------------------------------------------------------------- */

/* app.css:478 .tk-live, :159 .note-ok, :345 .mdcell.dst .dg.on all paint
   var(--hot) as small text. The brand green is a fill colour (3.4:1); as text
   it must be the darker one. Everything else keeps #1d9e63. */
.tk-live, .note-ok, .mdcell.dst .dg.on { color: var(--hot-ink); }

/* app.css:352-358 the number families {1,6,4,9} {2,7,3,8} {5,0}. The literals
   are tuned for a dark page, and app.css only corrects them inside
   @media (prefers-color-scheme: light) - so a KC visitor whose phone is in
   dark mode got #4da3ff on warm white. These are the Finder's own family
   colours (finder-light.css --f1/--f2/--f3), so the book page and the chart
   now name a digit family in the same colour. */
.fam1 { color: #1552b0; }   /* 1 6 4 9 */
.fam2 { color: #7b2fbe; }   /* 2 7 3 8 */
.fam3 { color: #b5651d; }   /* 5 0     */

/* app.css:460, :477, :498 draw a border in var(--card-2). On the dark skin
   that is a visible step up from the page; on KC --card-2 is #fffaf0 and the
   border disappears against #fff. Use the rule colour instead. */
.peek .shot,
.ticker,
.hero-shot img { border-color: var(--line); }

/* app.css:656, :661, :678 matte the product screenshots in #0b0d10 so a
   contain-fitted PNG blends into the dark page. On warm white that is a black
   slab around each shot. (Reachable on KC through compare.php's promo_peek()
   and through plan_visual() on kchome.php's pricing cards.) */
.peek .shot.look img,
.peek .shot.finder img,
.plan-visual .pv-shot { background: #fff; }

/* Dark-page drop shadows, restated at light-page weight. app.css:450 .veilcard,
   :498 .hero-shot img, :678 .plan-visual .pv-shot, :643 the 3-D book cover. */
.veilcard        { box-shadow: 0 10px 34px rgba(0,0,0,.10); }
.hero-shot img   { box-shadow: 0 18px 46px rgba(0,0,0,.12); }
.plan-visual .pv-shot { box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.book3d .b3-cover { box-shadow: 0 16px 32px rgba(0,0,0,.22), inset 4px 0 8px rgba(0,0,0,.25); }

/* app.css:595-634 the purchase toast. Below 720px it is already token-driven
   and follows the flip. From 720px up app.css hard-codes a near-black card
   with white text, deliberately, "so it stands out in BOTH schemes". On KC
   that is the only black object on the page. Same job, KC materials: a white
   card, the 2px gold border and the gold glow kept, ink text. */
@media (min-width: 720px) {
  .sp {
    background: #fff; color: var(--ink); border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(21,16,5,.06), 0 18px 48px rgba(21,16,5,.16), 0 0 36px rgba(245,197,24,.45);
  }
  .sp-txt b { color: var(--ink); }
  .sp-p     { color: var(--gold-ink); }
  .sp-av    { background: var(--gold); color: #151005; box-shadow: 0 0 0 3px rgba(245,197,24,.30); }
  .sp-cta   { color: var(--gold-ink); }
  .sp:hover .sp-cta, .sp:focus-within .sp-cta { color: var(--ink); }
  .sp-x     { color: var(--ink-3); }
  .sp-x:hover, .sp-x:focus-visible { color: var(--ink); background: rgba(21,16,5,.07); }
}