/*
 * Catch brand token layer.
 *
 * This is the complete, portable design system: color tokens, semantic
 * surface/text/state tokens (light + dark), base typography, shape,
 * elevation, spacing, chart color (categorical/sequential/diverging), and
 * the brand-mark component. Every value here is meant to be consumed as-is
 * by any internal platform — apply the tokens, don't re-derive them.
 *
 * Every system built on this standard must support both light and dark
 * theme — that's why every semantic token below is supplied as a pair.
 *
 * The --app-space-* scale (4/8/12/16/24/32/48/64px) is theme-independent
 * and load-bearing for cards, pills and tabs — see design-system.html
 * section 07 for how they're meant to compose.
 *
 * See README.md for the surface model, theme bootstrap, and known
 * inconsistencies to fix rather than inherit.
 */

:root {
  color-scheme: light;
  --catch-black: #100f13;
  --catch-purple: #9b1dff;
  --catch-purple-dark: #832fdf;
  --catch-purple-deep: #7012c4;
  --catch-purple-light: #b56aff;
  --catch-purple-soft: #f4e7ff;
  --catch-lime: #bff846;
  --catch-magenta: #ee4175;
  --catch-teal: #16dfdf;
  --catch-orange: #ffad05;
  --catch-blue: #1c6bff;
  --catch-grey: #7d7b7e;
  --catch-silver: #b8b7b9;
  --catch-smoke: #e4e4e4;
  --catch-snow: #f6f6f6;
  --catch-white: #ffffff;
  --catch-purple-gradient: linear-gradient(180deg, #9b1dff 0%, #832fdf 58%, #7012c4 100%);

  --app-canvas: var(--catch-snow);
  --app-nav: var(--catch-black);
  --app-workspace: var(--catch-snow);
  --app-surface: #f0eff1;
  --app-surface-raised: var(--catch-white);
  --app-surface-strong: var(--catch-smoke);
  --app-line: var(--catch-smoke);
  --app-line-strong: var(--catch-silver);
  --app-text: var(--catch-black);
  --app-text-secondary: #565459;
  --app-text-muted: #6b696d;
  --app-accent: var(--catch-purple);
  --app-accent-hover: var(--catch-purple-dark);
  --app-accent-soft: var(--catch-purple-soft);
  --app-focus: var(--catch-blue);
  --app-positive: #3f6e00;
  --app-positive-soft: #effbd8;
  --app-warning: #845600;
  --app-warning-soft: #fff4d7;
  --app-critical: #b51d4d;
  --app-critical-hover: #9c1841;
  --app-critical-soft: #fde9ef;
  --app-info: #1554ce;
  --app-info-soft: #eaf0ff;
  --call-inbound: var(--catch-blue);
  --call-outbound: var(--catch-magenta);
  /* Chart categorical series — assign 1..6 in order, never cycled or
   * reordered. Validated (CVD-simulated + normal-vision) as a set; slots
   * 1-3 also clear the stricter all-pairs check scatter/bubble/map charts
   * need. See design-system.html section 11 for the full validation
   * results and what to do past 6 series or past slot 3 on those forms. */
  --app-chart-1: #1c6bff;
  --app-chart-2: #b8790a;
  --app-chart-3: #009999;
  --app-chart-4: #ee4175;
  --app-chart-5: #3f6e00;
  --app-chart-6: #9b1dff;
  --app-chart-sequential-low: #f4e7ff;
  --app-chart-sequential-mid: #9b1dff;
  --app-chart-sequential-high: #7012c4;
  --app-chart-diverging-negative: #b8790a;
  --app-chart-diverging-neutral: #e4e4e4;
  --app-chart-diverging-positive: #1c5cb8;
  --app-shadow: 0 12px 32px rgba(16, 15, 19, .08);
  --app-shadow-menu: 0 20px 50px rgba(16, 15, 19, .16), 0 2px 8px rgba(16, 15, 19, .08);
  --app-backdrop: rgba(16, 15, 19, .62);
  --app-radius-control: 999px;
  --app-radius-panel: 14px;
  --app-radius-input: 10px;
  --app-space-1: 4px;
  --app-space-2: 8px;
  --app-space-3: 12px;
  --app-space-4: 16px;
  --app-space-5: 24px;
  --app-space-6: 32px;
  --app-space-7: 48px;
  --app-space-8: 64px;
  --app-control-height: 40px;
  --app-sidebar-width: 248px;
  --app-topbar-height: 64px;
  /* The nav rail is --app-nav (already dark in both themes) — these
   * three are the fixed light-on-dark treatment for content that sits
   * on it, independent of the app's own light/dark toggle. Not a
   * second theme system: the sidebar simply doesn't participate in the
   * light/dark toggle the way surface content does. */
  --app-nav-text: rgba(255, 255, 255, .92);
  --app-nav-text-muted: rgba(255, 255, 255, .58);
  --app-nav-accent: #c186ff;
  --font-ui: "Inter Variable", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --app-canvas: var(--catch-black);
  --app-nav: #09080b;
  --app-workspace: #151318;
  --app-surface: #1d1b20;
  --app-surface-raised: #242127;
  --app-surface-strong: #302c34;
  --app-line: #3b3740;
  --app-line-strong: #56505b;
  --app-text: var(--catch-white);
  --app-text-secondary: #d0cdd2;
  --app-text-muted: #aaa5ad;
  --app-accent: #c186ff;
  --app-accent-hover: #d2a9ff;
  --app-accent-soft: #39204f;
  --app-focus: #73c3ff;
  --app-positive: var(--catch-lime);
  --app-positive-soft: #2b3915;
  --app-warning: var(--catch-orange);
  --app-warning-soft: #3d2c0b;
  --app-critical: #ff7aa1;
  --app-critical-hover: #ff97b6;
  --app-critical-soft: #471d2b;
  --app-info: var(--catch-teal);
  --app-info-soft: #10383a;
  --call-inbound: #7598ff;
  --call-outbound: #ff78a0;
  --app-chart-1: #4a7ae8;
  --app-chart-2: #b87804;
  --app-chart-3: #0d9d9d;
  --app-chart-4: #e0567e;
  --app-chart-5: #749f27;
  --app-chart-6: #a05ce8;
  --app-chart-sequential-low: #2d1a42;
  --app-chart-sequential-mid: #9b1dff;
  --app-chart-sequential-high: #c186ff;
  --app-chart-diverging-negative: #b87804;
  --app-chart-diverging-neutral: #302c34;
  --app-chart-diverging-positive: #4a7ae8;
  --app-shadow: 0 14px 38px rgba(0, 0, 0, .28);
  --app-shadow-menu: 0 24px 60px rgba(0, 0, 0, .48);
}

/* Density. .compact shifts the spacing scale itself down one step and
 * drops --app-control-height, so it works two ways at once: applied to
 * one component it's that component's compact tier; applied to an
 * ancestor (a card, a section, <body>) it cascades to every descendant
 * that reads these tokens, with no per-child class needed. See
 * design-system.html section 07 ("Density") for the full explanation,
 * including the one real gotcha: a descendant's own .standard class
 * does not escape an ambient .compact ancestor, because the tokens
 * themselves shifted, not just that one element's declarations. */
.compact {
  --app-space-8: var(--app-space-7);
  --app-space-7: var(--app-space-6);
  --app-space-6: var(--app-space-5);
  --app-space-5: var(--app-space-4);
  --app-space-4: var(--app-space-3);
  --app-space-3: var(--app-space-2);
  --app-space-2: var(--app-space-1);
  --app-control-height: 32px;
}

html, body { background: var(--app-canvas); }
body {
  color: var(--app-text);
  background: var(--app-canvas);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
}
h1, h2, h3, h4 { font-family: var(--font-ui); }
h1 { font-weight: 700; letter-spacing: -.04em; }
h2, h3, h4 { font-weight: 700; }
::selection { color: var(--catch-white); background: var(--catch-purple); }

/* Brand mark — swap the cut, never recolour. Pass a black + white PNG pair
   per lockup (see assets/) as .on-light / .on-dark children. */
.brand-logo { position: relative; display: inline-grid; align-items: center; width: 164px; line-height: 0; }
.brand-logo img { grid-area: 1 / 1; display: block; width: 100%; height: auto; }
.brand-logo-light-art { display: none !important; }
.brand-logo-light .brand-logo-dark-art { display: none; }
.brand-logo-light .brand-logo-light-art { display: block !important; }
.brand-logo-compact { width: 24px; }
:root[data-theme="dark"] .brand-logo-auto .brand-logo-dark-art { display: none; }
:root[data-theme="dark"] .brand-logo-auto .brand-logo-light-art { display: block !important; }
.center .brand-logo { width: 190px; margin: 0 auto 1rem; }
.center > p { text-align: center; }