/* ─────────────────────────────────────────────────────────────
   Indifferent Ketchup — shared design tokens
   Single source of truth for every site's color, type, spacing,
   radius, shadow, and motion values.

   Origin: merged from sortof/DESIGN.md (locked palette + rules),
   mulch/globals.css (severity scale), and analytics/app.css
   (spacing + shadow scale, chart colors). Do not fork this file
   per site — edit here, then copy/redistribute (see ../README.md).

   Brand rule (load-bearing, do not "fix" by making it symmetric):
     --brand-*  = Indifferent Ketchup, the product studio. Red.
                  Used for primary CTAs and product identity in
                  every site's UI.
     --org-mark = Indifferent Broccoli, the parent org. Green.
                  Reserved for the footer credit link ONLY — ketchup
                  icon at the top of a page, broccoli icon at the
                  bottom, never both in the same spot. Never used as
                  a general button/accent color, and never placed in
                  a header/nav — if you're reaching for --org-mark
                  outside a footer credit (or the .org-badge-fixed
                  fallback for footerless apps), use --success or
                  --brand instead.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ══ canvas (cool, blue-cast dark — the one canonical background) ══ */
  --bg: #0A141E;
  --bg-deep: #050E17;       /* nav rails, sidebars — one step darker than canvas */
  --bg-surface: #14293C;    /* panels, cards, inputs */
  --bg-elevated: #1B3550;   /* hover/active/focused surfaces */
  --bg-inset: #0E1C2B;      /* recessed wells (code block bodies, table stripes) */
  --border: #2A4A6B;
  --border-strong: #3A5C80;

  /* ══ text ══ */
  --text: #FFFFFF;
  --text-muted: #A3B8CC;   /* 4.7:1 on --bg — passes WCAG AA */
  --text-faint: #8A9CAE;

  /* ══ brand (Indifferent Ketchup — Signal Red, rare, action-only) ══
     Rarity rule: red covers at most ~10% of any viewport — one
     primary action per screen. It never fills a large surface. */
  --brand: #FF3838;
  --brand-hover: #E62E2E;
  --brand-ink: #0A141E;      /* text color ON a red fill */
  --brand-bg: rgb(255 56 56 / 0.14);
  --brand-border: rgb(255 56 56 / 0.40);

  /* ══ org mark (Indifferent Broccoli — restricted use, see header note) ══ */
  --org-mark: #5EFF0D;
  --org-mark-hover: #4ACC00;
  --org-mark-ink: #0A141E;

  /* ══ secondary action (azure — never a fill, borders/links only) ══ */
  --secondary: #0050FF;
  --secondary-hover: #2E6BFF;
  --secondary-ink: #FFFFFF;

  /* ══ semantic ══ */
  --info: #56B4E9;
  --info-bg: rgb(86 180 233 / 0.14);
  --info-border: rgb(86 180 233 / 0.40);

  --success: var(--org-mark);
  --success-bg: rgb(94 255 13 / 0.12);
  --success-border: rgb(94 255 13 / 0.35);

  --warning: #E69F00;
  --warning-bg: rgb(230 159 0 / 0.14);
  --warning-border: rgb(230 159 0 / 0.40);

  --danger: #E97515;         /* shifted from #D55E00 to clear WCAG AA on --bg-surface */
  --danger-bg: rgb(233 117 21 / 0.16);
  --danger-border: rgb(233 117 21 / 0.40);

  --purple: #8A2BE2;         /* tertiary accent — used sparingly for a 4th chart series or tag */

  /* ══ severity scale (log/incident-domain products: mulch, palworld tool,
     boss-search staff tooling, broccoli-dashboard status). Colorblind-safe
     (Okabe-Ito derived), warm ramp from critical → noise. ══ */
  --sev-critical: color-mix(in srgb, var(--danger) 70%, var(--text) 30%);
  --sev-critical-bg: var(--danger-bg);
  --sev-high: #FF8C42;
  --sev-high-bg: color-mix(in srgb, #FF8C42 12%, transparent);
  --sev-medium: #FBBF24;
  --sev-medium-bg: color-mix(in srgb, #FBBF24 12%, transparent);
  --sev-low: var(--text-muted);
  --sev-low-bg: var(--bg);
  --sev-noise: color-mix(in srgb, var(--text) 52%, var(--bg) 48%);
  --sev-noise-bg: var(--bg);

  /* ══ chart / categorical (dashboards: analytics, broccoli-dashboard, boss-search).
     Reuses the semantic hues above so a legend color always means the same
     thing it means elsewhere in the UI — do not introduce a chart-only hue. ══ */
  --chart-1: var(--org-mark);   /* primary series */
  --chart-2: var(--info);
  --chart-3: var(--warning);
  --chart-4: var(--purple);
  --chart-5: var(--danger);
  --chart-6: var(--secondary);

  /* ══ radius (≤ 12px everywhere; 24px+ is the AI rounding tell) ══ */
  --radius-pill: 999px;
  --radius-panel: 12px;
  --radius-md: 8px;
  --radius-sm: 6px;
  --radius-xs: 4px;

  /* ══ shadow (soft + ambient — panels are shadow-defined, not bordered) ══ */
  --shadow-panel: 0 2px 12px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-deep: 0 14px 36px rgba(1, 4, 9, 0.60);
  --shadow-glow-success: 0 0 20px rgb(94 255 13 / 0.08);

  /* ══ spacing (4px base scale) ══ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --page-padding: clamp(20px, 4vw, 40px);
  --section-y: clamp(28px, 4vw, 40px);

  /* ══ motion ══ */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-fast: 150ms;
  --t-base: 220ms;
  --t-slow: 400ms;

  /* ══ type ══
     Sites without next/font (everything except mulch's Next.js app) load
     these via the Google Fonts <link> in fonts.css. Sites using next/font
     bind --font-sora / --font-jetbrains on <html> instead — see fonts.css. */
  --font-display: 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-sans: 'Open Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --scrollbar-height: 8px;
}

/* Baseline reset + scrollbar/selection/focus treatment shared by every
   site. Safe to include even where a site already has its own reset —
   these rules are idempotent. */
@layer ketchup-base {
  html {
    height: 100%;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    line-height: 1.6;
    min-height: 100%;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  ::selection {
    background-color: rgb(86 180 233 / 0.35);
    color: var(--text);
  }

  :focus {
    outline: none;
  }
  :focus-visible {
    outline: 2px solid var(--info);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
  }

  *::-webkit-scrollbar {
    width: 10px;
    height: var(--scrollbar-height);
  }
  *::-webkit-scrollbar-track {
    background: transparent;
  }
  *::-webkit-scrollbar-thumb {
    background-color: var(--border);
    border-radius: var(--radius-xs);
  }
  *::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-muted);
  }
  * {
    scrollbar-color: var(--border) transparent;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}