/* ============================================================
   ABHYAS — KITE SKY THEME (design handoff 2026-07-18)
   The ONE token sheet. Loaded before worksheets.css on every page
   EXCEPT the print/PDF worksheet template — that stays unthemed.

   Modes: data-theme on <html> is "auto" (follow OS), "light" or "dark".
   Rules (see .claude/skills/design-system/SKILL.md):
   - every colour is a token; never hard-code a hex in components
   - --pen (red) = grading marks + validation errors ONLY;
     focus rings and active tabs are --ink
   - --ok = correct/success and nothing else
   - --kite (saffron) = structural warmth, never status, never a button fill
   ============================================================ */

:root, :root[data-theme="light"] {
  /* ground */
  --bg:        #E4EEF9;   /* sky ground behind everything */
  --paper:     #FDFEFF;   /* cards, sheets, inputs */
  --paper-2:   #F4F8FD;   /* inset wells, table heads, card footers */
  /* ink */
  --ink:       #223564;   /* headings, body, primary-button fill */
  --ink-hover: #1B2C55;   /* primary button hover */
  --ink-active:#16254A;   /* primary button pressed */
  --on-ink:    #FDFEFF;   /* text on ink fills */
  --ink-soft:  #4D5C86;   /* secondary text, subheads */
  --pencil:    #66748F;   /* captions, metadata (AA at 12px+) */
  --rule:      #C7D8EC;   /* hairlines, dividers, chip strokes */
  /* red pen — RESERVED for marks: ticks, crosses, stamps, errors */
  --pen:       #C43C2B;
  --pen-deep:  #9E2E20;
  --pen-wash:  #FAE7E3;
  /* correct / success */
  --ok:        #2A7A53;
  --ok-deep:   #1E5A3C;
  --ok-wash:   #E1F1E8;
  /* saffron kite accent — structural warmth, never status */
  --kite:      #EFA63B;   /* decorative fills ONLY (kite art, glow) */
  --kite-wash: #FAEDD3;   /* chip / kicker background */
  --kite-ink:  #7C520F;   /* text on wash + saffron labels (AA) */
  --kite-deep: #A96F12;   /* saffron strokes, icons, large text */
  /* worksheet-card subject edges — vibrant, decorative-only (home mock) */
  --subject-math:    #3B63C9;
  --subject-science: #2FA96B;
  --subject-english: #F0981C;
  /* elevation */
  --shadow:      0 1px 2px rgba(34,53,100,.07), 0 6px 18px rgba(34,53,100,.08);
  --shadow-lift: 0 2px 4px rgba(34,53,100,.08), 0 14px 28px rgba(34,53,100,.13);
  /* the sky: saffron glow top-right + 26px graph grid + vertical gradient */
  --sky: radial-gradient(560px 420px at 86% -70px, rgba(239,166,59,.18), transparent 70%),
         linear-gradient(rgba(34,53,100,.05) 1px, transparent 1px),
         linear-gradient(90deg, rgba(34,53,100,.05) 1px, transparent 1px),
         linear-gradient(#EAF2FB, #DEE9F7);
  --sky-size: auto, 26px 26px, 26px 26px, auto;
  /* compat aliases — older components reference these */
  --edge: var(--rule);
  --edge-strong: var(--rule);
  --btn-bg: var(--ink);
  --btn-fg: var(--on-ink);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg:        #1A2233;
  --paper:     #232D44;
  --paper-2:   #1C2537;
  --ink:       #E9EEFA;   /* primary buttons flip to chalk automatically */
  --ink-hover: #F4F7FD;
  --ink-active:#DCE4F5;
  --on-ink:    #1A2233;
  --ink-soft:  #B3BDD6;
  --pencil:    #94A0BB;
  --rule:      rgba(233,238,250,.15);
  --pen:       #F0826B;   /* marks brighten at night, never darken */
  --pen-deep:  #F5A38F;
  --pen-wash:  rgba(240,130,107,.13);
  --ok:        #82CEA6;
  --ok-deep:   #A5DDC0;
  --ok-wash:   rgba(130,206,166,.12);
  --kite:      #F3BC67;
  --kite-wash: rgba(243,188,103,.12);
  --kite-ink:  #F6CE8E;
  --kite-deep: #E9A94A;
  --subject-math:    #7FA3F2;   /* subject edges brighten at night */
  --subject-science: #57C990;
  --subject-english: #F2B04E;
  --shadow:      0 1px 2px rgba(0,0,0,.28), 0 6px 18px rgba(0,0,0,.30);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.30), 0 14px 30px rgba(0,0,0,.40);
  /* night sky: graph LINES become star DOTS, same 26px pitch; glow → moon */
  --sky: radial-gradient(480px 380px at 86% -70px, rgba(243,188,103,.10), transparent 70%),
         radial-gradient(rgba(233,238,250,.09) 1px, transparent 1.5px),
         linear-gradient(#202940, #151C2B);
  --sky-size: auto, 26px 26px, auto;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg:        #1A2233;
    --paper:     #232D44;
    --paper-2:   #1C2537;
    --ink:       #E9EEFA;
    --ink-hover: #F4F7FD;
    --ink-active:#DCE4F5;
    --on-ink:    #1A2233;
    --ink-soft:  #B3BDD6;
    --pencil:    #94A0BB;
    --rule:      rgba(233,238,250,.15);
    --pen:       #F0826B;
    --pen-deep:  #F5A38F;
    --pen-wash:  rgba(240,130,107,.13);
    --ok:        #82CEA6;
    --ok-deep:   #A5DDC0;
    --ok-wash:   rgba(130,206,166,.12);
    --kite:      #F3BC67;
    --kite-wash: rgba(243,188,103,.12);
    --kite-ink:  #F6CE8E;
    --kite-deep: #E9A94A;
    --subject-math:    #7FA3F2;
    --subject-science: #57C990;
    --subject-english: #F2B04E;
    --shadow:      0 1px 2px rgba(0,0,0,.28), 0 6px 18px rgba(0,0,0,.30);
    --shadow-lift: 0 2px 4px rgba(0,0,0,.30), 0 14px 30px rgba(0,0,0,.40);
    --sky: radial-gradient(480px 380px at 86% -70px, rgba(243,188,103,.10), transparent 70%),
           radial-gradient(rgba(233,238,250,.09) 1px, transparent 1.5px),
           linear-gradient(#202940, #151C2B);
    --sky-size: auto, 26px 26px, auto;
    color-scheme: dark;
  }
}

::selection { background: var(--kite-wash); color: var(--ink); }

/* the brand kite: a rotated saffron square bobbing on its string */
.kite-mark { position: relative; width: 22px; height: 22px; flex: none;
  display: inline-block; align-self: center; vertical-align: -4px; }
.kite-mark::before { content: ""; position: absolute; inset: 3px;
  background: var(--kite); border: 1.5px solid var(--kite-deep);
  transform: rotate(45deg); border-radius: 2px;
  animation: kite-bob 5s ease-in-out infinite; }

/* the kite mark bobbing on its string (transform-only, GPU-cheap) */
@keyframes kite-bob {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50%      { transform: rotate(47deg) translate(2px, -3px); }
}