/* ============================================
   NAGAIKI · Colors + Type
   Premium-but-approachable longevity. Navy + gold. Editorial.
   Singapore launch 2026.
   ============================================ */

/* ── FONTS ─────────────────────────────────── */
/* TWO families only.
   Fraunces — display serif (titles, large numerals, italics for the gold accent word)
   DM Sans  — everything else: body, UI, buttons, eyebrows, labels, inline data
   Both SIL OFL 1.1, both on Google Fonts. No local files needed.
   NOTE: Cormorant Garamond + DM Mono are SUPERSEDED — do not use. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,300;1,9..144,400&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  /* ── CORE PALETTE ─────────────────────────── */
  /* Deep navy substrate — the brand's quiet "night-sky" canvas */
  --navy:        #0f1c2e;     /* base background */
  --navy-mid:    #1a2d42;     /* elevated surface (cards, modals) */
  --navy-light:  #243650;     /* highest surface, dividers */

  /* Gold — the single accent; "morning light." ONE warm accent, never two. */
  --gold:        #c9a96e;     /* primary accent */
  --gold-light:  #e8d5b0;     /* hover / emphasis */
  --gold-dim:    #b89466;     /* meta, eyebrows — AA on navy at all sizes (~5:1) */

  /* Cream — soft warm white, the brand "white." Used on dark only. */
  --cream:       #f5f0e8;
  --cream-dark:  #ede5d4;
  --white:       #ffffff;

  /* Text ramp on dark */
  --text-body:   #d4cfc6;     /* body copy on navy */
  --text-muted:  #7a8a99;     /* secondary, metadata (use >=14px; nudge to body on small) */

  /* Semantic — DATA LEVEL ONLY (biomarker deltas, alerts). Never a page accent. */
  --green:       #4caf8a;     /* positive / improved */
  --red:         #e07060;     /* warning / declined */
  --blue:        #648cc8;     /* informational (physician layer) */

  /* ── ALPHA TINTS on navy (use these, not hex, for layering) ── */
  --gold-04:     rgba(201,169,110,0.04);
  --gold-06:     rgba(201,169,110,0.06);
  --gold-08:     rgba(201,169,110,0.08);
  --gold-12:     rgba(201,169,110,0.12);
  --gold-15:     rgba(201,169,110,0.15);
  --gold-20:     rgba(201,169,110,0.20);
  --gold-30:     rgba(201,169,110,0.30);
  --white-04:    rgba(255,255,255,0.04);
  --white-08:    rgba(255,255,255,0.08);

  /* ── TYPE FAMILIES ────────────────────────── */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-mono:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; /* legacy alias only; eyebrows, labels, data use --font-body */
  /* Eyebrows, labels and inline data all use --font-body (DM Sans). No mono. */

  /* ── TRACKING (letter-spacing) ───────────── */
  --track-eyebrow: 0.22em;   /* DM Sans uppercase eyebrows */
  --track-label:   0.10em;   /* uppercase button/labels */
  --track-tight:   -0.01em;  /* large display */

  /* ── SIZE RAMP ──────────────────────────── */
  --fs-eyebrow: 11px;
  --fs-meta:    12px;
  --fs-body:    15px;
  --fs-body-lg: 16px;
  --fs-h4:      20px;       /* card title */
  --fs-h3:      28px;       /* section subhead */
  --fs-h2:      36px;       /* section title */
  --fs-h1:      52px;       /* page title */
  --fs-display: 80px;       /* hero */

  /* ── LINE HEIGHT ─────────────────────────── */
  --lh-display: 1.08;       /* Fraunces sits a touch taller than Cormorant */
  --lh-heading: 1.15;
  --lh-body:    1.75;
  --lh-prose:   1.85;

  /* ── RADII ───────────────────────────────── */
  /* Brand favors SHARP corners. Radii used sparingly, mainly for circles. */
  --r-none:   0;
  --r-sm:     2px;
  --r-md:     4px;
  --r-pill:   999px;
  --r-circle: 50%;

  /* ── SPACING ─────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 120px;

  /* ── SHADOWS ────────────────────────────── */
  /* Warm (gold-tinted), never neutral grey. On hover/active only — never at rest. */
  --shadow-sm:   0 2px 12px rgba(201,169,110,0.08);
  --shadow-md:   0 8px 30px rgba(201,169,110,0.25);
  --shadow-lg:   0 12px 40px rgba(201,169,110,0.30);
  --shadow-glow: 0 0 20px rgba(201,169,110,0.5);   /* on the gold dot */

  /* ── BORDERS ────────────────────────────── */
  /* Hairline borders in gold-12 are the brand's signature divider treatment. */
  --hair:        1px solid var(--gold-12);
  --hair-strong: 1px solid var(--gold-20);
  --hair-faint:  1px solid var(--gold-08);

  /* ── MOTION ─────────────────────────────── */
  --ease:    cubic-bezier(.4, 0, .2, 1);
  --dur-1:   0.2s;
  --dur-2:   0.3s;       /* default */
  --dur-3:   0.7s;       /* fade-up reveals */
  --dur-rotate: 30s;     /* slow ambient rotation */
}

/* ── BASE ─────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
  background: var(--navy);
  color: var(--text-body);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* ── SEMANTIC TYPE CLASSES ────────────────── */
/* Fraunces for editorial weight, DM Sans for everything utilitarian.
   Italicise ONE key word per display headline, set in gold: <em>word</em>. */

.h-display {                         /* hero */
  font-family: var(--font-display);
  font-size: clamp(52px, 7vw, 80px);
  font-weight: 300;
  line-height: var(--lh-display);
  letter-spacing: var(--track-tight);
  color: var(--cream);
}
.h-display em { font-style: italic; color: var(--gold); }

.h1 {                                /* page / section title */
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 300;
  line-height: var(--lh-heading);
  color: var(--cream);
}
.h1 em { font-style: italic; color: var(--gold); }

.h2 {                                /* sub-section */
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: var(--lh-heading);
  color: var(--cream);
}

.h3 {                                /* card title */
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--cream);
}

.h4 {                                /* mini title */
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--cream);
}

.eyebrow {                           /* DM Sans kicker above titles */
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow--dim { color: var(--gold-dim); }
.eyebrow--rule {                     /* eyebrow with leading hairline */
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.eyebrow--rule::before {
  content: '';
  width: 40px; height: 1px;
  background: currentColor;
}

.p {                                 /* body copy */
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-prose);
  color: var(--text-body);
}
.p strong { color: var(--cream); font-weight: 400; }

.meta {                              /* small grey copy */
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.6;
}

.label {                             /* UPPERCASE form label / button */
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold-light);
}

.data {                              /* inline data value — DM Sans, tabular */
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--cream);
}
.data.positive { color: var(--green); }
.data.negative { color: var(--red); }

.numeral {                           /* Big editorial number — Fraunces */
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--gold);
}

/* ── MOTION SAFETY ────────────────────────── */
/* Content must never be hidden if JS / animation doesn't run. Reveal classes
   start hidden ONLY when this stylesheet's JS adds .js-reveal to <html>;
   otherwise honour reduced-motion and show everything. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── LIGHT THEME (rare; for forms/print/exports) ── */
.theme-light {
  background: var(--cream);
  color: var(--navy);
}
.theme-light .h-display,
.theme-light .h1,
.theme-light .h2,
.theme-light .h3 { color: var(--navy); }
.theme-light .h-display em,
.theme-light .h1 em { color: var(--gold-dim); }
.theme-light .p { color: #4a5468; }
.theme-light .meta { color: #6b7785; }