/* Tử Vi · Bát Tự — its own night (redesign of 1 Nov 2026, the owner: "UI thật đẹp, UX mượt, hình ảnh + motion").
   Tử Vi is a region of the sky (Tử Vi viên, round the pole star), and its charts were kept like lacquer boxes, so the
   app is painted as a lacquer night: an indigo-black ground, ivory text, gold leaf (vàng quỳ) as the one accent, and
   son (cinnabar) only where a seal belongs (Tuần, Triệt). Loaded after the shared Terranimus tokens (tokens.css stays
   untouched); every name the app's styles use is set here on <body>, so the loader, the first face and the tool all
   take it. Type: Cormorant Garamond for display, Be Vietnam Pro (made for Vietnamese) for everything read. */

html { background: oklch(0.165 0.03 268); color-scheme: dark; }

body {
  color-scheme: dark;
  /* Anchors */
  --night: oklch(0.165 0.03 268);
  --gold: oklch(0.81 0.112 82);
  --gold-deep: oklch(0.72 0.12 76);
  --son-red: oklch(0.57 0.17 28);

  /* The shared names, repainted */
  --paper: var(--night);
  --paper-sunk: oklch(0.205 0.032 268);
  --paper-deep: oklch(0.25 0.034 268);
  --ink: oklch(0.95 0.018 85);
  --ink-soft: oklch(0.83 0.02 85);
  --ink-faint: oklch(0.64 0.02 85);
  --rule: color-mix(in oklab, var(--gold) 16%, transparent);
  --rule-strong: color-mix(in oklab, var(--gold) 30%, transparent);
  --clay: var(--gold);
  --clay-ink: var(--gold);
  --clay-fill: var(--gold);
  --on-clay: oklch(0.17 0.03 268);
  --clay-soft: color-mix(in oklab, var(--gold) 15%, var(--paper-sunk));
  --clay-ring: color-mix(in oklab, var(--gold) 40%, var(--night));
  --danger-ink: oklch(0.75 0.15 25);
  --glass: color-mix(in oklab, var(--paper-sunk) 74%, transparent);
  --glow: 0 0 0 1px color-mix(in oklab, var(--gold) 55%, transparent), 0 10px 40px -12px color-mix(in oklab, var(--gold) 45%, transparent);

  --serif: 'Cormorant Garamond', 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Be Vietnam Pro', 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-variant-numeric: lining-nums; /* Cormorant draws old-style figures by default; dates and hours read better lining */
}

/* The sky behind every page: a fixed field of small stars, drawn once as an image (no work per frame). */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 78% -10%, color-mix(in oklab, var(--gold) 9%, transparent), transparent 70%),
    radial-gradient(900px 700px at -10% 110%, oklch(0.3 0.08 268 / 0.35), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cg fill='%23f3e8cf'%3E%3Ccircle cx='12' cy='30' r='.7' opacity='.55'/%3E%3Ccircle cx='70' cy='8' r='.5' opacity='.4'/%3E%3Ccircle cx='121' cy='61' r='.9' opacity='.6'/%3E%3Ccircle cx='190' cy='22' r='.6' opacity='.45'/%3E%3Ccircle cx='260' cy='48' r='.8' opacity='.5'/%3E%3Ccircle cx='302' cy='110' r='.5' opacity='.35'/%3E%3Ccircle cx='40' cy='140' r='.6' opacity='.4'/%3E%3Ccircle cx='96' cy='188' r='.5' opacity='.35'/%3E%3Ccircle cx='160' cy='150' r='1.1' opacity='.7'/%3E%3Ccircle cx='230' cy='196' r='.6' opacity='.45'/%3E%3Ccircle cx='288' cy='240' r='.8' opacity='.5'/%3E%3Ccircle cx='18' cy='262' r='.9' opacity='.55'/%3E%3Ccircle cx='132' cy='292' r='.6' opacity='.4'/%3E%3Ccircle cx='200' cy='270' r='.5' opacity='.35'/%3E%3Ccircle cx='250' cy='312' r='.7' opacity='.45'/%3E%3Ccircle cx='60' cy='228' r='.4' opacity='.3'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 320px 320px,
    var(--night);
}

::selection { background: color-mix(in oklab, var(--gold) 38%, var(--night)); color: var(--ink); }

/* Print: paper and ink again, whatever the screen shows. */
@media print {
  html { background: #fff; color-scheme: light; }
  body {
    --paper: #fff; --paper-sunk: #f4f1ec; --paper-deep: #e9e4dc; --ink: #141110; --ink-soft: #4a433e; --ink-faint: #6b625c;
    --rule: #d9d2c8; --rule-strong: #b9b0a4; --gold: #8a5a00; --clay: #8a5a00; --clay-ink: #8a5a00; --clay-fill: #8a5a00; --on-clay: #fff;
    background: #fff; color: #000;
  }
  body::before { display: none; }
}

/* Native select popups (language switcher, school, policies...). The page is always the lacquer night, so the controls say so
   (color-scheme: dark) and every select and option gets an OPAQUE background and an explicit ink from the tokens. A translucent
   select background (the language pill's tint) left the OS popup white behind ivory option text: unreadable but the hovered row. */
select { color-scheme: dark; background-color: var(--paper); color: var(--ink); }
select option, select optgroup { background-color: var(--paper-sunk); color: var(--ink); }
select option:checked, select option:hover { background-color: var(--clay-soft); color: var(--ink); }
@media print { select { color-scheme: light; } }