/* Optima / Quiet Materials v1
   Palette-agnostic semantic surfaces. Logo colors remain independent.
   App-inspired hierarchy, not a reproduction of Apple's proprietary system colors.
*/
:root {
  color-scheme: light;
  --tone-canvas: #F1F0EB;
  --tone-surface: #F8F7F3;
  --tone-raised: #FBFAF7;
  --tone-alt: #E9EBE6;
  --tone-hero: #EDEEE9;
  --tone-ink: #243034;
  --tone-ink2: #344245;
  --tone-secondary: #536165;
  --tone-border: #CDD4D0;
  --tone-border-soft: #DDE2DC;
  --tone-accent: #344E4B;
  --tone-accent-wash: #E2E9E4;
  --tone-deep: #1C2627;
  --tone-on-deep: #EDF1EC;
  --tone-on-deep-subtle: #B8C9C1;
  --tone-grid: rgba(51, 64, 61, .16);
  --tone-nav: rgba(248, 247, 243, .94);
  --tone-shadow: 0 10px 32px rgba(27, 36, 34, .055), 0 1px 2px rgba(27, 36, 34, .035);
  --tone-shadow-hover: 0 15px 38px rgba(27, 36, 34, .075), 0 2px 4px rgba(27, 36, 34, .04);
  --tone-chart-up: #386B63;
  --tone-chart-base: #243034;
  --tone-chart-down: #5F7273;
  --tone-chart-band: #E1E9E3;
  --white: var(--tone-surface);
  --paper: var(--tone-alt);
  --ink: var(--tone-ink);
  --ink2: var(--tone-ink2);
  --muted: var(--tone-secondary);
  --line: var(--tone-border);
  --line-soft: var(--tone-border-soft);
  --accent: var(--tone-accent);
  --accent-soft: var(--tone-accent-wash);
  --dark: var(--tone-deep);
  --shadow: var(--tone-shadow);
}

body { background: var(--tone-canvas); color: var(--tone-ink); }
:root { --selection-bg: var(--tone-ink); --selection-fg: var(--tone-canvas); }
::selection { background-color: var(--selection-bg); color: var(--selection-fg); text-shadow: none; }
:focus-visible { outline: 2px solid var(--tone-accent); outline-offset: 3px; }
.nav { background: var(--tone-nav); border-bottom-color: var(--tone-border-soft); }
.links { color: var(--tone-secondary); }
.links a:hover, .links a[aria-current] { color: var(--tone-ink); }
.links a::after { background: var(--tone-ink2); }
.menu { color: var(--tone-ink); background: var(--tone-surface); border-color: var(--tone-border); }
.hero {
  background:
    radial-gradient(ellipse 82% 90% at 52% -24%, rgba(255,255,255,.27) 0%, transparent 75%),
    linear-gradient(162deg, var(--tone-hero) 0%, var(--tone-canvas) 78%);
  border-bottom-color: var(--tone-border-soft);
}
.hero::before {
  background-image:
    linear-gradient(var(--tone-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tone-grid) 1px, transparent 1px);
  background-size: 86px 86px;
  opacity: .21;
  -webkit-mask-image: radial-gradient(105% 95% at 65% 0%, #000 0%, transparent 70%);
          mask-image: radial-gradient(105% 95% at 65% 0%, #000 0%, transparent 70%);
}
.lede, .sectionhead p, .card p, .step p { color: var(--tone-secondary); }
.eyebrow, .kicker, .num, .step::before { color: var(--tone-accent); }
section { background: var(--tone-canvas); }
section.alt { background: var(--tone-alt); }
.metricbar, .hero-card, .card, .chart, .tablewrap, .steps {
  background: var(--tone-surface);
  border-color: var(--tone-border);
  box-shadow: var(--tone-shadow);
}
.metric, .step { border-color: var(--tone-border); }
.metric span, .chart .cap, .fine { color: var(--tone-secondary); }
.card:hover { border-color: var(--tone-secondary); box-shadow: var(--tone-shadow-hover); }
.fig, .fig-rows { border-color: var(--tone-border-soft); }
.fig .lbl { color: var(--tone-secondary); }
.btn { background: var(--tone-surface); color: var(--tone-ink); border-color: var(--tone-border); }
.btn:hover { border-color: var(--tone-secondary); box-shadow: var(--tone-shadow-hover); }
.btn.primary { background: var(--tone-ink); color: var(--tone-canvas); border-color: var(--tone-ink); }
.btn.primary:hover { background: var(--tone-ink2); color: var(--tone-canvas); border-color: var(--tone-ink2); }
.btn.dark { background: transparent; color: var(--tone-on-deep); border-color: #81948C; }
.btn.dark:hover { border-color: var(--tone-on-deep); }
.statement, .footer { background: var(--tone-deep); color: var(--tone-on-deep); }
.statement p, .footlinks a, .footer small { color: var(--tone-on-deep-subtle); }
.footer .brand { color: var(--tone-on-deep); }
.footbase { color: var(--tone-on-deep-subtle); border-color: rgba(232,239,233,.16); }
.callout { color: var(--tone-ink2); background: var(--tone-accent-wash); border-color: var(--tone-accent); }
.tablewrap th { background: var(--tone-alt); color: var(--tone-secondary); }
.tablewrap td { color: var(--tone-ink2); }
.tablewrap th, .tablewrap td { border-color: var(--tone-border); }
/* Chart colors convey quantitative status, not the current logo palette. */
.chart svg g[stroke="#dde4e6"] line,
.chart svg line[stroke="#c3ced1"] { stroke: var(--tone-border); }
.chart svg g[fill="#8a9aa2"] text { fill: var(--tone-secondary); }
.chart svg path[fill="#e8f2ee"] { fill: var(--tone-chart-band); }
.chart svg path[stroke="#0c5c4a"] { stroke: var(--tone-chart-up); }
.chart svg path[stroke="#1e2a33"] { stroke: var(--tone-chart-base); }
.chart svg path[stroke="#93a5ac"] { stroke: var(--tone-chart-down); }
.chart svg circle[fill="#1e2a33"] { fill: var(--tone-chart-base); }
.chart svg text[fill="#0c5c4a"] { fill: var(--tone-chart-up); }
.chart svg text[fill="#1e2a33"] { fill: var(--tone-chart-base); }
.chart svg text[fill="#93a5ac"] { fill: var(--tone-chart-down); }
@media (max-width: 850px) {
  .links { background: var(--tone-surface); border-bottom-color: var(--tone-border); }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-solar-stage]) {
    color-scheme: dark;
    --tone-canvas: #202729;
    --tone-surface: #293235;
    --tone-raised: #313C3E;
    --tone-alt: #242E30;
    --tone-hero: #273133;
    --tone-ink: #E8ECE8;
    --tone-ink2: #D7DFDB;
    --tone-secondary: #BCC8C5;
    --tone-border: #596763;
    --tone-border-soft: #43524F;
    --tone-accent: #C1D3CA;
    --tone-accent-wash: #344440;
    --tone-deep: #1A2324;
    --tone-on-deep: #ECF1EB;
    --tone-on-deep-subtle: #BFCFC7;
    --tone-grid: rgba(173,190,181,.20);
    --tone-nav: rgba(35, 45, 46, .94);
    --tone-shadow: 0 10px 32px rgba(0, 0, 0, .14);
    --tone-shadow-hover: 0 15px 38px rgba(0, 0, 0, .22);
    --tone-chart-up: #9DD8C6;
    --tone-chart-base: #E4EDE7;
    --tone-chart-down: #ADBFBD;
    --tone-chart-band: #354D48;
  }
  :root:not([data-solar-stage]) .hero {
    background: radial-gradient(ellipse 78% 92% at 50% -16%, rgba(112,139,126,.11), transparent 73%),
                linear-gradient(160deg,var(--tone-hero),var(--tone-canvas) 84%);
  }
  :root:not([data-solar-stage]) .hero::before { opacity: .17; }
  :root:not([data-solar-stage]) .btn.primary:hover { background: #324442; border-color: #324442; }
}
@media (prefers-contrast: more) {
  :root { --tone-border: #82908B; --tone-border-soft: #A3AEA9; --tone-grid: rgba(51,64,61,.18); }
  .hero::before { opacity: .14; }
  .btn, .card, .metricbar, .chart { border-width: 1.5px; }
  .links a, .sectionhead p, .card p { color: var(--tone-ink); }
}
@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--tone-surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}