/* ===========================================================================
 * Dijiwa Design System — Tokens
 * ---------------------------------------------------------------------------
 * Single source of truth for brand chrome + type roles + type scale.
 * Owner-locked: NO gold. NO brown. Anywhere. The four named brand-gold
 * tones and the warm-dark nav are explicitly dropped (see the dropped-hexes
 * list in design_system.md §1). All accent pigments pivot to the cool half
 * of the spectrum. Cyan Green replaces the prior brand-gold chrome token.
 *
 * Imported once at the top of every dashboard HTML page.
 * Out of scope: frontend/login.html (cinematic dark login, separate surface).
 * =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..900&display=swap');

:root {
  /* ---- 2.1 Brand tokens (chrome / borders / active states ONLY) ---------
   * Brand surface and chart surface are SIBLINGS, not parent/child —
   * Cyan Green never appears in a chart series, and chart hues never appear
   * in chrome. See dye-palette.css for the chart-side siblings.
   * --------------------------------------------------------------------- */
  --brand:          #006E64;   /* Cyan Green — kain cepuk indigo family */
  --brand-text:     #006E64;   /* Cyan Green as text — 5.3:1 on the neutral grey page bg, clears WCAG AA */
  --dark:           #0A0A0A;   /* nav / ink — true near-black */
  --warm:           #F4F4F5;   /* page bg — neutral grey, no warm cast */
  --tint:           #80C2B6;   /* cool light tint, hover washes */
  --surface-light:  #FFFFFF;   /* chart surface — white (charts sit on white cards) */
  --surface-dark:   #0A0A0A;   /* chart surface — dark mode (replaces #1a1a19 — now true near-black) */

  /* ---- 2.6 Group markers (reserved — never in categorical rotation) ----- */
  --dijiwa-border:  #006E64;   /* Dijiwa hotel card border-left */
  --lokalua-border: #ec4899;   /* Lokalua hotel card border-left (KEPT — pink is not gold/brown) */

  /* ---- 3.1 Type roles ---------------------------------------------------- */
  --font-display:   'Fraunces', 'Times New Roman', serif;
  --font-body:      'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-utility:   ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
                    Helvetica, Arial, sans-serif;

  /* Display rule: Fraunces ships with optical sizing ON so the same face
   * reads correctly at 14px eyebrow vs 48px hero. */
  font-optical-sizing: auto;

  /* ---- Forced light ------------------------------------------------------
   * Tells the UA to render native chrome (form controls, scrollbars, the
   * default canvas) in LIGHT even when the OS/browser is in dark mode.
   * Without this a dark-mode browser paints <select>/<input>/checkbox/
   * scrollbar in dark UA styling on top of our neutral grey page. Pairs with the
   * removed prefers-color-scheme block below — both are required.
   * --------------------------------------------------------------------- */
  color-scheme: light;
}

/* ---- Colour scheme: FORCED LIGHT (no prefers-color-scheme: dark block) ----
 * DELIBERATE. Do NOT re-add an auto-invert here.
 * The brand IS neutral grey (--warm) + Cyan Green (--brand) + near-black ink (--dark).
 * These are CHROME, not data colours: swapping --warm ↔ --dark turned the page
 * background black, flipped body ink to a light tone, left white cards popping off a
 * black surface, and broke the sidebar (verified from a user screenshot,
 * 2026-08-19). A real dark mode needs a parallel token set, re-tuned charts and
 * every contrast ratio re-validated — that is its own project, not a swap.
 * --------------------------------------------------------------------- */

/* ===========================================================================
 * 3.2 Type scale — project-specific, locked.
 * Each role is exposed as CSS custom properties so chart/JS code can read the
 * values without recomputing. Class equivalents live in style.css.
 * =========================================================================== */
:root {
  /* Numerals: tabular for column-aligned numbers; proportional only on num-hero. */
  --num-tabular:    tabular-nums;

  /* eyebrow — 10.5/600/+0.09em — section labels above a chart (TOTAL, WEEK) */
  --eyebrow-size:   10.5px;
  --eyebrow-weight: 600;
  --eyebrow-track:  0.09em;

  /* caption — 12/400 — source citations under a chart, tooltip footers */
  --caption-size:   12px;
  --caption-weight: 400;

  /* small — 14/400 — table headers, dense rows */
  --small-size:     14px;
  --small-weight:   400;

  /* body — 16/400 — body paragraphs, table cells */
  --body-size:      16px;
  --body-weight:    400;

  /* h4 — 18/600 — card titles, panel heads */
  --h4-size:        18px;
  --h4-weight:      600;
  --h4-track:       0;

  /* h3 — 20/600/-0.005em — section heads within a page */
  --h3-size:        20px;
  --h3-weight:      600;
  --h3-track:       -0.005em;

  /* h2 — 24/700/-0.01em — page subtitles */
  --h2-size:        24px;
  --h2-weight:      700;
  --h2-track:       -0.01em;

  /* h1 — 30/700/-0.015em — page titles */
  --h1-size:        30px;
  --h1-weight:      700;
  --h1-track:       -0.015em;

  /* num-hero — 48/600/-0.015em — proportional numerals, the single hero number */
  --num-hero-size:    48px;
  --num-hero-weight:  600;
  --num-hero-track:   -0.015em;
}