/* ============================================================
   Superset Files — Product design tokens (vendored)
   Source of truth: the Superset app design system
   (design-system/tokens/{colors,themes,typography,spacing,
   elevation}.css). The marketing site inherits the product's
   visual system; it does not invent a parallel palette.

   :root holds Porcelain, the signature skin. Alternate skins
   override only the role tokens via [data-theme="…"]; all
   material re-derives automatically.
   ============================================================ */

:root {
  /* --- Core role tokens (the 6 that define a skin) ------- */
  --bg:      oklch(96.0% 0.007 219.6);  /* page base        */
  --surface: oklch(98.6% 0.003 219.5);  /* raised surface   */
  --fg:      oklch(23.8% 0.019 241.9);  /* primary ink      */
  --muted:   oklch(44.9% 0.023 226.2);  /* secondary ink    */
  --border:  oklch(84.6% 0.021 233.9);  /* structural line  */
  --accent:  oklch(55.5% 0.082 246.3);  /* icon blue, nudged darker so white-on-gel clears AA */

  /* --- Accent family ------------------------------------- */
  --accent-soft:   oklch(91.8% 0.024 234.4);
  --accent-bright: oklch(79.8% 0.055 242.5);
  --inset:         oklch(42.8% 0.077 257.2);

  /* --- Semantic status ----------------------------------- */
  --success: oklch(52.1% 0.086 156.9);
  --warn:    oklch(58.7% 0.104 61.8);
  --danger:  oklch(55.8% 0.103 25.5);

  /* --- Shadow tint (rgb triplet) -------------------------- */
  --shadow-rgb: 21 38 50;

  /* --- Semantic aliases ----------------------------------- */
  --text-strong:  var(--fg);
  --text-body:    color-mix(in oklch, var(--fg) 86%, var(--muted));
  --text-muted:   var(--muted);
  --text-accent:  color-mix(in oklch, var(--accent) 78%, var(--fg));

  --surface-page:   var(--bg);
  --surface-raised: var(--surface);
  --surface-sunken: color-mix(in oklch, var(--bg) 70%, var(--border));

  --line-hairline: color-mix(in oklch, var(--fg) 16%, transparent);
  --line-strong:   var(--border);
  --focus-ring:    color-mix(in oklch, var(--accent) 72%, var(--fg));

  /* --- Typography ------------------------------------------
     Three lanes: serif for reading, system sans for UI chrome
     (deliberately not web-fonted), mono for code + metadata. */
  --font-display: "Ancizar Serif", "Newsreader", ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --font-serif:   var(--font-display);
  --font-body:    ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "Commit Mono", "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-brand:   Georgia, "Times New Roman", serif; /* the {■} mark */

  --text-display:  clamp(42px, 5vw, 64px);
  --text-title:    clamp(38px, 5vw, 58px);
  --text-h2:       25px;
  --text-h3:       18px;
  --text-lead:     21px;
  --text-read:     18px;
  --text-base:     15px;
  --text-ui:       13px;
  --text-ui-sm:    12px;
  --text-meta:     11px;
  --text-micro:    10px;
  --text-kind:     8px;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-display:  610;
  --weight-semibold: 600;
  --weight-ui:       640;
  --weight-strong:   720;
  --weight-heavy:    760;

  --leading-display: 1.02;
  --leading-heading: 1.18;
  --leading-read:    1.62;
  --leading-ui:      1.2;

  --tracking-display: -0.024em;
  --tracking-tight:   -0.014em;
  --tracking-normal:  0;
  --tracking-label:   0.08em;
  --tracking-kind:    0.02em;

  /* --- Spacing scale --------------------------------------- */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs:  6px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;

  /* --- Corner radii ----------------------------------------- */
  --radius-xs:    5px;
  --radius-sm:    7px;
  --radius-md:    10px;
  --radius-lg:    14px;
  --radius-xl:    18px;
  --radius-2xl:   22px;
  --radius-jewel: 30px;
  --radius-pill:  999px;

  /* --- Control sizing ---------------------------------------- */
  --control-h-sm: 26px;
  --control-h:    32px;
  --control-h-lg: 38px;
  --hit-min:      44px;

  --border-w: 1px;

  /* --- Motion (short, functional feedback only) -------------- */
  --ease:     cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.12s;
  --dur:      0.14s;
  --dur-slow: 0.2s;

  /* ============================================================
     Elevation & material — the no-glow system.
     Depth comes ONLY from borders, inset highlights, bevels,
     and cast shadows. Never glow, halos, or text-shadow.
     ============================================================ */
  --highlight:      rgba(255, 255, 255, 0.72);
  --highlight-soft: rgba(255, 255, 255, 0.45);
  --hairline:       var(--line-hairline);

  --chrome:      color-mix(in oklch, var(--accent-soft) 40%, var(--surface));
  --chrome-deep: color-mix(in oklch, var(--border) 60%, var(--accent-soft));
  --canvas:      color-mix(in oklch, var(--surface) 80%, var(--bg));
  --code-bg:     color-mix(in oklch, var(--border) 38%, var(--surface));
  --soft-fill:   color-mix(in oklch, var(--accent-soft) 58%, var(--surface));
  --accent-ink:  var(--text-accent);

  --control-bg:    rgba(255, 255, 255, 0.58);
  --control-hover: rgba(255, 255, 255, 0.72);
  --control-inset: inset 0 1px 0 rgba(255, 255, 255, 0.80);

  --shadow:        0 24px 70px rgb(var(--shadow-rgb) / 0.18), 0 2px 8px rgb(var(--shadow-rgb) / 0.10);
  --shadow-soft:   0 10px 32px rgb(var(--shadow-rgb) / 0.13), var(--control-inset);
  --shadow-pop:    0 34px 90px rgb(var(--shadow-rgb) / 0.28), inset 0 1px 0 var(--highlight);
  --button-shadow: 0 8px 18px rgb(var(--shadow-rgb) / 0.16);

  --glass-bg:     color-mix(in oklch, var(--surface) 78%, transparent);
  --glass-border: rgba(255, 255, 255, 0.72);
  --glass-blur:   blur(24px) saturate(1.3);
  --glass-shadow: var(--shadow), inset 0 1px 0 var(--highlight);

  --jewel-bg: linear-gradient(180deg,
                color-mix(in oklch, var(--surface) 96%, white),
                color-mix(in oklch, var(--surface) 72%, var(--border)) 52%,
                color-mix(in oklch, var(--chrome-deep) 74%, var(--border)));
  --jewel-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.92),
                  inset 0 -2px 5px rgb(var(--shadow-rgb) / 0.16),
                  0 22px 38px rgb(var(--shadow-rgb) / 0.24);

  --gel-face:   linear-gradient(180deg,
                  color-mix(in oklch, var(--accent) 82%, white 18%),
                  var(--accent) 52%,
                  color-mix(in oklch, var(--accent) 82%, black 14%));
  --gel-border: color-mix(in oklch, var(--accent) 80%, black 12%);
  --gel-ink:    oklch(98% 0.006 235);
  --gel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48),
                inset 0 -1px 2px rgba(0, 0, 0, 0.20),
                var(--button-shadow);
  --gel-sheen:  linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0));
}

/* ============================================================
   Theme family — the eight working skins.
   Porcelain re-asserted so nesting back to it always works.
   ============================================================ */

[data-theme="porcelain"] {
  --bg:      oklch(96.0% 0.007 219.6);
  --surface: oklch(98.6% 0.003 219.5);
  --fg:      oklch(23.8% 0.019 241.9);
  --muted:   oklch(44.9% 0.023 226.2);
  --border:  oklch(84.6% 0.021 233.9);
  --accent:  oklch(55.5% 0.082 246.3);
  --accent-soft:   oklch(91.8% 0.024 234.4);
  --accent-bright: oklch(79.8% 0.055 242.5);
  --inset:         oklch(42.8% 0.077 257.2);
  --shadow-rgb: 21 38 50;
}

/* ---------- Light working skins ---------- */

[data-theme="noir-light"] {
  --bg:      oklch(95.6% 0.003 252);
  --surface: oklch(98.4% 0.001 252);
  --fg:      oklch(21.2% 0.009 252);
  --muted:   oklch(45.8% 0.008 252);
  --border:  oklch(84.9% 0.006 252);
  --accent:  oklch(42.4% 0.018 252);
  --accent-soft:   oklch(91.8% 0.005 252);
  --accent-bright: oklch(82.8% 0.009 252);
  --inset:         oklch(28.6% 0.018 252);
  --shadow-rgb: 30 32 34;
}

[data-theme="slate-air"] {
  --bg:      oklch(95.8% 0.006 226);
  --surface: oklch(98.3% 0.003 226);
  --fg:      oklch(21.8% 0.012 236);
  --muted:   oklch(45.6% 0.013 232);
  --border:  oklch(84.7% 0.012 228);
  --accent:  oklch(50.2% 0.046 229);
  --accent-soft:   oklch(91.6% 0.018 226);
  --accent-bright: oklch(81.8% 0.032 226);
  --inset:         oklch(33.5% 0.038 232);
  --shadow-rgb: 30 34 38;
}

[data-theme="moss-paper"] {
  --bg:      oklch(95.7% 0.006 146);
  --surface: oklch(98.2% 0.003 146);
  --fg:      oklch(21.6% 0.012 155);
  --muted:   oklch(45.5% 0.014 150);
  --border:  oklch(84.5% 0.010 146);
  --accent:  oklch(43.8% 0.042 150);
  --accent-soft:   oklch(91.3% 0.018 146);
  --accent-bright: oklch(82.5% 0.032 148);
  --inset:         oklch(30.4% 0.036 154);
  --shadow-rgb: 30 36 32;
}

[data-theme="violet-ash"] {
  --bg:      oklch(95.5% 0.006 292);
  --surface: oklch(98.2% 0.003 292);
  --fg:      oklch(21.4% 0.013 292);
  --muted:   oklch(45.4% 0.013 292);
  --border:  oklch(84.3% 0.011 292);
  --accent:  oklch(44.8% 0.040 292);
  --accent-soft:   oklch(91.2% 0.017 292);
  --accent-bright: oklch(82.2% 0.033 292);
  --inset:         oklch(31.0% 0.037 292);
  --shadow-rgb: 34 32 38;
}

/* ---------- Dark skins — the Anodized family ----------
   Machined-aluminum metals: matte, neutral, no glass tint. Shared
   dark material re-points highlights/controls away from white-on-light,
   deepens the shadow tint, brightens status colors, and — true to the
   "hardware, not glass" character — backs the chrome blur off. */
[data-theme="anodized"],
[data-theme="anodized-cobalt"],
[data-theme="anodized-umbra"] {
  color-scheme: dark;
  --shadow-rgb: 0 0 0;
  --success: oklch(70.5% 0.103 156);
  --warn:    oklch(76.8% 0.118 72);
  --danger:  oklch(68.2% 0.112 28);

  --highlight:      rgba(255, 255, 255, 0.10);
  --highlight-soft: rgba(255, 255, 255, 0.06);
  --control-bg:     rgba(255, 255, 255, 0.06);
  --control-hover:  rgba(255, 255, 255, 0.10);
  --control-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --glass-border:   rgba(255, 255, 255, 0.10);
  --glass-blur:     blur(14px) saturate(1.05);   /* matte hardware: blur backs off */
  --code-bg:        color-mix(in oklch, var(--bg) 86%, black);
  --accent-ink:     var(--accent-bright);        /* links on dark */
  --jewel-shadow:   inset 0 2px 1px rgba(255, 255, 255, 0.12),
                    inset 0 -2px 5px rgba(0, 0, 0, 0.42),
                    0 22px 38px rgba(0, 0, 0, 0.38);
  --gel-ink:        color-mix(in oklch, var(--bg) 62%, black);
}

/* Anodized — the graphite hardware answer: matte, machined, neutral. */
[data-theme="anodized"] {
  --bg:      oklch(27.5% 0.006 250);
  --surface: oklch(32.5% 0.005 250);
  --fg:      oklch(94.0% 0.003 250);
  --muted:   oklch(72.5% 0.006 250);
  --border:  oklch(44.0% 0.006 250);
  --accent:  oklch(77.0% 0.042 242);
  --accent-soft:   oklch(30.0% 0.022 242);
  --accent-bright: oklch(85.0% 0.034 242);
  --inset:         oklch(58.0% 0.034 242);
}

/* Anodized Cobalt — blue-anodized metal; the alloy that remembers the icon. */
[data-theme="anodized-cobalt"] {
  --bg:      oklch(27.5% 0.012 255);
  --surface: oklch(32.5% 0.011 255);
  --fg:      oklch(94.0% 0.004 250);
  --muted:   oklch(72.5% 0.008 252);
  --border:  oklch(44.0% 0.012 255);
  --accent:  oklch(78.0% 0.060 252);
  --accent-soft:   oklch(30.0% 0.030 252);
  --accent-bright: oklch(86.0% 0.046 252);
  --inset:         oklch(58.0% 0.044 252);
}

/* Anodized Umbra — the same alloy anodized darker, for night-room brightness. */
[data-theme="anodized-umbra"] {
  --bg:      oklch(23.5% 0.005 250);
  --surface: oklch(28.0% 0.005 250);
  --fg:      oklch(93.0% 0.003 250);
  --muted:   oklch(70.0% 0.006 250);
  --border:  oklch(39.0% 0.006 250);
  --accent:  oklch(76.0% 0.040 242);
  --accent-soft:   oklch(28.0% 0.020 242);
  --accent-bright: oklch(83.0% 0.032 242);
  --inset:         oklch(56.0% 0.030 242);
}