/* ============================================================
   Centre 360 · Design System v2 tokens
   Source of truth: NYC-Cupola/designs/_shared/styles.css (:root)
   Mirror this file from the design source — do not edit in place
   without updating the source first.
   ============================================================ */

/* Reserve scrollbar space so layout does not shift when content becomes
   scrollable. `stable` reserves only the scrollbar side; the earlier
   `both-edges` setting was rendering a visible empty strip on the left of
   the viewport on Windows/Linux. The ~7px centering offset on Crown rays
   decoration that motivated `both-edges` was not worth the visible band. */
html { scrollbar-gutter: stable; }

:root {
  /* Surface */
  --surface-base:    oklch(13% 0.025 268);
  --surface-raise:   oklch(17% 0.030 268);
  --surface-mark:    oklch(10% 0.022 268);
  --surface-elev:    oklch(20% 0.034 268);

  /* Ink */
  --ink-primary:     oklch(97% 0.012 220);
  --ink-soft:        oklch(97% 0.012 220 / 0.72);
  --ink-quiet:       oklch(97% 0.012 220 / 0.50);
  --ink-faint:       oklch(97% 0.012 220 / 0.30);
  --hairline:        oklch(97% 0.012 220 / 0.10);

  /* Gold accents - exact DCAS hex */
  --gold-accent:     #E4D578;
  --gold-soft:       rgb(228 213 120 / 0.55);
  --gold-faint:      rgb(228 213 120 / 0.18);
  --gold-bright:     oklch(91% 0.13 92);
  --gold-cta:        #DDA559;
  --gold-cta-border: #A87E3A;

  /* Cyan accent - scarce, max one per page */
  --cyan-cta:        #38AAD4;
  --cyan-cta-border: #2A8AB0;

  /* Civic Fame gradient */
  --gradient-civic-gold:      linear-gradient(90deg, #DDA559 0%, #E4D578 50%, #DDA559 100%);
  --gradient-civic-gold-diag: linear-gradient(135deg, #DDA559 0%, #E4D578 50%, #DDA559 100%);

  /* Typography */
  --serif-display:   "Poiret One", serif;
  --serif-quote:     "Cormorant Garamond", Georgia, serif;
  --sans:            "DM Sans", -apple-system, system-ui, sans-serif;
  --nyc-font:        "Noto Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:            ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;

  --fs-h1:           80px;
  --fs-h2:           45px;
  --fs-h3:           28px;
  --fs-h4:           20px;
  --fs-body:         16px;
  --fs-small:        14px;
  --fs-label:        11px;

  --lh-tight:        1.0;
  --lh-snug:         1.15;
  --lh-base:         1.55;

  /* Spacing scale (4px base) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* Container */
  --container-max:    1280px;
  --section-py:       96px;
  --card-panel-max:   432px;
  --card-overlap:     -160px;
  --container-px:     32px;
  --header-h:         64px;

  /* Borders */
  --radius:           0;
  --radius-input:     2px;
  --border-cta:       1px solid var(--gold-cta-border);
  --border-cta-cyan:  1px solid var(--cyan-cta-border);

  /* Elevation */
  --shadow-sm:   0 1px 2px oklch(0% 0 0 / 0.32), 0 1px 1px oklch(0% 0 0 / 0.22);
  --shadow-md:   0 4px 10px oklch(0% 0 0 / 0.36), 0 2px 4px oklch(0% 0 0 / 0.22);
  --shadow-lg:   0 14px 28px oklch(0% 0 0 / 0.42), 0 10px 18px oklch(0% 0 0 / 0.26);
  --shadow-gold: 0 0 0 1px var(--gold-soft), 0 10px 26px rgb(228 213 120 / 0.18);

  /* Motion. --t-fast governs hover/color/icon-slide feedback —
     180ms is the sweet spot where the response feels immediate
     but not abrupt. Anything past ~200ms starts to feel laggy
     on properties the cursor is staring directly at. */
  --t-fast:    180ms cubic-bezier(0.22, 1, 0.36, 1);
  --t-medium:  0.5s  cubic-bezier(0.22, 1, 0.36, 1);
  --t-slow:    2s    cubic-bezier(0.22, 1, 0.36, 1);

  /* NYC chrome */
  --nyc-bg:       #000;
  --nyc-fg:       #fff;
  --nyc-fg-muted: #ccc;
  --nyc-divider:  rgba(255, 255, 255, 0.15);
}

@media (max-width: 768px) {
  :root {
    --fs-h1: 32px;
    --fs-h2: 28px;
    --fs-h3: 22px;
    --section-py: 64px;
    --container-px: 20px;
    --card-overlap: -80px;
  }
}