/* ============================================================
   ChartSet shared stylesheet
   Brand tokens are defined here once so the three pages
   cannot drift apart. Page-specific CSS stays in each page.
   Source: design_handoff_chartset_brand/README.md
           Charted V2/DesignSystem/ChartedTheme.swift
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* Brand */
  --brand:            #0B5CD5;   /* primary cobalt, app icon background */
  --brand-hover:      #0849AA;
  --brand-text:       #0849AA;   /* cobalt as text on paper */
  --brand-soft:       #EAF2FD;
  --mark-primary:     #0B5CD5;   /* the 7 cobalt ring cells */
  --mark-accent:      #8CB8F7;   /* bottom-center ring cell */
  --mark-accent-light:#B9D3FA;   /* bottom-right ring cell */

  /* Ground & ink */
  --paper:            #F5F3EE;
  --surface:          #FFFFFF;
  --chart-paper:      #FFFFFF;
  --chart-ink:        #16161A;
  --ink:              #16161A;
  --ink-muted:        #62605A;
  --ink-faint:        #8A8880;
  --hairline:         #DDD9D1;
  --hairline-strong:  #C9C5BB;
  --on-brand:         #FFFFFF;

  --shadow-card:  0 1px 2px rgba(22,22,26,.05), 0 12px 32px rgba(11,42,92,.07);
  --shadow-chart: 0 1px 1px rgba(22,22,26,.06), 0 18px 44px rgba(11,42,92,.12);

  /* Type */
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-display: clamp(34px, 5.6vw, 56px);
  --fs-h2:      clamp(23px, 3.1vw, 30px);
  --fs-lead:    clamp(17px, 1.5vw, 20px);
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-label:   12px;

  /* Spacing (4px grid) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px;

  --radius-pill: 999px;
  --radius-card: 14px;
  --radius-chart: 6px;

  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--brand);
  --dur: 200ms;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand:            #1C63DA;
    --brand-hover:      #2E74EA;
    --brand-text:       #8CB8F7;
    --brand-soft:       #16233A;
    --mark-primary:     #2E6FE0;

    --paper:            #121317;
    --surface:          #1A1C21;
    /* Stage condition: printed paper dims under house lights, it does not invert. */
    --chart-paper:      #E6E2D9;
    --chart-ink:        #1B1B1F;
    --ink:              #F2F0EB;
    --ink-muted:        #A8A49C;
    --ink-faint:        #86837C;
    --hairline:         #2C2F36;
    --hairline-strong:  #3C4049;
    --on-brand:         #FFFFFF;

    --shadow-card:  0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.34);
    --shadow-chart: 0 1px 2px rgba(0,0,0,.45), 0 22px 50px rgba(0,0,0,.45);
    --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--mark-accent);
  }
}
:root[data-theme="dark"] {
  --brand:#1C63DA; --brand-hover:#2E74EA; --brand-text:#8CB8F7; --brand-soft:#16233A;
  --mark-primary:#2E6FE0;
  --paper:#121317; --surface:#1A1C21; --chart-paper:#E6E2D9; --chart-ink:#1B1B1F;
  --ink:#F2F0EB; --ink-muted:#A8A49C; --ink-faint:#86837C;
  --hairline:#2C2F36; --hairline-strong:#3C4049; --on-brand:#FFFFFF;
  --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.34);
  --shadow-chart: 0 1px 2px rgba(0,0,0,.45), 0 22px 50px rgba(0,0,0,.45);
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--mark-accent);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -0.025em; line-height: 1.12; font-weight: 600; }
p { margin: 0; }
a { color: var(--brand-text); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--s-1); }

.wrap {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: var(--s-4);
}
@media (min-width: 768px) { .wrap { padding-inline: var(--s-6); } }

/* ── ChartSet mark (supplied vector, chartset-mark.svg) ──── */
.mark { width: 120px; height: 120px; flex: none; display: block; color: var(--mark-primary); }
/* Single-tone treatment: the two accent cells take the mark's own color. */
.mark--mono { --mark-accent: currentColor; --mark-accent-light: currentColor; }
.lockup { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.lockup .mark { width: 34px; height: 34px; }
.lockup__word { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }

/* ── Header ──────────────────────────────────────────────── */
.masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4) var(--s-6); flex-wrap: wrap;
  padding-block: var(--s-6) var(--s-4);
}
.status {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  font-family: var(--mono);
  color: var(--brand-text);
  background: var(--brand-soft);
  border-radius: var(--radius-pill);
  padding: var(--s-2) var(--s-4);
}
.status__dot {
  position: relative;
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: none;
  animation: dot-breathe 2s var(--ease) infinite;
}
.status__dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--brand);
  animation: dot-halo 2s var(--ease) infinite;
}
@keyframes dot-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}
@keyframes dot-halo {
  0%        { transform: scale(1); opacity: .45; }
  70%, 100% { transform: scale(2.8); opacity: 0; }
}

/* ── Buttons ─────────────────────────────────────────────── */
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: var(--s-3) var(--s-6);
  border-radius: var(--radius-pill); border: 1.5px solid transparent;
  font: inherit; font-size: var(--fs-small); font-weight: 600; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn--primary { background: var(--brand); color: var(--on-brand); box-shadow: 0 4px 14px rgba(11,92,213,.28); }
.btn--primary:hover { background: var(--brand-hover); }
.btn--primary:active { transform: scale(.985); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--hairline-strong); }
.btn--ghost:hover { border-color: var(--ink-faint); background: var(--surface); }
.btn--onbrand { background: var(--on-brand); color: #0B2E68; }
.btn--onbrand:hover { background: #EAF2FD; }

/* ── Footer ──────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--hairline);
  padding-block: var(--s-8) var(--s-12);
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8);
  align-items: center; justify-content: space-between;
  font-size: var(--fs-small); color: var(--ink-muted);
}
.foot nav { display: flex; gap: var(--s-6); flex-wrap: wrap; }
.foot a { color: var(--ink-muted); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.foot .lockup .mark { width: 26px; height: 26px; }
.foot .lockup__word { font-size: 19px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}