/* ============================================================
   theme.css — the palette.

   Two sources, each kept to its own job:
     · from the Srinivas Panchang app — the cream-yellow ground #FFFFCC,
       the green structure colour, and the meaning pair
       shubha green / ashubha red   #D7F3D3·#1B5E20 / #FBDCDC·#B71C1C
     · from the site it replaces — kumkuma #B31B1B and pasupu #FFC40C,
       used for the CHROME only: the brand band, its pasupu edge, the
       footer ground.

   Kumkuma never fills a content cell, so it cannot be mistaken for the
   ashubha red. The meaning pair holds its contrast in both themes and is
   never the only encoding of anything.

   Light is the base. Dark redefines TOKENS ONLY — a designed counterpart
   rather than an inversion: the ground goes to a deep green-black, the
   cream becomes the ink, and the band deepens to a dark kumkuma.
   ============================================================ */

:root {
  /* ---- kumkuma & pasupu ---- */
  /* #B31B1B is 6.8:1 under white text; the band's darker end only raises it.
     Pasupu is 13:1 under black and 1.6:1 under white — dark ink only. On
     the band it is 4.3:1 against the light end, enough for the 2–3px rules
     and focus ring it draws there (non-text contrast needs 3:1). */
  --kumkuma:       #B31B1B;
  --kumkuma-deep:  #8C1515;
  --pasupu:        #FFC40C;
  --pasupu-soft:   #FFF1B8;   /* 5.7:1 under --ink-muted, 6.9:1 under --structure */

  /* ---- ground & surfaces ---- */
  --ground:        #FFFFCC;   /* the app's page colour, unchanged */
  --ground-deep:   var(--pasupu-soft);   /* chrome bands sitting on the ground */
  --surface:       #FFFFFF;   /* cards, as in the app */
  --surface-alt:   #FFFEF0;
  --surface-sunk:  #F7F5C6;

  /* ---- ink ---- */
  --ink:           #212121;
  --ink-mid:       #444444;
  /* 5.5:1 on the cream ground and better than 5:1 on every soft fill —
     the earlier #6A6A55 measured 4.3:1 against the balam tiles and failed
     AA for the 11px notes on them. */
  --ink-muted:     #5F5F4A;

  --hair:          #E4E2B4;
  --hair-strong:   #CFCB92;

  /* ---- brand: the kumkuma band ---- */
  --brand-from:    var(--kumkuma-deep);
  --brand-to:      var(--kumkuma);
  --brand:         var(--kumkuma);
  --brand-deep:    var(--kumkuma-deep);
  --brand-ink:     #FFFFFF;   /* text on the gradient */
  --brand-soft:    #FBE6E1;

  /* Text ON a filled accent or structure surface. These flip with the theme
     because the fills themselves flip: --accent is a deep red on paper and a
     pale salmon on the dark ground, so a fixed white would be unreadable on
     one of them. */
  --on-accent:     #FFF6F0;
  --on-structure:  #FFFFFF;

  /* ---- structure: green, replacing the earlier indigo ---- */
  --structure:     #1B5E20;
  --structure-mid: #2D6A2D;
  --structure-soft:#E4F0E1;

  /* ---- accent: the app's red, for today / festivals / critical ---- */
  --accent:        #C62828;
  --accent-deep:   #B71C1C;
  --accent-soft:   #FBDCDC;

  /* ---- amber: notes, era labels, dividers ---- */
  /* The app's #B26A00 measures 4.12:1 on the cream ground, just under AA
     for the 12px labels it carries. Darkened until it clears 4.5 while
     staying the same amber. */
  --brass:         #A05F00;
  --brass-soft:    #FFF8E1;
  --brass-edge:    #FFE082;
  --brass-ink:     #6B4E00;

  /* ---- the meaning pair ---- */
  --shubha:        #2E7D32;
  --shubha-ink:    #1B5E20;
  --shubha-soft:   #D7F3D3;
  --ashubha:       #C62828;
  --ashubha-ink:   #B71C1C;
  --ashubha-soft:  #FBDCDC;

  --neutral-band:  #EDEBC0;
  /* Amavasya cells. Lightened from #DDD9E8: the dark amber and red that sit
     on this tint were failing AA against it, and lifting the ground is the
     fix that keeps both foregrounds recognisable. */
  --night:         #EAE7F3;

  --shadow:        0 1px 2px rgba(33,33,20,.06), 0 8px 22px -14px rgba(33,33,20,.24);
  --shadow-lift:   0 2px 5px rgba(33,33,20,.09), 0 18px 40px -20px rgba(33,33,20,.34);

  --radius:        10px;
  --radius-sm:     6px;
  --maxw:          1180px;

  --font-ui:       "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display:  "Tiro Devanagari Sanskrit", "Noto Serif", Georgia, serif;
  --font-num:      "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --font-indic:    "Nirmala UI", "Noto Sans", sans-serif;

  --brand-band:    linear-gradient(135deg, var(--brand-from), var(--brand-to));
}

/* The dark counterpart. Not an inversion: the green stays the structure
   colour and the cream becomes the ink, so the two themes read as the same
   product rather than as a photo and its negative. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:        #12170F;
    --ground-deep:   #0C100A;
    --surface:       #1B2117;
    --surface-alt:   #222A1D;
    --surface-sunk:  #171D14;

    --ink:           #F3F1D8;
    --ink-mid:       #CFCDB4;
    --ink-muted:     #9C9B82;

    --hair:          #2C3427;
    --hair-strong:   #414B39;

    --brand-from:    #3B0C0A;
    --brand-to:      #6A1614;
    --brand:         #E8837A;
    --brand-deep:    #F4B1A8;
    --brand-ink:     #F3F1D8;
    --brand-soft:    #2A1512;
    --on-accent:     #2A100C;
    --on-structure:  #10240F;

    --structure:     #8ED389;
    --structure-mid: #7FBE7F;
    --structure-soft:#1A2417;

    --accent:        #F08A7E;
    --accent-deep:   #FFA79B;
    --accent-soft:   #34201D;

    --brass:         #E0B34F;
    --brass-soft:    #2A2313;
    --brass-edge:    #4A3D1F;
    --brass-ink:     #E8CC8A;

    --shubha:        #6DB48C;
    --shubha-ink:    #A8E6A3;
    --shubha-soft:   #17301B;
    --ashubha:       #E4807A;
    --ashubha-ink:   #F4B1B1;
    --ashubha-soft:  #34201D;

    --neutral-band:  #2A3124;
    --night:         #262238;

    --shadow:        0 1px 2px rgba(0,0,0,.55), 0 8px 22px -14px rgba(0,0,0,.8);
    --shadow-lift:   0 2px 5px rgba(0,0,0,.6), 0 18px 40px -20px rgba(0,0,0,.88);
  }
}

:root[data-theme="dark"] {
  --ground:        #12170F;
  --ground-deep:   #0C100A;
  --surface:       #1B2117;
  --surface-alt:   #222A1D;
  --surface-sunk:  #171D14;

  --ink:           #F3F1D8;
  --ink-mid:       #CFCDB4;
  --ink-muted:     #9C9B82;

  --hair:          #2C3427;
  --hair-strong:   #414B39;

  --brand-from:    #3B0C0A;
  --brand-to:      #6A1614;
  --brand:         #E8837A;
  --brand-deep:    #F4B1A8;
  --brand-ink:     #F3F1D8;
  --brand-soft:    #2A1512;
  --on-accent:     #2A100C;
  --on-structure:  #10240F;

  --structure:     #8ED389;
  --structure-mid: #7FBE7F;
  --structure-soft:#1A2417;

  --accent:        #F08A7E;
  --accent-deep:   #FFA79B;
  --accent-soft:   #34201D;

  --brass:         #E0B34F;
  --brass-soft:    #2A2313;
  --brass-edge:    #4A3D1F;
  --brass-ink:     #E8CC8A;

  --shubha:        #6DB48C;
  --shubha-ink:    #A8E6A3;
  --shubha-soft:   #17301B;
  --ashubha:       #E4807A;
  --ashubha-ink:   #F4B1B1;
  --ashubha-soft:  #34201D;

  --neutral-band:  #2A3124;
  --night:         #262238;

  --shadow:        0 1px 2px rgba(0,0,0,.55), 0 8px 22px -14px rgba(0,0,0,.8);
  --shadow-lift:   0 2px 5px rgba(0,0,0,.6), 0 18px 40px -20px rgba(0,0,0,.88);
}
