/* Inter — the intranet's brand grotesk (MVP-037). Must stay the FIRST rule in
 * this file: CSS requires @import before any other statement. Loading it here
 * rather than per-surface is deliberate — tokens.css is the one artifact every
 * surface already takes (Tailwind preset for the SPAs, <link> for the vanilla
 * pages), so the typeface arrives with the palette instead of each surface
 * remembering to ask for it. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/*
 * Scout design system: shared token core for the intranet.
 *
 * This is the single source of truth for color, type, radius and shadow. The
 * React SPAs consume it two ways at once:
 *   1. the Tailwind preset (tailwind-preset.js) maps semantic utility classes
 *      (bg-surface, text-fg, border-line, rounded-lg, shadow-card, ...) onto
 *      these variables, so the palette lives in ONE place;
 *   2. the vanilla surfaces (home, shell, published pages) read var(--...)
 *      directly. They are wired up in a later story; the tokens are ready now.
 *
 * Two worlds off one token set, homescout style:
 *   default (no data-theme) / [data-theme="dark"] / [data-theme="scout"]  = Scout, dark
 *   [data-theme="light"] / [data-theme="portal"]                          = Portal, light
 * When no explicit data-theme is set, the OS preference is honored.
 *
 * The legacy semantic names (--canvas, --surface, --subtle, --fg, --muted,
 * --line, --accent, --accent-fg, --danger, --font) are preserved so existing
 * markup keeps working; they now resolve to Scout values. New work can reach
 * for the richer Scout tokens too (--ground-*, --sage, --lime, --glass,
 * --shadow-*, --radius-*).
 */

/* ---------- Scout, dark: the default world ---------- */
:root {
  /* legacy semantic tokens (kept; now Scout dark) */
  --canvas: #1b2426;
  --surface: #232f2f;
  --subtle: #2b3836;
  --fg: #eceee9;
  --muted: #9aa7a4;
  --line: rgba(255, 255, 255, 0.085);
  --accent: #bacab1;
  --accent-fg: #14201d;
  --danger: #d4909b;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Scout palette */
  --ground-0: #1b2426;
  --ground-1: #22302f;
  --sage: #bacab1;
  --lime: #dcf0d7;
  --griege: #eceee9;
  --ink: #eceee9;

  /* ── liquid-glass material ─────────────────────────────────────────────
   * Ported from homescout's scout-consumer.css, retuned for a dense working
   * tool. Glass there sits over photography, so it can carry a 16% white fill
   * and a 0.35 edge; over a flat dark ground those read as bright grey panels.
   * The percentages are lower here, but the GEOMETRY is what makes it glass —
   * a hairline edge, an inset top sheen, a blurred backdrop and a soft drop.
   * Use the .glass / .glass-raised classes below rather than these directly.
   */
  --glass: rgba(255, 255, 255, 0.055);
  --glass-strong: rgba(255, 255, 255, 0.10);
  --glass-edge: rgba(255, 255, 255, 0.13);
  --glass-sheen: rgba(255, 255, 255, 0.16);
  --glass-backdrop: blur(20px) saturate(1.35);
  --border-soft: rgba(255, 255, 255, 0.06);

  /* ── status colors ────────────────────────────────────────────────────
   * Desaturated toward the sage ground. The previous set was borrowed from
   * Tailwind's defaults and each hue was fighting the others — a saturated
   * emerald, amber and pink on one card read as three separate systems. These
   * keep their meaning while sitting in the same family, so a board of chips
   * reads as one surface rather than a fruit salad.
   */
  --good: #7fbf9a;
  --warn: #d8ac72;
  --crit: #d4909b;
  /* Informational — replaces the blue/cyan/teal/violet that had accumulated. */
  --info: #8fb2b6;

  /* Status tints. The apps were using Tailwind's -50/-100 fills for these,
     which are near-WHITE and read as bright panels on a dark ground — a big
     part of why the first pass looked so high-contrast. Mixed into
     `transparent` rather than a fixed colour so they tint whatever is behind,
     including a glass surface, and work unchanged in both themes. */
  --good-soft: color-mix(in srgb, var(--good) 15%, transparent);
  --warn-soft: color-mix(in srgb, var(--warn) 15%, transparent);
  --crit-soft: color-mix(in srgb, var(--crit) 15%, transparent);
  --info-soft: color-mix(in srgb, var(--info) 15%, transparent);
  --good-line: color-mix(in srgb, var(--good) 34%, transparent);
  --warn-line: color-mix(in srgb, var(--warn) 34%, transparent);
  --crit-line: color-mix(in srgb, var(--crit) 34%, transparent);
  --info-line: color-mix(in srgb, var(--info) 34%, transparent);

  /* type */
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
  --tracking-tight: -0.015em;
  --tracking-label: 0.14em;

  /* radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* shadow (soft, ink tinted) */
  --shadow-soft: 0 1px 3px 0 rgba(0, 0, 0, 0.35);
  --shadow-card: 0 2px 10px -2px rgba(0, 0, 0, 0.45);
  --shadow-elevated: 0 12px 40px -12px rgba(0, 0, 0, 0.55);
  --shadow-glass: inset 0 1px 0 var(--glass-sheen),
                  inset 0 -1px 0 rgba(0, 0, 0, 0.18),
                  0 18px 40px -22px rgba(0, 0, 0, 0.55);

  /* Opt-in ground (bg-ground). The linear ramp is the ground itself; the two
   * radial blooms above it are what make the glass surfaces read AS glass.
   * A backdrop-filter over a perfectly flat fill has nothing to refract, so the
   * material collapses into "a slightly lighter panel" — which is exactly how
   * the first pass looked. Keep the blooms low-contrast: they should be felt at
   * the edges of vision, never seen as shapes. */
  --ground-2: #26332f;
  --ground-bloom:
    radial-gradient(58rem 40rem at 8% -12%, color-mix(in srgb, var(--sage) 13%, transparent), transparent 62%),
    radial-gradient(48rem 34rem at 92% 4%, color-mix(in srgb, var(--info) 11%, transparent), transparent 64%),
    radial-gradient(52rem 36rem at 55% 108%, color-mix(in srgb, var(--sage) 7%, transparent), transparent 60%);
  --ground-gradient: var(--ground-bloom),
    linear-gradient(165deg, var(--ground-1) 0%, var(--ground-0) 45%, var(--ground-2) 100%);
}

/* ---------- Portal, light ---------- */
/* Applied on explicit opt-in, and when the OS prefers light with no data-theme
   set. The media query targets :not([data-theme]) so an explicit
   [data-theme="dark"] keeps Scout even under an OS light preference. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --canvas: #f2f3ef;
    --surface: #ffffff;
    --subtle: #eef0ea;
    --fg: #1a1a1a;
    --muted: #5d6764;
    --line: #e3e6e0;
    --accent: #46585c;
    --accent-fg: #ffffff;
    --danger: #b06170;
    --ground-0: #f2f3ef;
    --ground-1: #f7f8f4;
    --ground-2: #e9ece4;
    /* Far weaker than Scout's: --sage and --info are DARK in this theme, so the
       same mix percentages read as smudges on a near-white ground. */
    --ground-bloom:
      radial-gradient(58rem 40rem at 8% -12%, color-mix(in srgb, var(--sage) 5%, transparent), transparent 62%),
      radial-gradient(48rem 34rem at 92% 4%, color-mix(in srgb, var(--info) 4%, transparent), transparent 64%);
    --ground-gradient: var(--ground-bloom),
      linear-gradient(165deg, var(--ground-1) 0%, var(--ground-0) 45%, var(--ground-2) 100%);
    --sage: #46585c;
    --lime: #dcf0d7;
    --griege: #e3e6e0;
    --ink: #1a1a1a;
    --glass: rgba(255, 255, 255, 0.55);
    --glass-strong: rgba(255, 255, 255, 0.78);
    --glass-edge: rgba(26, 26, 26, 0.10);
    --glass-sheen: rgba(255, 255, 255, 0.85);
    --glass-backdrop: blur(20px) saturate(1.25);
    --border-soft: #ecefe9;
    --good: #3f8f66;
    --warn: #a8763a;
    --crit: #b06170;
    --info: #567b80;

  /* Status tints. The apps were using Tailwind's -50/-100 fills for these,
     which are near-WHITE and read as bright panels on a dark ground — a big
     part of why the first pass looked so high-contrast. Mixed into
     `transparent` rather than a fixed colour so they tint whatever is behind,
     including a glass surface, and work unchanged in both themes. */
  --good-soft: color-mix(in srgb, var(--good) 9%, transparent);
  --warn-soft: color-mix(in srgb, var(--warn) 9%, transparent);
  --crit-soft: color-mix(in srgb, var(--crit) 9%, transparent);
  --info-soft: color-mix(in srgb, var(--info) 9%, transparent);
  --good-line: color-mix(in srgb, var(--good) 26%, transparent);
  --warn-line: color-mix(in srgb, var(--warn) 26%, transparent);
  --crit-line: color-mix(in srgb, var(--crit) 26%, transparent);
  --info-line: color-mix(in srgb, var(--info) 26%, transparent);

    /* Status tints. The apps were using Tailwind's -50/-100 fills for these,
       which are near-WHITE and read as bright panels on a dark ground — a big
       part of why the first pass looked so high-contrast. Mixed into
       `transparent` rather than a fixed colour so they tint whatever is behind,
       including a glass surface, and work unchanged in both themes. */
    --good-soft: color-mix(in srgb, var(--good) 9%, transparent);
    --warn-soft: color-mix(in srgb, var(--warn) 9%, transparent);
    --crit-soft: color-mix(in srgb, var(--crit) 9%, transparent);
    --info-soft: color-mix(in srgb, var(--info) 9%, transparent);
    --good-line: color-mix(in srgb, var(--good) 26%, transparent);
    --warn-line: color-mix(in srgb, var(--warn) 26%, transparent);
    --crit-line: color-mix(in srgb, var(--crit) 26%, transparent);
    --info-line: color-mix(in srgb, var(--info) 26%, transparent);
    --shadow-soft: 0 1px 3px 0 rgba(26, 26, 26, 0.05);
    --shadow-card: 0 2px 10px -2px rgba(26, 26, 26, 0.08);
    --shadow-elevated: 0 10px 30px -14px rgba(26, 26, 26, 0.14);
    --shadow-glass: inset 0 1px 0 var(--glass-sheen),
                    inset 0 -1px 0 rgba(26, 26, 26, 0.06),
                    0 18px 40px -22px rgba(26, 26, 26, 0.18);
  }
}

:root[data-theme="light"],
:root[data-theme="portal"] {
  --canvas: #f2f3ef;
  --surface: #ffffff;
  --subtle: #eef0ea;
  --fg: #1a1a1a;
  --muted: #5d6764;
  --line: #e3e6e0;
  --accent: #46585c;
  --accent-fg: #ffffff;
  --danger: #b06170;
  --ground-0: #f2f3ef;
  --ground-1: #f7f8f4;
  --ground-2: #e9ece4;
  /* Far weaker than Scout's: --sage and --info are DARK in this theme, so the
     same mix percentages read as smudges on a near-white ground. */
  --ground-bloom:
    radial-gradient(58rem 40rem at 8% -12%, color-mix(in srgb, var(--sage) 5%, transparent), transparent 62%),
    radial-gradient(48rem 34rem at 92% 4%, color-mix(in srgb, var(--info) 4%, transparent), transparent 64%);
  --ground-gradient: var(--ground-bloom),
    linear-gradient(165deg, var(--ground-1) 0%, var(--ground-0) 45%, var(--ground-2) 100%);
  --sage: #46585c;
  --lime: #dcf0d7;
  --griege: #e3e6e0;
  --ink: #1a1a1a;
  /* Light glass is the inverse recipe: a dark tint rather than a white one,
     because a white fill over a white ground has nothing to show through. */
  --glass: rgba(255, 255, 255, 0.55);
  --glass-strong: rgba(255, 255, 255, 0.78);
  --glass-edge: rgba(26, 26, 26, 0.10);
  --glass-sheen: rgba(255, 255, 255, 0.85);
  --glass-backdrop: blur(20px) saturate(1.25);
  --border-soft: #ecefe9;
  --good: #3f8f66;
  --warn: #a8763a;
  --crit: #b06170;
  --info: #567b80;
  --shadow-soft: 0 1px 3px 0 rgba(26, 26, 26, 0.05);
  --shadow-card: 0 2px 10px -2px rgba(26, 26, 26, 0.08);
  --shadow-elevated: 0 10px 30px -14px rgba(26, 26, 26, 0.14);
  --shadow-glass: 0 8px 32px -8px rgba(26, 26, 26, 0.1);
}

html {
  background: var(--canvas);
  color: var(--fg);
  font-family: var(--font);
}

/* ── The glass material ──────────────────────────────────────────────────────
 *
 * What makes something read as glass is not the fill — it is the four things
 * together: a hairline edge, a bright inset line along the top (the "sheen",
 * where light catches the lip), a blurred backdrop so what is behind shows
 * through, and a soft drop shadow so it floats. Drop any one and it collapses
 * back into a flat panel with a border, which is what the intranet had.
 *
 * These are plain classes rather than Tailwind utilities so the vanilla pages —
 * which have no build step — can use exactly the same material as the SPAs.
 */
.glass,
.glass-raised {
  background: var(--glass);
  border: 0.5px solid var(--glass-edge);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  box-shadow: var(--shadow-glass);
}

/* For the surfaces that need to sit ON another glass surface — a dialog over a
 * board, a selected card in a column — where the same fill would disappear. */
.glass-raised {
  background: var(--glass-strong);
}

/* backdrop-filter is what costs GPU on a long scrolling board. Where a page has
 * hundreds of cards, `.glass-flat` gives the same look minus the blur; the fill
 * and sheen still carry it because the ground behind is near-uniform. */
.glass-flat {
  background: var(--glass);
  border: 0.5px solid var(--glass-edge);
  box-shadow: var(--shadow-glass);
}

@media (prefers-reduced-transparency: reduce) {
  .glass,
  .glass-raised,
  .glass-flat {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}