/* ──────────────────────────────────────────────────────────────
   Celesty Astra — shared brand tokens (SINGLE SOURCE OF TRUTH)

   Change a brand primitive here and it propagates to the landing
   page AND every tool that links this file. Each page maps these
   --brand-* variables onto its own local variable names in its own
   :root, so page-specific tokens (layout, account colors, etc.)
   stay local while the brand stays unified.

   DESIGN LANGUAGE — "電影感 / cinematic" (2026-07-01 redesign):
   near-OLED blacks, warm projector-white text, indigo night +
   spotlight-gold accents, an editorial display serif for brand/
   headline moments, mono "film credit" labels, and a site-wide
   film-grain + vignette atmosphere (the body::before/::after
   overlays below — every page that links this file gets them).

   Linked by:  index.html (root)  ·  retirement/  ·  options/
               atl-arrivals/  ·  box-spread/  ·  future tools
   ────────────────────────────────────────────────────────────── */
:root {
  /* Surfaces — deep cinema blacks (were #09090b / #0f0f12) */
  --brand-bg:          #050507;
  --brand-bg-2:        #0b0b11;
  --brand-surface:     rgba(255,255,255,0.04);
  --brand-border:      rgba(255,255,255,0.08);

  /* Text — warm projector white, not clinical pure white */
  --brand-text:        #f5f3ee;
  --brand-text-muted:  #a3a099;

  /* Accent — indigo night + violet, with a spotlight gold counterpoint */
  --brand-accent:      #6366f1;            /* indigo — primary */
  --brand-accent-2:    #8b5cf6;            /* purple — secondary */
  --brand-accent-glow: rgba(99,102,241,0.35);
  --brand-gold:        #d9a441;            /* spotlight gold — cinematic warm accent */
  --brand-gold-glow:   rgba(217,164,65,0.25);

  /* Typography (2026-07-03 liquid-glass redesign)
     display — Instrument Serif italic for brand wordmarks & hero headlines
     head    — UI headings, KPI numbers, data-dense surfaces (unchanged)
     body    — Barlow, light-leaning running text and controls
     mono    — uppercase wide-tracked "film credit" labels */
  --brand-font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --brand-font-head:   'Archivo', sans-serif;
  --brand-font-body:   'Barlow', 'Space Grotesk', sans-serif;
  --brand-font-mono:   'DM Mono', ui-monospace, monospace;

  /* Film-credit label treatment (pair with --brand-font-mono) */
  --brand-credit-tracking: 0.32em;

  /* Motion — one shared rhythm; cinema variant for slow reveals */
  --brand-ease:        cubic-bezier(0.16,1,0.3,1);
  --brand-dur-cinema:  900ms;
}

/* ── Shared responsive baseline ─────────────────────────────────
   Applied automatically to every page that links this file — the
   site-wide guarantee that no page can end up wider than the
   phone's viewport (the "loads zoomed-in / gap on the right"
   failure). Every tool still owns its own layout, but these
   invariants hold everywhere:

   1. The layout viewport never exceeds the device width. overflow-x
      clip (with hidden as the legacy fallback) stops iOS from
      expanding the initial scale when some inner element overflows.
   2. No mobile-browser font inflation (text-size-adjust).

   Per-tool rules that pair with this baseline (see root CLAUDE.md):
   grid/flex track children need min-width:0, and any table or wide
   widget belongs inside an overflow-x:auto wrapper. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body {
  max-width: 100%;
  overflow-x: hidden;   /* fallback */
  overflow-x: clip;     /* preferred: clips without creating a scroll container */
}

/* ── Liquid glass (shared utilities) ────────────────────────────
   Apple-style frosted pills/cards with a gradient rim that catches
   light top and bottom (the padding + mask-composite trick draws the
   rim without a border). Available to every page and future tool:
   .liquid-glass for nav pills / secondary buttons / chips,
   .liquid-glass-strong for primary raised controls. Pair with a
   pill border-radius for controls; any radius works for cards. */
.liquid-glass {
  background: rgba(255,255,255,0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%,
    rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0)    40%,
    rgba(255,255,255,0)    60%,
    rgba(255,255,255,0.15) 80%,
    rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.liquid-glass-strong {
  background: rgba(255,255,255,0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  border: none;
  box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15);
  position: relative;
  overflow: hidden;
}
.liquid-glass-strong::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.5) 0%,
    rgba(255,255,255,0.2) 20%,
    rgba(255,255,255,0)   40%,
    rgba(255,255,255,0)   60%,
    rgba(255,255,255,0.2) 80%,
    rgba(255,255,255,0.5) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ── Shared cinematic atmosphere ────────────────────────────────
   Applied automatically to every page that links this file.
   Both layers are fixed, non-interactive, and cheap to paint
   (a static tiled SVG noise + one radial gradient). */

/* Vignette — darkened frame edges, like a projected image */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  background: radial-gradient(ellipse 130% 110% at 50% 45%,
              transparent 62%, rgba(0,0,0,0.38) 100%);
}

/* Film grain — subtle static noise over everything */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2147483001;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}