/* charliehub-ui-kit — Deep Harbour design tokens (Ar Mor brand system).
   Source of truth: Charliehub Brand System Draft v2 + Deep Harbour spec.
   Ticket: sdwan-v4.5 / WS-E / E1 (extract shared CharlieHub UI kit).

   ── Origin ───────────────────────────────────────────────────────────────
   Lifted verbatim from vpn-spa-v2/app/static/css/theme.css (the only mature
   Deep Harbour implementation at extraction time). This file is now the
   SINGLE WRITER for Deep Harbour tokens — a brand-color or spacing change
   happens here once, not per-consumer. Do not fork these values back into
   an app-local stylesheet; extend via new semantic tokens in this file, or
   via app-local component CSS that only *references* these tokens.

   ── Architecture ────────────────────────────────────────────────────────
   Two-layer tokens: PRIMITIVES (palette) feed SEMANTIC TOKENS (roles).
   Components reference semantic tokens only — so a `surface-noz` context
   can re-theme them automatically without touching component CSS.

   ── Doctrine ────────────────────────────────────────────────────────────
   • Flat. No gradients, glows, blurred decoration.
   • Mor Gwer = action. Buttons, primary links, focus on brand.
   • Maen Roz = accent ONLY. Focus rings, dividers, active-nav bar, small
     badges. Never a panel background. Never body text on light (use rz-700).
   • Noz = the dark surface. Hero panels, immersive screens.

   ── Fonts — NOT vendored here ───────────────────────────────────────────
   Only font-FAMILY tokens (--font-sans/--font-display/--font-mono) live in
   this kit. Each consuming app self-hosts its own webfont files (woff2,
   Apache 2.0 / SIL OFL 1.1) under its own /static/fonts/ and declares its
   own @font-face rules pointing at its own static path — @font-face `src`
   URLs are not portable across apps with independent static mounts, and
   this kit intentionally does not vendor binary font assets. See this
   kit's README.md "Known gaps" section.
*/

:root {
  /* ── Primitives — Ar Mor palette ─────────────────────────────────────── */
  --mg-900:#0D3B33; --mg-700:#15564B; --mg-500:#1E7D6E; --mg-300:#54AD9D; --mg-200:#9BD2C8; --mg-50:#E3F1EE;
  --rz-900:#6B3A34; --rz-700:#97564C; --rz-500:#C5837A; --rz-300:#DBAAA2; --rz-200:#ECCEC8; --rz-50:#F8EBE8;
  --nz-900:#11212E; --nz-700:#1A3340; --nz-500:#2A4C5A; --nz-300:#5E7E8C; --nz-200:#9DB2BC; --nz-50:#E6ECEF;
  --ink:#11181C; --slate:#1F3A4A; --storm:#556970; --mist:#8A9094;
  --cloud:#E5E7EB; --sand:#F5F1EB; --pearl:#F8F9FA; --white:#FFFFFF;

  /* ── Connection-state primitives (functional only — never decoration) ─ */
  --state-protected:#1E9E7C;
  --state-connecting:#E08A1E;
  --state-exposed:#D63D2E;

  /* ── Semantic tokens — light surfaces (default) ──────────────────────── */
  --bg-page:        var(--pearl);
  --bg-surface:     var(--white);
  --bg-sunken:      #EFEFEC;
  --border:         var(--cloud);
  --border-hover:   #D4D8DC;

  --text-strong:    var(--ink);
  --text:           var(--slate);
  --text-muted:     var(--storm);
  --text-faint:     var(--mist);

  --action:         var(--mg-500);
  --action-hover:   var(--mg-700);
  --on-action:      var(--white);

  --link:           var(--mg-700);

  --accent:         var(--rz-500);
  --accent-text:    var(--rz-700);
  --focus-border:   var(--rz-500);
  --focus-ring:     rgba(197, 131, 122, 0.28);

  /* ── State chips: pale bg + dark fg (AA-safe) ────────────────────────── */
  --protected-bg:#E4F4EE; --protected-fg:#0E5C46;
  --connecting-bg:#FBEEDA; --connecting-fg:#7A4B12;
  --exposed-bg:#FBE4E1;   --exposed-fg:#8A271C;

  /* Destructive-action friendly aliases — same primitives as exposed,
     never a separate red. */
  --danger:        var(--state-exposed);
  --danger-hover:  #B5331F;
  --danger-bg:     var(--exposed-bg);

  /* ── Geometry ────────────────────────────────────────────────────────── */
  --radius-input:   8px;
  --radius-card:    12px;
  --radius-pill:    999px;
  --shadow-card:    0 1px 2px rgba(17, 24, 28, 0.04), 0 4px 12px rgba(17, 24, 28, 0.06);

  /* ── Type ────────────────────────────────────────────────────────────── */
  --font-sans:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display:   "IBM Plex Sans", "Inter", -apple-system, sans-serif;
  --font-mono:      "IBM Plex Mono", "SF Mono", Menlo, "Cascadia Mono", monospace;
}

/* ── Noz dark surface — apply on hero panels / immersive screens ─────────
   Add class `surface-noz` OR `data-surface="noz"` to a container, and every
   component inside auto-rethemes via the semantic tokens. */
.surface-noz, [data-surface="noz"] {
  --bg-page:        var(--nz-900);
  --bg-surface:     var(--nz-700);
  --bg-sunken:      #0C1922;
  --border:         var(--nz-500);
  --border-hover:   #36586A;

  --text-strong:    var(--pearl);
  --text:           var(--nz-200);
  --text-muted:     var(--nz-300);
  --text-faint:     var(--nz-500);

  --action:         var(--mg-500);
  --action-hover:   var(--mg-300);
  --on-action:      var(--white);

  --link:           var(--mg-300);
  --accent:         var(--rz-300);
}