/*
 * brainplane design tokens.
 * Source of truth: docs/design/03-design-system.md.
 * Light is the day theme (paper and ink). Dark is the night theme (night palette).
 * Theme rule: system appearance by default, data-theme="light" or "dark" on <html> overrides it.
 */

/* Fonts. Geist and Geist Mono: SIL OFL 1.1 (google/fonts). B612 Mono: SIL OFL 1.1 (polarsys/b612). */
@font-face {
  font-family: "Geist";
  src: url("./fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("./fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "B612 Mono";
  src: url("./fonts/B612Mono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Brand constants (same in both themes) */
  --bp-night: #0b0f14;
  --bp-graphite: #11161d;
  --bp-panel: #2a313b;
  --bp-slate: #5f6877;
  --bp-mist: #a9b0bb;
  --bp-paper: #f4f6f9;
  --bp-white: #ffffff;
  --bp-signal: #ff5b1f;
  --bp-signal-deep: #c2410c;

  /* Type families */
  --bp-font-ui: "Geist", -apple-system, "SF Pro Text", system-ui, sans-serif;
  --bp-font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
  --bp-font-readout: "B612 Mono", "Geist Mono", ui-monospace, monospace;

  /* Type scale: size / line height / tracking. 5 sizes per screen at most. */
  --bp-text-display-xl: 600 44px / 48px var(--bp-font-ui);
  --bp-track-display-xl: -0.032em;
  --bp-text-display-l: 600 32px / 38px var(--bp-font-ui);
  --bp-track-display-l: -0.026em;
  --bp-text-title-1: 600 22px / 28px var(--bp-font-ui);
  --bp-track-title-1: -0.018em;
  --bp-text-title-2: 600 17px / 24px var(--bp-font-ui);
  --bp-track-title-2: -0.01em;
  --bp-text-title-3: 600 15px / 20px var(--bp-font-ui);
  --bp-track-title-3: -0.006em;
  --bp-text-body: 400 14px / 20px var(--bp-font-ui);
  --bp-text-body-strong: 600 14px / 20px var(--bp-font-ui);
  --bp-text-callout: 400 13px / 18px var(--bp-font-ui);
  --bp-text-caption: 400 12px / 16px var(--bp-font-ui);
  --bp-text-micro: 600 10.5px / 14px var(--bp-font-ui);
  --bp-track-micro: 0.07em;
  --bp-text-mono: 400 12px / 16px var(--bp-font-mono);
  --bp-text-readout: 400 13px / 16px var(--bp-font-readout);
  --bp-text-readout-l: 400 28px / 32px var(--bp-font-readout);

  /* Spacing, 4 px base */
  --bp-s-0: 0;
  --bp-s-0-5: 2px;
  --bp-s-1: 4px;
  --bp-s-1-5: 6px;
  --bp-s-2: 8px;
  --bp-s-3: 12px;
  --bp-s-4: 16px;
  --bp-s-5: 20px;
  --bp-s-6: 24px;
  --bp-s-8: 32px;
  --bp-s-10: 40px;
  --bp-s-12: 48px;
  --bp-s-16: 64px;

  /* Radii, concentric: inner = outer minus inset, never below 4 */
  --bp-r-window: 16px;
  --bp-r-panel: 16px;
  --bp-r-card: 16px;
  --bp-r-option: 12px;
  --bp-r-control: 10px;
  --bp-r-chip: 6px;
  --bp-r-capsule: 999px;

  /* Sizes */
  --bp-row-compact: 28px;
  --bp-row: 36px;
  --bp-row-touch: 44px;
  --bp-button-h: 36px;
  --bp-button-h-s: 30px;
  --bp-sidebar-w: 248px;
  --bp-inspector-w: 320px;
  --bp-column-max: 760px;
  --bp-popover-w: 380px;
  --bp-gutter: 24px;
  --bp-gutter-phone: 16px;

  /* Motion: durations */
  --bp-dur-press: 90ms;
  --bp-dur-fast: 150ms;
  --bp-dur-base: 220ms;
  --bp-dur-move: 320ms;
  --bp-dur-spring: 460ms;
  --bp-dur-level: 600ms;
  --bp-dur-route: 600ms;
  --bp-hold-low: 2s;
  --bp-hold-high: 5s;
  --bp-hold-press: 1s;

  /* Motion: curves. Springs are sampled from stiffness, damping, mass 1. */
  --bp-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --bp-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --bp-ease-smooth: cubic-bezier(0.45, 0.05, 0.25, 1);
  /* spring-settle: stiffness 300, damping 30 (layout, expand, collapse) */
  --bp-spring-settle: linear(
    0,
    0.045,
    0.149,
    0.278,
    0.41,
    0.534,
    0.642,
    0.732,
    0.805,
    0.862,
    0.906,
    0.938,
    0.962,
    0.978,
    0.989,
    0.996,
    1.001,
    1.003,
    1.004,
    1.004,
    1.003,
    1
  );
  /* spring-arrive: stiffness 250, damping 25 (new card, panel open) */
  --bp-spring-arrive: linear(
    0,
    0.046,
    0.155,
    0.291,
    0.431,
    0.563,
    0.678,
    0.773,
    0.849,
    0.907,
    0.949,
    0.978,
    0.997,
    1.009,
    1.015,
    1.017,
    1.016,
    1.013,
    1.009,
    1.005,
    1
  );
  /* spring-lamp: stiffness 520, damping 24 (lamp light up, small overshoot) */
  --bp-spring-lamp: linear(0, 0.104, 0.337, 0.602, 0.834, 1.003, 1.102, 1.141, 1.137, 1.108, 1.071, 1.035, 1.007, 0.99, 0.981, 0.983, 0.993, 1.001, 1);
  /* spring-level: stiffness 220, damping 26 (the horizon levels off) */
  --bp-spring-level: linear(0, 0.044, 0.145, 0.27, 0.399, 0.521, 0.627, 0.717, 0.791, 0.849, 0.894, 0.928, 0.953, 0.971, 0.983, 0.992, 0.997, 1, 1.002, 1.003, 1);

  /* Day theme (light) */
  --bp-bg: #f4f6f9;
  --bp-bg-deep: #e9edf2;
  --bp-surface-1: #ffffff;
  --bp-surface-2: #eef1f5;
  --bp-surface-3: #e3e8ee;
  --bp-surface-raised: #ffffff;
  --bp-ink-1: #11161d;
  --bp-ink-2: #3a424e;
  --bp-ink-3: #5f6877;
  --bp-ink-4: rgb(17 22 29 / 0.28);
  --bp-hairline: rgb(17 22 29 / 0.08);
  --bp-hairline-strong: rgb(17 22 29 / 0.14);
  --bp-primary-fill: #11161d;
  --bp-primary-ink: #ffffff;
  --bp-primary-hover: #262d37;
  --bp-tonal-fill: #eef1f5;
  --bp-tonal-hover: #e3e8ee;
  --bp-signal-fill: #ff5b1f;
  --bp-signal-text: #bd3f0b;
  --bp-signal-wash: rgb(255 91 31 / 0.07);
  --bp-signal-ring: rgb(255 91 31 / 0.14);
  --bp-on-signal: #0b0f14;
  --bp-iris: #5b4be0;
  --bp-iris-lamp: #5b4be0;
  --bp-iris-wash: rgb(91 75 224 / 0.08);
  --bp-jade: #0a7859;
  --bp-jade-lamp: #0f9a73;
  --bp-jade-wash: rgb(10 120 89 / 0.08);
  --bp-rose: #bf1d58;
  --bp-rose-lamp: #d42a68;
  --bp-rose-wash: rgb(191 29 88 / 0.08);
  --bp-held: #5f6877;
  --bp-focus: #ff5b1f;
  --bp-scrim: rgb(17 22 29 / 0.32);
  --bp-shadow-1: 0 1px 2px rgb(17 22 29 / 0.04), 0 0 0 1px rgb(17 22 29 / 0.06);
  --bp-shadow-2: 0 1px 2px rgb(17 22 29 / 0.05), 0 8px 24px -8px rgb(17 22 29 / 0.12), 0 0 0 1px rgb(17 22 29 / 0.06);
  --bp-shadow-3: 0 18px 50px rgb(17 22 29 / 0.18), 0 0 0 0.5px rgb(17 22 29 / 0.1);
  --bp-shadow-4: 0 40px 90px -20px rgb(17 22 29 / 0.38), 0 0 0 0.5px rgb(17 22 29 / 0.12);
  --bp-material-chrome: rgb(246 248 251 / 0.72);
  --bp-material-popover: rgb(250 251 253 / 0.78);
  --bp-material-blur: saturate(180%) blur(40px);
  --bp-material-rim: inset 0 0.5px 0 rgb(255 255 255 / 0.9), inset 0 0 0 0.5px rgb(17 22 29 / 0.06);
  --bp-grain-opacity: 0;
}

/* Night theme (dark), from the system setting */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bp-bg: #0b0f14;
    --bp-bg-deep: #070a0e;
    --bp-surface-1: #141a22;
    --bp-surface-2: #1b222b;
    --bp-surface-3: #242c37;
    --bp-surface-raised: #19202a;
    --bp-ink-1: #f4f6f9;
    --bp-ink-2: #c3c9d2;
    --bp-ink-3: #949dab;
    --bp-ink-4: rgb(244 246 249 / 0.26);
    --bp-hairline: rgb(255 255 255 / 0.08);
    --bp-hairline-strong: rgb(255 255 255 / 0.14);
    --bp-primary-fill: #f4f6f9;
    --bp-primary-ink: #0b0f14;
    --bp-primary-hover: #ffffff;
    --bp-tonal-fill: #1f2630;
    --bp-tonal-hover: #29313c;
    --bp-signal-fill: #ff5b1f;
    --bp-signal-text: #ff6a33;
    --bp-signal-wash: rgb(255 91 31 / 0.1);
    --bp-signal-ring: rgb(255 91 31 / 0.2);
    --bp-on-signal: #0b0f14;
    --bp-iris: #9488ff;
    --bp-iris-lamp: #9488ff;
    --bp-iris-wash: rgb(148 136 255 / 0.12);
    --bp-jade: #2ec293;
    --bp-jade-lamp: #2ec293;
    --bp-jade-wash: rgb(46 194 147 / 0.12);
    --bp-rose: #ff5c8f;
    --bp-rose-lamp: #ff5c8f;
    --bp-rose-wash: rgb(255 92 143 / 0.12);
    --bp-held: #8f98a6;
    --bp-focus: #ff5b1f;
    --bp-scrim: rgb(0 0 0 / 0.5);
    --bp-shadow-1: 0 0 0 1px rgb(255 255 255 / 0.06);
    --bp-shadow-2: 0 0 0 1px rgb(255 255 255 / 0.07), 0 12px 32px -12px rgb(0 0 0 / 0.6);
    --bp-shadow-3: 0 24px 60px rgb(0 0 0 / 0.55), 0 0 0 0.5px rgb(255 255 255 / 0.12);
    --bp-shadow-4: 0 40px 90px -20px rgb(0 0 0 / 0.7), 0 0 0 0.5px rgb(255 255 255 / 0.12);
    --bp-material-chrome: rgb(20 25 32 / 0.66);
    --bp-material-popover: rgb(24 30 38 / 0.74);
    --bp-material-rim: inset 0 0.5px 0 rgb(255 255 255 / 0.14), inset 0 0 0 0.5px rgb(255 255 255 / 0.08);
    --bp-grain-opacity: 0.05;
  }
}

/* Night theme (dark), forced */
:root[data-theme="dark"] {
  --bp-bg: #0b0f14;
  --bp-bg-deep: #070a0e;
  --bp-surface-1: #141a22;
  --bp-surface-2: #1b222b;
  --bp-surface-3: #242c37;
  --bp-surface-raised: #19202a;
  --bp-ink-1: #f4f6f9;
  --bp-ink-2: #c3c9d2;
  --bp-ink-3: #949dab;
  --bp-ink-4: rgb(244 246 249 / 0.26);
  --bp-hairline: rgb(255 255 255 / 0.08);
  --bp-hairline-strong: rgb(255 255 255 / 0.14);
  --bp-primary-fill: #f4f6f9;
  --bp-primary-ink: #0b0f14;
  --bp-primary-hover: #ffffff;
  --bp-tonal-fill: #1f2630;
  --bp-tonal-hover: #29313c;
  --bp-signal-fill: #ff5b1f;
  --bp-signal-text: #ff6a33;
  --bp-signal-wash: rgb(255 91 31 / 0.1);
  --bp-signal-ring: rgb(255 91 31 / 0.2);
  --bp-on-signal: #0b0f14;
  --bp-iris: #9488ff;
  --bp-iris-lamp: #9488ff;
  --bp-iris-wash: rgb(148 136 255 / 0.12);
  --bp-jade: #2ec293;
  --bp-jade-lamp: #2ec293;
  --bp-jade-wash: rgb(46 194 147 / 0.12);
  --bp-rose: #ff5c8f;
  --bp-rose-lamp: #ff5c8f;
  --bp-rose-wash: rgb(255 92 143 / 0.12);
  --bp-held: #8f98a6;
  --bp-focus: #ff5b1f;
  --bp-scrim: rgb(0 0 0 / 0.5);
  --bp-shadow-1: 0 0 0 1px rgb(255 255 255 / 0.06);
  --bp-shadow-2: 0 0 0 1px rgb(255 255 255 / 0.07), 0 12px 32px -12px rgb(0 0 0 / 0.6);
  --bp-shadow-3: 0 24px 60px rgb(0 0 0 / 0.55), 0 0 0 0.5px rgb(255 255 255 / 0.12);
  --bp-shadow-4: 0 40px 90px -20px rgb(0 0 0 / 0.7), 0 0 0 0.5px rgb(255 255 255 / 0.12);
  --bp-material-chrome: rgb(20 25 32 / 0.66);
  --bp-material-popover: rgb(24 30 38 / 0.74);
  --bp-material-rim: inset 0 0.5px 0 rgb(255 255 255 / 0.14), inset 0 0 0 0.5px rgb(255 255 255 / 0.08);
  --bp-grain-opacity: 0.05;
}

/* Increase Contrast */
@media (prefers-contrast: more) {
  :root {
    --bp-ink-2: var(--bp-ink-1);
    --bp-ink-3: var(--bp-ink-2);
    --bp-hairline: var(--bp-hairline-strong);
  }
}

/* Reduce Transparency: glass becomes a solid surface, the rim stays */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --bp-material-chrome: var(--bp-surface-2);
    --bp-material-popover: var(--bp-surface-1);
    --bp-material-blur: none;
  }
}

/* Reduce Motion: movement becomes short cross-fades */
@media (prefers-reduced-motion: reduce) {
  :root {
    --bp-dur-move: 150ms;
    --bp-dur-spring: 150ms;
    --bp-dur-level: 0ms;
    --bp-dur-route: 0ms;
    --bp-spring-settle: linear(0, 1);
    --bp-spring-arrive: linear(0, 1);
    --bp-spring-lamp: linear(0, 1);
    --bp-spring-level: linear(0, 1);
  }
}