/* ==========================================================================
   samay.css — the one place Samay's palette is defined.
   ==========================================================================

   Before this file, every surface carried its own :root block: twelve Python
   page-renderers and seven Jinja templates, each with private values. --gold
   was #f0c86c on the landing, #c9a227 in the account page and #f0c060 in
   readings; --line had six different values. Changing "the brand gold" meant
   editing nineteen files and missing some, which is why the app read as three
   different products depending on where you were.

   Rules from here on:

   1. Raw hex belongs in this file and nowhere else. A page that needs a colour
      uses var(--token).
   2. Pages keep a :root block ONLY to alias a legacy local name onto a
      primitive here — e.g. `--gold2:var(--saffron)`. Aliases carry no values.
      This is deliberate: --gold2 means the saffron gradient stop on the
      landing page and the bright highlight on the panchang, and collapsing
      those two meanings is a visual decision per page, not a find-and-replace.
   3. Adding a token is fine. Redefining one locally is not.

   Load it before the page's own <style> so page rules win on specificity ties.

   TWO WORLDS
   ----------
   Samay has a day face and a night face. `:root` below is अग्नि (Agni) — the
   ember palette the app has always shipped. `:root[data-world="ratri"]`
   further down is रात्रि (Ratri) — midnight indigo, pale brass, moonlight
   blue. Nothing else in the codebase knows there are two: every surface reads
   the same token names and gets whichever world is on.

   /static/world.js picks the world before first paint — by the clock, unless
   the visitor has chosen one. Sunrise to dusk is Agni; dusk to dawn is Ratri.

   The `[data-world]` blocks use `:root[...]` (specificity 0,2,0) rather than a
   bare attribute selector so they beat any page's `:root` alias block
   regardless of stylesheet order.
   ------------------------------------------------------------------------ */

:root{
  /* ── Ground ─────────────────────────────────────────────────────────── */
  --bg:#120605;                          /* the warm near-black everything sits on */
  --bg-rgb:18,6,5;                       /* same colour, for rgba() scrims over artwork */
  --bg-2:#1c0806;
  --bg-grad:radial-gradient(ellipse 90% 70% at 50% -10%,
            #2e0c09 0%, #1c0806 45%, #120605 100%);
  --panel:#120605;

  /* Two card surfaces, deliberately distinct — several pages need both.
     --card is glass (sits over artwork); --surf-solid is opaque. */
  --card:rgba(255,255,255,.04);
  --card-hi:rgba(255,255,255,.08);
  --surf-solid:#1c0c08;
  /* Two tints above --surf-solid, for controls that must read as raised
     against a card: segmented-control tracks, chips, sheet headers. */
  --surf-2:#30160f;
  --surf-3:#401e16;

  /* ── Rules & hairlines ──────────────────────────────────────────────── */
  --line:rgba(240,200,140,.16);
  --line-hi:rgba(240,200,108,.35);

  /* ── Ink ────────────────────────────────────────────────────────────── */
  --text:#fff2e8;                        /* body copy */
  --ink:#f4e9cf;                         /* body copy, warmer variant */
  --body-c:#e6d2c3;
  --muted:#c4a893;                       /* captions, secondary */
  --mut2:#a08672;
  --faint:#7a5c4e;                       /* NOTE: 3.29:1 on --bg — fails WCAG AA
                                            for body text. Lifting it to ~#9d7d6b
                                            is a one-line change here now, which
                                            was the point of this file. Left at
                                            the incumbent value so the migration
                                            diff stays purely structural. */

  /* ── Brand ──────────────────────────────────────────────────────────── */
  --gold:#f0c86c;                        /* the brand gold */
  --gold-hi:#ffe19a;                     /* brighter gold — highlights, glints */
  --gold-hi-rgb:255,225,154;             /* same, for the rays and comet streaks */
  --gold-deep:#e3ad42;                   /* deeper gold — gradient shadow side */
  --saffron:#ff8a3a;
  --crimson:#e05038;
  --maroon:#8a2420;
  --accent:#f0c86c;
  --accent2:#f0c86c;
  --accent2-rgb:240,200,140;             /* for rgba() composition */
  --btn-text:#0a0800;                    /* ink on a gold button */
  --halo:rgba(240,200,108,.45);          /* the glow under gold buttons and glints */

  /* ── The orb ────────────────────────────────────────────────────────────
     Samay's face on the reading screen, and the largest single object in the
     app. Its body is a radial gradient from the accent down into these two
     shades. They were hardcoded warm browns, which Wave 1d missed: under
     रात्रि the sky went indigo and the orb stayed brown, so the centrepiece
     of the main screen read muddy against everything around it. */
  --orb-mid:#2e1e1a;                     /* the sphere's shaded flank */
  --orb-deep:#160f0d;                    /* its dark limb */
  --face-bg:#36170f;                     /* behind the talking-head clip */

  /* The two coloured clouds in the page wash behind everything. */
  --nebula-1:rgba(170,40,26,.24);
  --nebula-2:rgba(190,55,30,.14);

  /* ── Artwork ────────────────────────────────────────────────────────────
     The hero renders (splash-crimson, splash-film, mandala) were painted in
     Agni's ember reds, so Agni shows them untouched. Ratri re-tints them with
     a filter — see the note on --art-filter in the Ratri block. */
  --art-filter:none;

  /* The starfield canvas is painted in JS, which can't use var() — these are
     read out with getComputedStyle and re-read when the world changes.
     Comma-separated triples so the alpha can be composed per particle. */
  --star-rgb:255,241,230;                /* the twinkling stars */
  --ember-rgb:246,210,138;               /* the motes rising through them */

  /* The slow aurora behind /home. Largest single area of colour on the page,
     so it is a token rather than three literals buried in a body::before. */
  --aurora:
    radial-gradient(500px 400px at 30% 20%, rgba(190,45,30,.26), transparent 60%),
    radial-gradient(600px 500px at 78% 45%, rgba(210,70,45,.18), transparent 60%),
    radial-gradient(500px 400px at 50% 88%, rgba(255,138,58,.15), transparent 60%);

  /* The same idea at different stops — nav_bar.py paints this one behind every
     inner page, which is why /panchang and /account read as the same sky as
     the landing rather than as separate products. */
  --aurora-2:
    radial-gradient(640px 480px at 82% -4%, rgba(190,52,30,.30), transparent 62%),
    radial-gradient(560px 460px at 8% 84%, rgba(150,36,22,.26), transparent 60%),
    radial-gradient(700px 300px at 50% 108%, rgba(255,138,58,.10), transparent 60%);

  /* ── Semantic ───────────────────────────────────────────────────────── */
  --good:#86b394;
  --bad:#c98a8a;
  --warn:#f6b352;
  --ok:#ffb57d;

  /* ── Category accents (panchang, calendar, reports) ─────────────────── */
  --green:#86b394;
  --blue:#ffc79c;
  --pink:#ffb4c6;
  --fest:#ffb4c6;                        /* festival */
  --vrat:#8fe3c0;                        /* vrat */
  --graha:#ffc79c;                       /* planetary event */
  --bubble:#331912;                      /* chat bubble ground */
}

/* --------------------------------------------------------------------------
   The world toggle, built by /static/world.js on every page that links it.
   --------------------------------------------------------------------------
   Agni and Ratri switch themselves on the clock, so this is an override rather
   than a primary control — a quiet 34px disc, not a fifth nav tab. Styling
   lives here because the markup is generated in one place; a page that wants
   it somewhere else can restyle .skvworld without touching the script.
   -------------------------------------------------------------------------- */
/* Top-right, one row BELOW the हिं/EN pill. The first placement was the top
   corner itself, where it sat straight on top of the language switcher on
   /calendar and /panchang. Both corners of row one are spoken for on nearly
   every page — title left, language right — so the toggle takes row two,
   which is empty on all of them. */
.skvworld{position:fixed;top:calc(58px + env(safe-area-inset-top));right:12px;z-index:1200;
  width:34px;height:34px;border-radius:50%;cursor:pointer;line-height:1;font-size:15px;
  display:flex;align-items:center;justify-content:center;font-family:inherit;
  background:rgba(var(--bg-rgb),.72);border:1px solid var(--line);color:var(--gold);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.skvworld:hover{border-color:var(--line-hi)}
.skvworldpop{position:fixed;top:calc(98px + env(safe-area-inset-top));right:12px;z-index:1200;
  background:var(--surf-solid);border:1px solid var(--line);border-radius:13px;padding:7px;
  display:none;flex-direction:column;gap:2px;min-width:178px;
  box-shadow:0 14px 34px rgba(0,0,0,.45)}
.skvworldpop.open{display:flex}
.skvworldpop button{display:flex;align-items:center;gap:9px;width:100%;padding:8px 9px;
  border:none;background:none;border-radius:8px;cursor:pointer;text-align:left;
  font-family:inherit;font-size:12.5px;color:var(--text)}
.skvworldpop button:hover{background:var(--card-hi)}
.skvworldpop button.on{background:var(--card-hi);color:var(--gold)}
.skvworldpop i{width:15px;height:15px;border-radius:50%;flex:none;font-style:normal;
  border:1px solid rgba(255,255,255,.3)}

/* ==========================================================================
   रात्रि — Ratri. The night face.
   ==========================================================================
   Overrides only. Any token not listed here keeps its Agni value on purpose:
   --good / --bad / --warn / --vrat are semantic, and a green that means "yes"
   has to stay the same green after dark or it stops meaning anything.

   Warm token NAMES carry cool values here (--saffron is a moonlight blue,
   --crimson a deep indigo). That reads wrong until you remember rule 2: a
   token names the ROLE it plays, and --saffron's role is "the warm-side stop
   of the brand gradient". Renaming the primitives is a separate change; doing
   it here would have touched all nineteen surfaces for no visual gain.
   -------------------------------------------------------------------------- */
:root[data-world="ratri"]{
  /* ── Ground ─────────────────────────────────────────────────────────── */
  --bg:#070a16;
  --bg-rgb:7,10,22;
  --bg-2:#0b1024;
  --bg-grad:radial-gradient(ellipse 90% 70% at 50% -10%,
            #111a3c 0%, #0b1024 45%, #070a16 100%);
  --panel:#070a16;

  /* Glass is lifted a touch: the same 4% white reads darker over indigo than
     it does over ember, and the cards were disappearing. */
  --card:rgba(255,255,255,.055);
  --card-hi:rgba(255,255,255,.10);
  --surf-solid:#111528;
  --surf-2:#161c33;
  --surf-3:#1d2544;

  /* ── Rules & hairlines ──────────────────────────────────────────────── */
  --line:rgba(200,210,240,.16);
  --line-hi:rgba(180,200,255,.34);

  /* ── Ink ────────────────────────────────────────────────────────────── */
  --text:#eff1fa;
  --ink:#eae7f4;
  --body-c:#d6dae8;
  --muted:#a9b0cc;
  --mut2:#8b93b2;
  --faint:#7c86a8;                       /* 5.6:1 on --bg — unlike Agni's
                                            --faint this one passes AA, which
                                            is an argument for lifting Agni's
                                            to match. */

  /* ── Brand ──────────────────────────────────────────────────────────── */
  /* Brass, deepened twice from the mockup. The first pass used the palette
     page's #e8d8a8 / #fbf1d2, which looked right on a swatch and came out as
     a bleached-cream pill on the real splash button — the gradient ran
     cream → cream → pale blue with nothing dark enough to read as metal.
     These carry more pigment so the sweep across a 300px button is visible. */
  --gold:#dcc68d;
  --gold-hi:#f2e6bd;
  --gold-hi-rgb:242,230,189;
  --gold-deep:#b89c5e;
  --saffron:#8aa2dc;                     /* warm-side gradient stop → moonlight */
  --crimson:#5c74b8;
  --maroon:#253566;
  --accent:#8fa8e0;
  --accent2:#e8d8a8;
  --accent2-rgb:232,216,168;
  --btn-text:#080b16;
  --halo:rgba(180,200,255,.42);

  /* The orb, cooled. Same construction, indigo flank and limb, so the sphere
     sits in Ratri's sky instead of on top of it. */
  --orb-mid:#1c2447;
  --orb-deep:#0a0f22;
  --face-bg:#141b33;
  --nebula-1:rgba(58,78,168,.26);
  --nebula-2:rgba(96,116,206,.15);

  /* ── Semantic ───────────────────────────────────────────────────────── */
  --ok:#9fb4e8;                          /* not semantic — a decorative peach */

  /* ── Category accents ───────────────────────────────────────────────── */
  --blue:#9fb4e8;
  --pink:#e0a8c8;
  --fest:#e0a8c8;
  --graha:#9fb4e8;
  --bubble:#161c33;

  /* ── Artwork ────────────────────────────────────────────────────────────
     A filter, not a second set of renders. hue-rotate() is a matrix
     approximation of a hue shift, not a true HSL rotation, so the crimson
     nebula lands close to but not exactly on the indigo above — good enough
     to ship, and the reason the real fix is a re-rendered night hero rather
     than a better filter string. 235deg was picked off a six-value test
     strip; the obvious 186deg came out teal. */
  --art-filter:hue-rotate(235deg) saturate(.9) brightness(1.28) contrast(1.04);

  /* Embers become moonlight. The particles are the same particles — only the
     colour changes, so nothing has to be re-simulated when dusk lands. */
  --star-rgb:226,232,250;
  --ember-rgb:176,198,244;

  --aurora:
    radial-gradient(500px 400px at 30% 20%, rgba(40,60,150,.30), transparent 60%),
    radial-gradient(600px 500px at 78% 45%, rgba(60,85,180,.20), transparent 60%),
    radial-gradient(500px 400px at 50% 88%, rgba(143,168,224,.14), transparent 60%);

  --aurora-2:
    radial-gradient(640px 480px at 82% -4%, rgba(42,64,158,.32), transparent 62%),
    radial-gradient(560px 460px at 8% 84%, rgba(30,46,120,.28), transparent 60%),
    radial-gradient(700px 300px at 50% 108%, rgba(143,168,224,.10), transparent 60%);
}

/* --------------------------------------------------------------------------
   Migration status — complete for every user-facing surface.
   --------------------------------------------------------------------------
   Each migrated page links this file AND /static/world.js, and keeps a :root
   of aliases only, no values.

   Two worlds forced a second pass over these files. Collapsing the :root
   blocks was enough while there was one palette — a literal #f0c86c and
   var(--gold) were the same colour, so a missed literal was invisible. Under
   Ratri they are not, and every missed literal is a gold button on an indigo
   page. 64 further rules were moved onto tokens; the four kinds of place that
   still hold a literal, because var() cannot reach them:

     canvas 2d          ctx.fillStyle takes a colour string. voice.html reads
                        --star-rgb / --ember-rgb out with getComputedStyle
                        instead, and re-reads them on SamayWorld.onChange.
     SVG attributes     fill="#f0c86c" is an attribute, not a property. The
                        chakra SVGs in voice.html and the ring in myday.html
                        stay ember in both worlds. Fixable with a CSS `fill`
                        rule; not done here.
     data: URIs         the grain texture in home.html — the CSS parser never
                        looks inside one.
     Razorpay           its overlay takes one hex. themeGoldHex() passes the
                        live computed --gold, so it follows the world anyway.

   Two deliberate visual changes came out of this, both in Agni:
     account_page.py    button ink #150e04 -> --btn-text (#0a0800). Both are
                        near-black on gold; they are now the same near-black.
     rashifal.html      its private two-lobe page wash -> --aurora-2, the wash
                        every other inner page already had. ~18/255 shift in
                        the top band; the point is that it is now the same sky.
   Everything else renders pixel-identical in Agni (verified by screenshot
   diff across six surfaces; panchang and the splash came back at zero).

   Aliases per file:

     templates/voice.html     --gold2 -> --saffron   (gradient stop, not highlight)
     templates/home.html      --void -> --bg, --gold-2 -> --gold-deep
     templates/match.html     --card -> --surf-solid, --gold2 -> --gold-hi,
                              --accent -> --crimson
     templates/rashifal.html  as match, plus --card2 -> --surf-solid
     templates/myday.html     no aliases needed
     account_page.py          --card -> --surf-solid
     mala_page.py             --card -> --surf-solid, --gold2 -> --gold-deep,
                              --accent -> --crimson
     astrologers_page.py      --card -> --surf-solid   (both renderers)
     reports_page.py          --card -> --surf-solid, --gold2 -> --gold-hi,
                              --accent -> --crimson
     report_pages.py          --gold2 -> --gold-hi
     panchang_page.py         --gold2 -> --gold-hi
     my_reports_page.py       no aliases needed
     calendar_page.py         no aliases needed
     nav_bar.py               no aliases — it never had a :root; the shared
                              ambience it injects (backdrop art, aurora,
                              comets, bar ground) is now all tokens

   Deliberately NOT migrated, each for its own reason:

     build_report_unified.py     Rendered to PDF by WeasyPrint. One of those
                                 calls passes no base_url, so a <link> to this
                                 file would not resolve and the PDF would come
                                 out unstyled. Keep its CSS self-contained.
     admin_console.py            Internal tooling. The indigo palette is a
     track.py                    deliberate "this is not the product" signal,
     dashboard.py                not drift.
     static/animated_report.html Standalone artefact, shared outside the app.
     templates/index.html        /classic — legacy page, frozen.
     templates/readings.html     Dead: /readings redirects to /account#qa and
                                 nothing renders this template. Delete rather
                                 than migrate.
   -------------------------------------------------------------------------- */