/* ============================================================
   OWN FINANCIAL — Design Tokens  (working copy · mirrors v2 canonical)
   Grounded in the OWN Luxury Brand Bible V2.
   CANONICAL OWNER: own-financial-design/colors_and_type.css
   This file is OWN Charts' working mirror — it stays value-for-value
   in sync with the system file. Edit tokens in the system first, then
   reflect here (or vice-versa); never let the two diverge silently.
   ============================================================ */

/* ---- Webfonts ---------------------------------------------- */
/* The bible specifies CANELA (display/editorial) + SÖHNE (UI/body).
   Both are licensed; we substitute with the closest open-source families:
     "Söhne"  → Hanken Grotesk  (neo-grotesque with Klim-like warmth)
     "Canela" → Newsreader      (contemporary editorial serif, optical sizes)
   Hanken Grotesk is a closer match to Söhne's measured neo-grotesque
   character than Inter (the bible's own listed fallback). Newsreader
   is the closest free analog to Canela. Replace with the licensed
   woff2 files when available — see fonts/.                          */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&display=swap');

:root {
  /* ============================================================
     COLOR — ivory-led, ocean-accented, obsidian for impact.
     ============================================================ */

  /* Surfaces — matched to the marketing site (styles.css): cool stone, no warm cast. */
  --ivory:        #F4F4F1;   /* default page field */
  --bone:         #EEEEEB;   /* stone · step 1 — matches site */
  --paper:        #E6E6E2;   /* stone · step 2 — matches site */
  --mist:         #E6ECEA;   /* reserved cool third tone — matches site */
  --paper-warm:   #FFFFFF;   /* elevated card / popup surface — matches site */

  /* Ink scale. */
  --ink:          #0A0A0A;   /* primary text */
  --obsidian:     #0B0B0C;   /* dark surface (sidebar, dark sections) */
  --ink-2:        #1A1A1A;   /* hover on dark */
  --ink-soft:     rgba(10, 10, 10, 0.62); /* muted body */
  --ink-mute:     rgba(10, 10, 10, 0.48); /* meta labels */
  --ink-faint:    rgba(10, 10, 10, 0.30); /* tertiary */

  /* On-dark text. */
  --paper-light:  rgba(244, 244, 241, 0.92);
  --paper-soft:   rgba(244, 244, 241, 0.68);
  --paper-mute:   rgba(244, 244, 241, 0.52);
  --paper-faint:  rgba(244, 244, 241, 0.32);

  /* Hairlines. */
  --line:         rgba(10, 10, 10, 0.12);
  --line-strong:  rgba(10, 10, 10, 0.18);
  --line-dark:    rgba(244, 244, 241, 0.14);
  --line-dark-strong: rgba(244, 244, 241, 0.22);

  /* The accent — ocean teal. Used for eyebrows, callouts, kickers,
     interactive emphasis. Never the default chrome.                 */
  --ocean:        #0E3A3E;
  --sea:          #86C7C0;   /* light teal — used on dark surfaces */
  --ocean-mute:   rgba(14, 58, 62, 0.10);
  --ocean-faint:  rgba(14, 58, 62, 0.18);
  --sea-soft:     rgba(134, 199, 192, 0.20);

  /* Secondary territories — used selectively, never together. */
  --midnight:     #0E1D3A;   /* trust · institutional */
  --burgundy:     #5C1D22;   /* heritage · private-client */
  --espresso:     #2A1B12;   /* warm · understated */
  --slate:        #1C2530;   /* cool · data-heavy */
  --forest:       #1C3A2A;   /* growth (comparison only) */
  --oxblood:      #3A0E15;   /* deep red · serious */

  /* Tertiary accents — appear in data viz and material moments. */
  --clay:         #B96F4C;   /* warm terracotta */
  --brass:        #A48758;   /* muted brass — material accent */
  --olive:        #7C8A5B;

  /* Semantic — restrained. Loud red is not in the bible. */
  --gain:         #1C3A2A;   /* growth = forest, not lime */
  --gain-soft:    #DDE6D9;
  --loss:         #5C1D22;   /* loss = burgundy, not stop-red */
  --loss-soft:    #ECDADC;
  --alert:        #A48758;   /* attention = brass, not amber */
  --alert-soft:   #ECE4D2;
  --info:         #0E3A3E;
  --info-soft:    #DDE5E5;

  /* Semantic mapping. */
  --bg:               var(--ivory);
  --bg-elevated:      #FFFFFF;
  --bg-warm:          var(--bone);
  --bg-inverse:       var(--obsidian);
  --fg:               var(--ink);
  --fg-muted:         var(--ink-soft);
  --fg-subtle:        var(--ink-mute);
  --fg-inverse:       var(--ivory);
  --rule:             var(--line);
  --rule-strong:      var(--line-strong);
  --rule-inverse:     var(--line-dark);
  --focus:            var(--ocean);

  /* ============================================================
     CHART PALETTE — theme-aware. Mirrors window.C (chart-primitives).
     SVG fill/stroke read these via var(); flipping the token in dark
     mode repaints every chart with NO React re-render. Categorical
     "territory" series are lifted to legible-on-dark variants in the
     dark override (appearance.css). Light values below are the source
     of truth and match the original hard-coded chart colours.
     ============================================================ */
  --ck-ink:        #0A0A0A;
  --ck-ink2:       #1A1A1A;
  --ck-ink-soft:   rgba(10,10,10,0.62);
  --ck-ink-mute:   rgba(10,10,10,0.48);
  --ck-ink-faint:  rgba(10,10,10,0.30);
  --ck-ink-very:   rgba(10,10,10,0.14);
  --ck-grid:       rgba(10,10,10,0.06);
  --ck-line:       rgba(10,10,10,0.12);
  --ck-line-strong:rgba(10,10,10,0.18);
  --ck-paper:      #FFFFFF;     /* chart surface / dot ring "white" */
  --ck-ivory:      #F4F4F1;
  --ck-bone:       #F0ECE0;
  --ck-ocean:      #0E3A3E;
  --ck-sea:        #86C7C0;
  --ck-obsidian:   #0B0B0C;
  --ck-midnight:   #0E1D3A;
  --ck-burgundy:   #5C1D22;
  --ck-espresso:   #2A1B12;
  --ck-slate:      #1C2530;
  --ck-forest:     #1C3A2A;
  --ck-oxblood:    #3A0E15;
  --ck-clay:       #B96F4C;
  --ck-brass:      #A48758;
  --ck-olive:      #7C8A5B;
  --ck-gain:       #1C3A2A;
  --ck-gain-soft:  #DDE6D9;
  --ck-loss:       #5C1D22;
  --ck-loss-soft:  #ECDADC;
  --ck-alert:      #A48758;
  --ck-alert-soft: #ECE4D2;

  /* ============================================================
     TYPE
     ============================================================ */
  --font-serif:   'Newsreader', 'Iowan Old Style', 'Baskerville', 'Times New Roman', Georgia, serif;
  --font-sans:    'Hanken Grotesk', 'Söhne', 'Inter', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;

  /* Tracking */
  --track-eyebrow:  0.32em;   /* bible standard */
  --track-meta:     0.22em;
  --track-pill:     0.12em;
  --track-tight:    -0.045em; /* h1 display */
  --track-h2:       -0.035em;
  --track-h3:       -0.020em;

  /* Type scale — bible-grounded. Canela for display, UI body Hanken Grotesk. */
  --t-eyebrow:    0.75rem;    /* 12px */
  --t-meta:       0.75rem;    /* 12px (uppercase) */
  --t-caption:    0.8125rem;  /* 13px */
  --t-small:      0.875rem;   /* 14px */
  --t-body:       1.0625rem;  /* 17px — bible body-copy */
  --t-body-lg:    1.25rem;    /* 20px */
  --t-lead:       1.5625rem;  /* 25px — bible lead */
  --t-h5:         1.375rem;   /* 22px */
  --t-h4:         1.4375rem;  /* 23px */
  --t-h3:         clamp(1.5rem, 2.6vw, 2.375rem);  /* 24–38px */
  --t-h2:         clamp(2.25rem, 4.5vw, 4.125rem); /* 36–66px */
  --t-h1:         clamp(3.375rem, 8vw, 7.25rem);   /* 54–116px */
  --t-display:    clamp(2.625rem, 5vw, 5rem);      /* 42–80px */
  --t-quote:      clamp(1.75rem, 3vw, 2.75rem);    /* 28–44px */

  /* Numerical figures — use Canela/serif for hero numbers per bible.
     Tables can use sans tabular-nums.                             */
  --t-num-hero:   4.5rem;     /* 72px — hero metric */
  --t-num-lg:     2.875rem;   /* 46px — stat */
  --t-num-md:     2rem;       /* 32px — large-num */
  --t-num-sm:     1.5rem;     /* 24px */

  /* ============================================================
     SPACING — bible uses generous breathing room.
     ============================================================ */
  --s-0:   0;
  --s-1:   0.25rem;   /* 4 */
  --s-2:   0.5rem;    /* 8 */
  --s-3:   0.75rem;   /* 12 */
  --s-4:   1rem;      /* 16 */
  --s-5:   1.5rem;    /* 24 */
  --s-6:   2rem;      /* 32 */
  --s-7:   2.625rem;  /* 42 */
  --s-8:   3.5rem;    /* 56 */
  --s-9:   5.25rem;   /* 84 — bible section padding */
  --s-10:  6.5rem;    /* 104 */
  --s-11:  8rem;      /* 128 */

  /* ============================================================
     RADII — generous, refined-object scale.
     ============================================================ */
  --r-0:        0;
  --r-pill:     999px;       /* tags, status pills */
  --r-input:    14px;        /* form inputs */
  --r-button:   999px;       /* buttons — pill */
  --r-button-square: 16px;   /* alt square button */
  --r-nested:   22px;        /* inner panels */
  --r-card-sm:  28px;        /* mini card / asset tile */
  --r-card-dense: 26px;      /* dense dashboard card (data-heavy surfaces) */
  --r-card:     32px;        /* default / editorial card */
  --r-card-lg:  38px;        /* hero card */
  --r-card-xl:  42px;        /* phone / device */
  --r-badge:    10%;         /* OWN badge — % of edge */

  /* ============================================================
     ELEVATION — warm soft shadows, used purposefully.
     ============================================================ */
  --shadow-0: none;
  --shadow-card:    0 12px 38px rgba(0, 0, 0, 0.055);
  --shadow-card-lg: 0 14px 36px rgba(0, 0, 0, 0.07);
  --shadow-hero:    0 24px 64px rgba(0, 0, 0, 0.12);
  --shadow-float:   0 24px 64px rgba(0, 0, 0, 0.18);

  /* ============================================================
     MOTION — calm, intelligent. Never playful.
     ============================================================ */
  --dur-micro:    160ms;   /* 120–180ms — micro-interactions */
  --dur-card:     220ms;   /* 180–240ms — card reveals */
  --dur-screen:   320ms;   /* 240–360ms — screen shifts */

  --ease-standard: cubic-bezier(0.32, 0.08, 0.24, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.7, 0, 0.84, 0);

  /* ── Chart reveal tempo (Codex Law 12) ─────────────────────
     ONE pacing for every dynamic chart/image. Calm and deliberate —
     content grows in over ~0.9s on --ease-out, siblings staggered so a
     view arrives in sequence, never "all at once". The JS primitives
     mirror these in window.REVEAL (chart-primitives.jsx); keep the two
     in lockstep. CSS-driven charts should use these, not ad-hoc numbers. */
  --reveal-draw:    1400ms;  /* line / path draw-on */
  --reveal-rise:    800ms;   /* bars, fills, widths, heights growing in (cash-flow reference band) */
  --reveal-fade:    560ms;   /* labels, dots, secondary marks fading in */
  --reveal-stagger: 80ms;    /* delay step between sibling elements */
  --reveal-lead:    80ms;    /* delay before the first element moves */
  --reveal-ease:    cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Atlas choreography (v4) ───────────────────────────────
     The in-page cue enters and exits with symmetric motion:
       enter — 1.4s ease-out (ribbon glides; thought card whispers
               with --atlas-stagger behind it)
       hold  — 2.8s readable
       exit  — 1.4s soft handoff (slight scale, slight blur, opacity 0)
     The radar wedge on rail marks runs 3.6s linear, forever.
     One in-page Atlas per page — see preview/atlas-in-page-rule.html. */
  --atlas-cue-enter:   1.4s;
  --atlas-cue-exit:    1.4s;
  --atlas-cue-hold:    2.8s;
  --atlas-stagger:     0.6s;
  --atlas-cue-ease:    cubic-bezier(.22, 1, .36, 1);
  --atlas-radar-loop:  3.6s;

  /* ── Atlas rail (v4) ───────────────────────────────────────
     Three states. Open is default; engaged expands; minimized
     yields to the floater so page content can reflow. */
  --atlas-rail-open:     320px;     /* default — advice list */
  --atlas-rail-engaged:  440px;     /* conversation surface */
  --atlas-rail-floater:  64px;      /* minimized corner mark */
  --atlas-rail-inset:    20px;      /* gap from viewport edges */
  --atlas-rail-radius:   28px;
  --atlas-rail-reflow:   480ms;     /* page reclaim animation */

  /* ============================================================
     LAYOUT
     ============================================================ */
  --maxw-prose:    64ch;
  --maxw-narrow:   880px;
  --maxw:          1280px;
  --maxw-wide:     1440px;
  --pad-section:   clamp(1.75rem, 5vw, 5.25rem); /* 28–84 */
}

/* ============================================================
   BASE
   ============================================================ */
html { color-scheme: light; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'ss01' 1;
}

::selection { background: var(--ocean); color: var(--ivory); }

/* ============================================================
   SEMANTIC TYPE
   ============================================================ */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ocean);
  margin: 0;
}
.on-dark .eyebrow,
.dark .eyebrow { color: rgba(134, 199, 192, 0.95); }

.serif { font-family: var(--font-serif); }

.display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-display);
  line-height: 0.96;
  letter-spacing: var(--track-tight);
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}

h1, .h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-h1);
  line-height: 0.92;
  letter-spacing: var(--track-tight);
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}

h2, .h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: 1.02;
  letter-spacing: var(--track-h2);
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}

h3, .h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: 1.12;
  letter-spacing: var(--track-h3);
  color: var(--ink);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-h4);
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}

h5, .h5 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-h5);
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
}

.lead {
  font-family: var(--font-sans);
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: none;
}

.quote {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-quote);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

.meta {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.dark .meta, .on-dark .meta { color: var(--paper-mute); }

.kicker {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--ocean);
  margin: 0 0 var(--s-3);
}
.dark .kicker, .on-dark .kicker { color: rgba(134, 199, 192, 0.96); }

.caption { font-size: var(--t-caption); color: var(--ink-mute); }
.small   { font-size: var(--t-small); }

/* Numerical figures — Canela/serif for headline metrics (bible). */
.figure {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  color: var(--ink);
}
.figure-hero,
.figure-lg,
.figure-md {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.figure-hero { font-size: var(--t-num-hero); }
.figure-lg   { font-size: var(--t-num-lg); }
.figure-md   { font-size: var(--t-num-md); }

/* Deltas — restrained tones. */
.delta-up   { color: var(--gain); }
.delta-down { color: var(--loss); }
.delta-flat { color: var(--ink-mute); }

/* Tagline rule — used in lockup-style compositions. */
.tagline-rule {
  display: inline-block;
  width: 1.25em;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin: 0 0.6em;
  transform: translateY(-1px);
}

/* Editorial callout (bible motif: hairlines top + bottom). */
.editorial-callout {
  font-family: var(--font-serif);
  font-size: clamp(1.625rem, 3vw, 2.625rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s-5) 0;
  margin: var(--s-6) 0 0;
  color: var(--ink);
}
.dark .editorial-callout { border-color: var(--line-dark); color: var(--ivory); }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--ink-faint);
  transition: text-decoration-color var(--dur-card) var(--ease-standard);
}
a:hover { text-decoration-color: var(--ocean); }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s-6) 0;
}