/* ==========================================================================
   Dimension.House — Design Tokens (v1)
   Source of truth: design-system-dimension-house_v01.md
   Theme switches in one decision via [data-theme] on a surface root.
   Every component reads through tokens, never hex.
   ========================================================================== */

:root {
  /* ---- Source palette (raw, do not consume directly in components) ---- */
  --palette-onyx: #0a0a0a;
  --palette-warm-white: #f7f5f0;
  --palette-alabaster: #e5e4e2;
  --palette-mint: #26ef63;
  --palette-mint-deep: #1aa84a;
  --palette-blue-slate: #536878;
  --palette-black: #000000;

  /* ---- Typography families ---- */
  --font-display: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Type scale (size / line-height / tracking) ---- */
  --display-2xl: 700 88px/88px var(--font-display);
  --display-2xl-track: -0.02em;
  --display-xl: 700 64px/68px var(--font-display);
  --display-xl-track: -0.02em;
  --display-lg: 700 48px/52px var(--font-display);
  --display-lg-track: -0.015em;
  --display-md: 700 36px/40px var(--font-display);
  --display-md-track: -0.01em;
  --display-sm: 700 24px/28px var(--font-display);
  --display-sm-track: 0;

  --eyebrow: 400 12px/16px var(--font-display);
  --eyebrow-track: 0.12em;
  --mono-sm: 400 13px/18px var(--font-display);

  --heading-lg: 600 20px/28px var(--font-body);
  --heading-lg-track: -0.005em;
  --heading-md: 600 16px/22px var(--font-body);
  --heading-sm: 600 13px/18px var(--font-body);
  --heading-sm-track: 0.01em;

  --body-lg: 400 18px/28px var(--font-body);
  --body-md: 400 15px/24px var(--font-body);
  --body-sm: 400 13px/20px var(--font-body);
  --body-xs: 500 11px/14px var(--font-body);
  --body-xs-track: 0.04em;

  /* ---- Spacing scale (4px base) ---- */
  --space-0: 0;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-56: 56px;
  --space-72: 72px;
  --space-96: 96px;
  --space-128: 128px;
  --space-160: 160px;

  /* ---- Layout ---- */
  --content-max: 1280px;
  --gutter: 32px;

  /* ---- Dot field (used by hero + reel atmosphere layers) ---- */
  --dot-size: 1.2px;
  --dot-spacing: 26px;

  /* ---- Spotlight (cursor-follow on hero, disabled on mobile) ---- */
  --spotlight-size: 600px;
  --spotlight-blur: 32px;

  /* ---- Glass blur (shared by nav shell + mobile menu) ---- */
  --glass-blur: 20px;

  /* ---- Radius ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --motion-micro: 120ms;
  --motion-short: 200ms;
  --motion-medium: 360ms;
  --motion-long: 600ms;
  --motion-epic: 1200ms;

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

/* ==========================================================================
   Dark theme — default for hero chrome, marketing, on.dimension.house
   ========================================================================== */
[data-theme="dark"] {
  --bg-canvas: #0a0a0a;        /* Onyx — default dark surface */
  --bg-deep: #000000;          /* Footer, video voids, scrims, max-contrast ONLY */
  --bg-raised: #141414;        /* Cards, nav bar */
  --bg-elevated: #1c1c1c;      /* Modals, dropdowns, hover surfaces */
  --bg-sunken: #050505;        /* Insets, code blocks */

  --border-subtle: #1f1f1f;
  --border-default: #2a2a2a;
  --border-strong: #3d3d3d;

  --text-primary: #f5f5f4;
  --text-secondary: #a8a8a6;
  --text-muted: #6f6f6d;

  --accent-brand: #26ef63;
  --accent-brand-fg: #0a0a0a;
  --accent-brand-text: #26ef63; /* full mint is safe on dark */
  --accent-slate: #536878;
  --destructive: #ff4d4d;

  /* Glass / alpha surfaces — nav shell (80%) and overlay panels (92%) */
  --bg-glass:        rgba(20, 20, 20, 0.80);   /* #141414 raised at 80% */
  --bg-glass-strong: rgba(20, 20, 20, 0.92);   /* #141414 raised at 92% — menus, modals */

  /* Dot field + spotlight on dark */
  --dot-color: rgba(245, 245, 244, 0.14);
  --spotlight-color: rgba(245, 245, 244, 0.10);

  /* Elevation — dark favours inner highlight */
  --elev-0: none;
  --elev-1: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --elev-2: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 0 rgba(0, 0, 0, 0.4);
  --elev-3: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 32px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   Light theme — System & Intelligence subpages, hero, light sections
   ========================================================================== */
[data-theme="light"] {
  --bg-canvas: #f7f5f0;        /* Warm off-white — hero, light sections */
  --bg-canvas-cool: #fafaf9;   /* Neutral light (system/intelligence) */
  --bg-deep: #000000;
  --bg-raised: #ffffff;
  --bg-elevated: #ffffff;
  --bg-sunken: #f2f1ef;

  --border-subtle: #e8e8e6;
  --border-default: #d6d6d3;
  --border-strong: #a8a8a6;

  --text-primary: #0a0a0a;
  --text-secondary: #4a4a48;
  --text-muted: #7a7a77;

  --accent-brand: #26ef63;       /* fill only — onyx text on top */
  --accent-brand-fg: #0a0a0a;
  --accent-brand-text: #1aa84a;  /* Mint Deep — text/1px border on white (AA) */
  --accent-slate: #536878;
  --destructive: #d63333;

  /* Glass / alpha surfaces */
  --bg-glass:        rgba(255, 255, 255, 0.80); /* white at 80% — nav on light */
  --bg-glass-strong: rgba(255, 255, 255, 0.92); /* white at 92% — menus, modals */

  /* Dot field + spotlight on light */
  --dot-color: rgba(10, 10, 10, 0.10);
  --spotlight-color: rgba(255, 255, 255, 0.85);

  /* Elevation — light favours drop shadow */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(10, 10, 10, 0.04);
  --elev-2: 0 2px 8px rgba(10, 10, 10, 0.06), 0 1px 2px rgba(10, 10, 10, 0.04);
  --elev-3: 0 12px 32px rgba(10, 10, 10, 0.12), 0 2px 4px rgba(10, 10, 10, 0.05);
}