/* SkyCanvass Design System — Foundational Tokens
 * Personality: Technical & precise · forensic · evidence-grade
 * Last updated: May 2026
 */

:root {
  /* === COLOR · BRAND SCALE (Sky Blue 50–950) ============================= */
  --sky-50:  #f0f9ff;
  --sky-100: #e0f2fe;
  --sky-200: #bae6fd;
  --sky-300: #7dd3fc;
  --sky-400: #38bdf8;
  --sky-500: #0ea5e9;
  --sky-600: #0284c7;   /* Primary interactive */
  --sky-700: #0369a1;   /* Primary brand */
  --sky-800: #075985;
  --sky-900: #0c4a6e;
  --sky-950: #082f49;

  /* === COLOR · NEUTRALS (Slate, cool, rendering well alongside sky) ====== */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  /* === COLOR · SUPPORTING ACCENTS (for charts, hail intensities, status) = */
  --hail-100: #fef3c7;  /* trace */
  --hail-300: #fcd34d;  /* 0.75" */
  --hail-500: #f59e0b;  /* 1.25" */
  --hail-700: #b45309;  /* 1.75" */
  --hail-900: #78350f;  /* 2"+ */

  /* Semantic — feedback */
  --success-50:  #ecfdf5;
  --success-500: #10b981;
  --success-700: #047857;
  --warning-50:  #fffbeb;
  --warning-500: #f59e0b;
  --warning-700: #b45309;
  --danger-50:   #fef2f2;
  --danger-500:  #ef4444;
  --danger-700:  #b91c1c;
  --info-50:     #eff6ff;
  --info-500:    #3b82f6;
  --info-700:    #1d4ed8;

  /* Domain — code-of-the-day (citation block accent) */
  --code-bg:     #0c4a6e;
  --code-fg:     #e0f2fe;
  --code-accent: #38bdf8;

  /* === SEMANTIC TOKENS (light theme) ===================================== */
  --bg:           #ffffff;
  --bg-muted:     var(--slate-50);
  --bg-subtle:    var(--slate-100);
  --bg-inverse:   var(--slate-900);
  --surface:      #ffffff;
  --surface-raised: #ffffff;
  --fg:           var(--slate-900);
  --fg-muted:     var(--slate-600);
  --fg-subtle:    var(--slate-500);
  --fg-inverse:   var(--slate-50);
  --border:       var(--slate-200);
  --border-strong:var(--slate-300);
  --ring:         var(--sky-600);

  --primary:           var(--sky-700);
  --primary-hover:     var(--sky-800);
  --primary-active:    var(--sky-900);
  --primary-fg:        #ffffff;
  --primary-soft:      var(--sky-50);
  --primary-soft-fg:   var(--sky-800);

  /* === RADII ============================================================ */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;   /* default — subtle, technical */
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;
  --radius:      var(--radius-md);

  /* === SPACING (4px base) =============================================== */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* === TYPOGRAPHY ======================================================= */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;

  --text-xs:   0.75rem;     /* 12 */
  --text-sm:   0.8125rem;   /* 13 — captions, labels */
  --text-base: 0.875rem;    /* 14 — body */
  --text-md:   0.9375rem;   /* 15 — long-form body */
  --text-lg:   1.0625rem;   /* 17 — lede */
  --text-xl:   1.25rem;     /* 20 — h3 */
  --text-2xl:  1.5rem;      /* 24 — h2 */
  --text-3xl:  1.875rem;    /* 30 */
  --text-4xl:  2.25rem;     /* 36 — h1 */
  --text-5xl:  3rem;        /* 48 — display sm */
  --text-6xl:  3.75rem;     /* 60 — display */

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:  0.06em;
  --tracking-wider: 0.12em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* === SHADOWS — restrained, technical =================================== */
  --shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.04);
  --shadow-sm: 0 1px 3px 0 rgb(15 23 42 / 0.06), 0 1px 2px -1px rgb(15 23 42 / 0.06);
  --shadow-md: 0 4px 12px -2px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.04);
  --shadow-lg: 0 10px 24px -6px rgb(15 23 42 / 0.10), 0 4px 8px -4px rgb(15 23 42 / 0.05);
  --shadow-xl: 0 20px 40px -8px rgb(15 23 42 / 0.12);
  --shadow-focus: 0 0 0 3px rgb(2 132 199 / 0.20);

  /* === MOTION =========================================================== */
  --duration-instant: 75ms;
  --duration-fast:    150ms;
  --duration-base:    200ms;
  --duration-slow:    300ms;
  --duration-slower:  500ms;

  --ease-linear: linear;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === Z-INDEX ========================================================== */
  --z-base:    0;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  900;
  --z-modal:    1000;
  --z-toast:    1100;
}

/* === DARK THEME — opt in with [data-theme="dark"] ========================= */
[data-theme="dark"] {
  --bg:           #060d18;
  --bg-muted:     #0b1424;
  --bg-subtle:    #11192b;
  --bg-inverse:   #ffffff;
  --surface:      #0b1424;
  --surface-raised: #11192b;
  --fg:           #e2e8f0;
  --fg-muted:     #94a3b8;
  --fg-subtle:    #64748b;
  --fg-inverse:   #0f172a;
  --border:       #1f2a44;
  --border-strong:#2c3a5a;
  --primary:        var(--sky-500);
  --primary-hover:  var(--sky-400);
  --primary-active: var(--sky-300);
  --primary-fg:     #061425;
  --primary-soft:   rgb(56 189 248 / 0.10);
  --primary-soft-fg: var(--sky-300);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.30);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.35);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.40);
  --shadow-lg: 0 10px 24px -6px rgb(0 0 0 / 0.50);
  --shadow-xl: 0 20px 40px -8px rgb(0 0 0 / 0.60);
}

/* === DOCS-CHROME RESET ==================================================== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* === DOCS LAYOUT ========================================================== */
.ds-shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.ds-sidebar {
  background: var(--bg-muted);
  border-right: 1px solid var(--border);
  padding: 24px 16px;
  position: sticky; top: 0;
  height: 100vh;
  overflow-y: auto;
}
.ds-sidebar h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-subtle);
  margin: 20px 8px 8px;
  font-weight: var(--weight-semibold);
}
.ds-sidebar h4:first-child { margin-top: 0; }
.ds-nav { display: flex; flex-direction: column; gap: 1px; }
.ds-nav a {
  display: block;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  text-decoration: none;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}
.ds-nav a:hover { background: var(--bg-subtle); color: var(--fg); }
.ds-nav a.active { background: var(--primary-soft); color: var(--primary-soft-fg); }

.ds-brand {
  display: flex; align-items: center; gap: 8px;
  padding: 0 8px 16px;
  font-weight: var(--weight-semibold);
  color: var(--fg);
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}
.ds-brand-mark {
  width: 24px; height: 24px;
  background: var(--primary);
  color: var(--primary-fg);
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  font-size: 12px;
  font-weight: var(--weight-bold);
}
.ds-brand-tag {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  margin-left: auto;
}

.ds-main { padding: 48px 56px 96px; max-width: 1080px; }
.ds-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--primary);
  font-weight: var(--weight-semibold);
  margin: 0 0 8px;
}
.ds-title {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 12px;
  line-height: var(--leading-tight);
}
.ds-lede {
  font-size: var(--text-lg);
  color: var(--fg-muted);
  line-height: var(--leading-relaxed);
  margin: 0 0 32px;
  max-width: 64ch;
}
.ds-section { margin: 64px 0 0; }
.ds-section:first-of-type { margin-top: 48px; }
.ds-h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  margin: 0 0 8px;
}
.ds-h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  margin: 32px 0 8px;
}
.ds-desc { color: var(--fg-muted); margin: 0 0 24px; max-width: 70ch; line-height: var(--leading-relaxed); }

/* anchors */
.ds-anchor {
  color: var(--fg-subtle);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  margin-left: 8px;
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--duration-fast);
}
.ds-h2:hover .ds-anchor, .ds-h3:hover .ds-anchor { opacity: 1; }

/* example surface */
.ds-example {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  margin: 16px 0;
}
.ds-example-body {
  padding: 32px;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgb(15 23 42 / 0.015) 12px 13px);
}
.ds-example-meta {
  border-top: 1px solid var(--border);
  background: var(--bg-muted);
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ds-tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-subtle);
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
}

/* token row */
.ds-tokens { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.ds-token-row { display: grid; grid-template-columns: 32px 1fr 220px 120px; gap: 16px; padding: 12px 16px; align-items: center; background: var(--surface); }
.ds-token-row.head { background: var(--bg-muted); font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--fg-subtle); font-weight: var(--weight-semibold); }
.ds-token-swatch { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid rgb(15 23 42 / 0.08); }
.ds-token-name { font-family: var(--font-mono); font-size: 12px; color: var(--fg); }
.ds-token-value { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); }
.ds-token-usage { font-size: 12px; color: var(--fg-subtle); }

/* color scale strip */
.ds-scale { display: grid; grid-template-columns: repeat(11, 1fr); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); }
.ds-step { aspect-ratio: 1 / 1.4; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px; font-family: var(--font-mono); font-size: 10px; line-height: 1.2; }
.ds-step-name { font-weight: var(--weight-semibold); }
.ds-step-hex { opacity: 0.85; }

/* small util */
.ds-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ds-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ds-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* code block */
.ds-code {
  background: var(--slate-900);
  color: var(--slate-100);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  overflow-x: auto;
  border: 1px solid var(--slate-800);
}
.ds-code .c-key { color: #7dd3fc; }
.ds-code .c-val { color: #fde68a; }
.ds-code .c-com { color: #64748b; font-style: italic; }

/* pill */
.ds-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  background: var(--primary-soft);
  color: var(--primary-soft-fg);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

/* do/don't */
.ds-do-dont { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
.ds-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; background: var(--surface); }
.ds-card.do { border-left: 3px solid var(--success-500); }
.ds-card.dont { border-left: 3px solid var(--danger-500); }
.ds-card-label { font-size: 11px; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); margin-bottom: 8px; }
.ds-card.do .ds-card-label { color: var(--success-700); }
.ds-card.dont .ds-card-label { color: var(--danger-700); }
.ds-card-body { font-size: var(--text-base); color: var(--fg-muted); line-height: var(--leading-relaxed); }