/* Blue Whale — the canonical tokens. ONE source of truth for two apps.
 * ---------------------------------------------------------------------------
 * Consumed by:
 *   · the CRM      — crm/leads/templates/leads/base.html links it before crm.css
 *                    (Django serves this directory; see STATICFILES_DIRS)
 *   · the site     — @import or <link> this file, then delete the palette block
 *                    from app/globals.css. Nothing else needs to change: the
 *                    site's own --color-* names are defined here already.
 *
 * Two vocabularies, one palette. The site says --color-canvas, the CRM says
 * --paper; both are mapped onto the same kit scale below, so neither app had to
 * be refactored to share this and neither can drift from the other.
 *
 * THE KIT · "Brand & UI system · v3 light glass"
 *   White canvas. Blue only where it acts.
 *   Ink #04122E · Deep #072A6B · Signal #1567FF · Sky #7FB0FF · Mist #E8F0FF
 *   Green and red exist ONLY as data semantics. Manrope + JetBrains Mono.
 *   Radius 12 / 18 / 26. If a surface needs to feel raised, add light — not
 *   another colour.
 *
 * THE DARK SIDE IS DERIVED — the kit ships light only.
 * The trap when inverting this palette is demoting Signal: on a navy ground the
 * lazy move is to promote Sky to the action colour, which breaks the kit's one
 * real rule ("blue only where it acts" means *that* blue). It isn't necessary.
 * Measured: white on Signal #1567FF is 4.76:1 — the same in either theme, since
 * the button colour doesn't change — and Signal against the #04122E canvas is
 * 3.90:1, past the 3.0 needed for a UI edge. So Signal stays the action colour
 * in both themes and only the ground moves. Every pair below was checked:
 * body text 17.3:1 dark / 17.8:1 light, muted 6.5:1 dark / 4.8:1 light,
 * semantics 7.7–9.4:1 on the dark card.
 *
 * SWITCHING. `color-scheme` drives everything through light-dark(), so a theme
 * is one attribute and native controls (scrollbars, date pickers, form widgets)
 * follow along for free:
 *     no attribute        → follow the OS
 *     data-theme="light"  → force light
 *     data-theme="dark"   → force dark
 * The selectors are unqualified so they match a wrapper element, not just
 * :root — the site applies its theme to a wrapper and that must keep working.
 */

:root {
  /* Both schemes permitted, so light-dark() resolves from the OS by default. */
  color-scheme: light dark;

  /* ---- the kit's five, fixed in both themes ----
     Named --kit-*, not --bw-*: the site's components already use --bw-signal to
     hold bare channels for rgba(), and a hex here under the same name would
     break every one of them. */
  --kit-ink: #04122e;
  --kit-deep: #072a6b;
  --kit-signal: #1567ff;
  --kit-sky: #7fb0ff;
  --kit-mist: #e8f0ff;

  /* ---- surfaces ---- */
  --color-canvas:        light-dark(#f7faff, #04122e);
  --color-canvas-raised: light-dark(#ffffff, #0b2148);
  --color-canvas-inset:  light-dark(#f2f7ff, #072a6b);

  /* ---- text ---- */
  --color-ink:       light-dark(#04122e, #f2f7ff);
  --color-ink-muted: light-dark(#0b2148, #c9ddff);
  --color-ink-dim:   light-dark(#6b7386, #93a7c9);

  /* ---- rules ---- */
  --color-rule:        light-dark(#e3eaf6, #123059);
  --color-rule-strong: light-dark(#d3e0f5, #1c4179);

  /* ---- action. Signal in both themes; only the hover step differs. ---- */
  --color-accent:      #1567ff;
  --color-accent-soft: #5c9bff;
  --color-accent-deep: light-dark(#0b47c4, #a9c8ff);
  --color-accent-tint: light-dark(#e8f0ff, #0e2f66);

  /* ---- data semantics only, never decoration ----
     The -dot values are the kit's own positive/negative; the flat values are
     the same hue taken far enough for text to clear contrast on its own tint. */
  --color-ok:       light-dark(#00734e, #3be0a5);
  --color-ok-dot:   light-dark(#00b478, #3be0a5);
  --color-ok-tint:  light-dark(#e2f6ef, #06301f);
  --color-warn:     light-dark(#8a5a00, #e0ac54);
  --color-warn-tint:light-dark(#fdf1dc, #2e2208);
  --color-bad:      light-dark(#c6382f, #ff9c95);
  --color-bad-dot:  light-dark(#e0453b, #ff9c95);
  --color-bad-tint: light-dark(#fdecea, #3a1512);

  /* The site composes this into rgba(), so it is bare channels, not a colour —
     light-dark() cannot carry it and it needs the long-hand switch below. */
  --scrim: 247, 250, 255;

  /* ---- the surface recipe: depth from light, not hue ---- */
  --rim:      light-dark(rgba(11, 71, 196, .13), rgba(127, 176, 255, .16));
  --lift:     light-dark(0 14px 36px rgba(11, 33, 72, .08), 0 14px 36px rgba(0, 0, 0, .4));
  --specular: light-dark(inset 0 1px 0 #fff, inset 0 1px 0 rgba(255, 255, 255, .08));
  --ring:     light-dark(0 0 0 4px rgba(21, 103, 255, .18), 0 0 0 4px rgba(92, 155, 255, .28));
  --signal-glow: light-dark(0 8px 18px rgba(21, 103, 255, .35), 0 8px 18px rgba(21, 103, 255, .45));
  --shadow:   light-dark(0 1px 2px rgba(11, 33, 72, .06), 0 1px 2px rgba(0, 0, 0, .5));

  /* ---- 12 controls · 18 surfaces · 26 hero ---- */
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;

  /* ---- the CRM's vocabulary, same values ---- */
  --paper: var(--color-canvas);
  --card: var(--color-canvas-raised);
  --raised: var(--color-canvas-inset);
  --ink: var(--color-ink);
  --ink-2: var(--color-ink-muted);
  --muted: var(--color-ink-dim);
  --line: var(--color-rule);
  --line-2: var(--color-rule-strong);
  --accent: var(--color-accent);
  --accent-hot: var(--color-accent-soft);
  --accent-deep: var(--color-accent-deep);
  --accent-soft: var(--color-accent-tint);
  --ok: var(--color-ok);
  --ok-dot: var(--color-ok-dot);
  --ok-soft: var(--color-ok-tint);
  --warn: var(--color-warn);
  --warn-soft: var(--color-warn-tint);
  --bad: var(--color-bad);
  --bad-dot: var(--color-bad-dot);
  --bad-soft: var(--color-bad-tint);
}

/* An explicit choice pins color-scheme, and every light-dark() above follows. */
[data-theme="light"] { color-scheme: light; --scrim: 247, 250, 255; }
[data-theme="dark"]  { color-scheme: dark;  --scrim: 4, 18, 46; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --scrim: 4, 18, 46; }
}

/* light-dark() is Baseline 2024. Anything older gets the light palette, which
   is the kit's native mode — a fallback that is also the correct default. */
@supports not (color: light-dark(#fff, #000)) {
  :root {
    --color-canvas: #f7faff;
    --color-canvas-raised: #ffffff;
    --color-canvas-inset: #f2f7ff;
    --color-ink: #04122e;
    --color-ink-muted: #0b2148;
    --color-ink-dim: #6b7386;
    --color-rule: #e3eaf6;
    --color-rule-strong: #d3e0f5;
    --color-accent-soft: #5c9bff;
    --color-accent-deep: #0b47c4;
    --color-accent-tint: #e8f0ff;
    --color-ok: #00734e;   --color-ok-dot: #00b478;  --color-ok-tint: #e2f6ef;
    --color-warn: #8a5a00; --color-warn-tint: #fdf1dc;
    --color-bad: #c6382f;  --color-bad-dot: #e0453b; --color-bad-tint: #fdecea;
    --rim: rgba(11, 71, 196, .13);
    --lift: 0 14px 36px rgba(11, 33, 72, .08);
    --specular: inset 0 1px 0 #fff;
    --ring: 0 0 0 4px rgba(21, 103, 255, .18);
    --signal-glow: 0 8px 18px rgba(21, 103, 255, .35);
    --shadow: 0 1px 2px rgba(11, 33, 72, .06);
  }
}

/* ---------------------------------------------------------------------------
 * The marketing site's blue theme.
 *
 * The site applies `data-theme="blue"` as its default and keeps the older amber
 * light/dark themes alive for /old and /home, so its blue cannot live at :root
 * the way the CRM's does — it has to be a scoped block. Same palette, second
 * doorway into it.
 *
 * The site's own `--bw-*` constants are defined here too, because its
 * components already reference them. `--bw-signal` is bare CHANNELS, for
 * composing into rgba() — not a colour. Do not "tidy" it into a hex.
 *
 * One deliberate difference from the CRM, and the only one: the site's canvas
 * is pure white, the CRM's is the faintly lit #F7FAFF field. A marketing page
 * wants "the system sits on white"; a dense app needs the field lit or its
 * cards have nothing to be raised against. Same palette either way.
 * --------------------------------------------------------------------------- */

[data-theme="blue"] {
  color-scheme: light;

  --color-canvas: #ffffff;
  --color-canvas-raised: #ffffff;
  --color-canvas-inset: #f5f9ff;
  --color-ink: #04122e;
  /* The kit puts body copy at rgba(4,18,46,.6); this site has a standing rule
     that body copy reads black, not grey. Deep #0B2148 honours both — it is the
     kit's own structure colour and it reads as text, not as a caption. The
     kit's .6 grey lives on as --color-ink-dim for meta and captions. */
  --color-ink-muted: #0b2148;
  --color-ink-dim: #6b7386;
  --color-rule: #e3eaf6;
  --color-rule-strong: #d3e0f5;
  --color-accent: #1567ff;
  --color-accent-soft: #5c9bff;
  --color-accent-deep: #0b47c4;
  --color-accent-tint: #e8f0ff;
  --scrim: 255, 255, 255;

  /* Kit constants, quoted rather than approximated. */
  --bw-signal: 21, 103, 255;
  --bw-glow: rgba(21, 103, 255, 0.35);
  --bw-rim: rgba(11, 71, 196, 0.13);
  --bw-rim-strong: rgba(11, 71, 196, 0.2);
  --bw-lift: 0 14px 36px rgba(11, 33, 72, 0.08);
  --bw-lift-lg: 0 26px 56px rgba(11, 33, 72, 0.14);
  --bw-specular: inset 0 1px 0 #fff;
  --bw-blur: 18px;
  --bw-r-sm: 12px;
  --bw-r-md: 18px;
  --bw-r-lg: 26px;
  --bw-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}