/*
 * harbour dashboard — WSI default identity tokens
 *
 * The dashboard ships with this identity. Tenants override individual
 * variables via tokens-<tenant_id>.css; absent any override, the
 * dashboard renders WSI's identity unchanged.
 *
 * Per the dashboard build (decided 2026-05-19): WSI default accent is
 * #3fb4d7. Per-tenant overrides change skin only, never structure.
 * The logo slot renders nothing when --logo-url is absent — no
 * placeholder graphic, no broken-image fallback.
 *
 * §7.1 register: subtraction over addition, breathing room, quiet
 * status as small pills, one accent used sparingly, soft rounded
 * corners, generous line-height, hover states that lift gently.
 *
 * Typography: Poppins (Google Fonts, free), slothui-style clean
 * modern bright.
 */

:root {
  /* ---- colour ---- */
  /* Page background: cool light grey (recoloured from warm beige
     2026-05-27). The body paints a subtle vertical gradient between
     the two endpoint tokens below; --colour-bg is the solid base
     (= the top stop) used by the header and any flat page-coloured
     surface, so they join the gradient's top seamlessly. Endpoints are
     tokens so the gradient tunes without touching the body rule. */
  --colour-bg: #e6ecf1;
  --colour-bg-grad-top: #e6ecf1;
  --colour-bg-grad-bottom: #eef2f6;
  /* Surface: white cards lift cleanly off the cool grey page. */
  --colour-surface: #ffffff;
  /* Subtle surface variant for nav panels, table headers, etc. Cool
     grey a step lighter than the page, a step below the white cards. */
  --colour-surface-soft: #f3f6f9;
  /* Ink: near-black. */
  --colour-ink: #1a1a1a;
  --colour-ink-strong: #0d0d0d;
  --colour-ink-soft: #5a5a5a;
  --colour-ink-muted: #8a8a8a;
  /* Lines: hairline dividers, never loud. Cool grey to match the
     recoloured register. */
  --colour-line: #d6dee6;
  --colour-line-soft: #e4eaf0;

  /* WSI accent — the single colour used sparingly. */
  --accent: #3fb4d7;
  --accent-strong: #2a8fad;
  --accent-tint: #e6f5fa;
  --accent-ink: #ffffff; /* readable text on accent */

  /* Status pill palette — quiet, never loud. Each pill uses a soft
     background tint and a darker text colour from the same hue. */
  --pill-neutral-bg: #e3e8ee;
  --pill-neutral-ink: #6a6a6a;
  --pill-active-bg: #e8f1fc;
  --pill-active-ink: #2563a8;
  --pill-success-bg: #eaf2e7;
  --pill-success-ink: #4d6b3c;
  --pill-awaiting-bg: #faefda;
  --pill-awaiting-ink: #8a6418;
  --pill-failure-bg: #f4e4dd;
  --pill-failure-ink: #92422a;
  --pill-holding-bg: #ece9f2;
  --pill-holding-ink: #5a4f7a;

  /* ---- typography ---- */
  --brand-display-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --brand-body-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Poppins", ui-monospace, "SF Mono", Menlo, monospace;

  --size-xs: 0.6875rem;   /* 11px */
  --size-sm: 0.8125rem;   /* 13px */
  --size-base: 0.9375rem; /* 15px */
  --size-md: 1.0625rem;   /* 17px */
  --size-lg: 1.25rem;     /* 20px */
  --size-xl: 1.625rem;    /* 26px */
  --size-2xl: 2rem;       /* 32px */
  --size-3xl: 2.625rem;   /* 42px */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-base: 1.55;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.015em;
  --tracking-base: 0;
  --tracking-wide: 0.04em;

  /* ---- spacing (4px scale) ---- */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 2.75rem;  /* 44px */
  --space-8: 3.5rem;   /* 56px */
  --space-9: 4.5rem;   /* 72px */

  /* ---- radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---- shadow ---- */
  /* Close shadows, lift-on-hover register; nothing floats. */
  --shadow-xs: 0 1px 2px rgba(20, 20, 20, 0.04);
  --shadow-sm: 0 1px 3px rgba(20, 20, 20, 0.06), 0 1px 2px rgba(20, 20, 20, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 20, 20, 0.06), 0 1px 3px rgba(20, 20, 20, 0.04);
  --shadow-lg: 0 12px 32px rgba(20, 20, 20, 0.08);

  /* ---- scrim ---- */
  /* Overlay-modal backdrop (CP5). Same ink base as the shadows so the
     dimming reads as the same surface vocabulary; opacity tuned for a
     calm "modal open" register, not a heavy black-out. First modal
     primitive — every future modal inherits this scrim. */
  --colour-scrim: rgba(20, 20, 20, 0.32);
  /* The scrim's companion blur (2026-06-12): every full-screen overlay
     pairs the dim with this backdrop blur, so "a modal is open" reads
     as one treatment everywhere — Emma, the schema editor, the
     download list, the set-aside confirm. Subtle by intent: enough to
     quiet the board behind, never frosted glass. */
  --scrim-blur: 4px;

  /* ---- motion ---- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- layout ---- */
  --rail-width: 248px;
  --header-height: 64px;
  --content-max-width: 1480px;

  /* ---- per-tenant branding (default empty values) ---- */
  /* Tenants set --logo-url to url(...) and the layout will render
     the logo. When unset, the slot renders nothing — clean empty
     space, never a placeholder. */
  --logo-url: none;

  /* ---- S5 status vocabulary (decided 2026-05-19, dashboard-build S5) ----
     The Enquiries-table Status column dispatches between active states
     (progress bar + label) and terminal states (tag). Hex values are
     locked by the S5 brief §4 — non-negotiable, not a stylistic call.
     Green is reserved EXCLUSIVELY for Won; the exclusivity is what
     makes the success signal load-bearing.

     Each active state carries the locked fill colour plus a derived
     soft track tint (the bar's unfilled background); each terminal
     state carries background + ink as the brief specifies. */
  --status-awaiting-fill: #BA7517;   /* amber */
  --status-awaiting-track: #f7ecda;
  --status-priced-fill: #185FA5;     /* deep blue */
  --status-priced-track: #dfeaf6;
  --status-sent-fill: #378ADD;       /* blue */
  --status-sent-track: #e1eef9;
  --status-default-fill: var(--colour-ink-muted);
  --status-default-track: var(--colour-line);

  --status-won-bg: #EAF3DE;
  --status-won-ink: #27500A;
  --status-lost-bg: #FCEBEB;
  --status-lost-ink: #791F1F;

  /* Priority star widget (muted neutral grey per brief §5 — never
     coloured, so the priority signal stays visually separate from
     the status colour vocabulary). */
  --priority-star-empty: #bcc4cd;   /* slightly darker than line-soft for visibility on the cool grey bg */
  --priority-star-filled: #4a4a4a;
  --priority-star-preview: #8a8a8a; /* hover-preview tone */

  /* Category-mix donut (decided 2026-05-21, visually rebuilt
     2026-05-22). Each slice is a SHADE of --accent rather than a
     distinct hue: the route emits a color-mix(in srgb, var(--accent),
     white N%) expression per slice, evenly spread across the slice
     count. Tenant accent override re-shades the whole donut for free.
     The named per-category tokens from the first cut (--mix-louvre,
     --mix-acoustic, etc.) were dropped on the rebuild — single hue,
     monochrome gradient by slice size is the visual register Marcus
     locked in. Only the underlying ring track remains as a token
     since it's a "no slice here" tone, not a slice colour. */
  --mix-ring-track: #e4eaf0;        /* same as line-soft, base ring */
}

/* Subtle paper-grain texture over a near-flat vertical gradient (page
   register, gradient added 2026-05-27). The grain stays the TOP layer,
   almost imperceptible workshop character; the gradient sits beneath
   it, cool grey at the top fading a touch lighter at the bottom (delta
   felt, not seen). Page-level, normal flow (not fixed). Both the grain
   SVG and the gradient are inline so there is no extra request. */
body {
  background-color: var(--colour-bg);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.025 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>"),
    linear-gradient(180deg, var(--colour-bg-grad-top) 0%, var(--colour-bg-grad-bottom) 100%);
}