/* ============================================================
   IPTunnel Admin — Network Control Plane tokens
   Source of truth: DESIGN.md. Keep this file and DESIGN.md in sync.
   Reference blend: Relayline control-room structure with the
   Internetshub typography and a restrained brand signature.
   ============================================================ */
:root {
  /* -- surfaces: editorial workspace; sidebar follows the theme -- */
  --canvas: #f4f4f2;
  --surface-sidebar: #f7f7f5;      /* light rail in light mode */
  --side-border: var(--border);
  --side-foot-bg: #f1f1ee;
  --surface: #f4f4f2;
  --surface-raised: #ffffff;
  --surface-hover: #e9e8e2;
  --surface-selected: #def3ea;
  --card-bg: #ffffff;
  --input-bg: #ffffff;
  --band-bg: #101319;          /* dark signal band on the light workspace */
  --band-ink: #7d8590;
  --thead-bg: transparent;
  --placeholder: #969b9f;
  --caret: #7d8590;
  --select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237d8590' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --btn-primary-bg: #171a1f;
  --btn-primary-ink: #ffffff;
  --btn-primary-hover: #242830;
  --btn-wash: #e7e5df;
  --input-hover-border: #9aa1ac;
  --scrim: rgba(255, 255, 255, 0.94);

  /* -- borders -- */
  --border: #d8d5cd;
  --border-strong: #b9b5ab;

  /* -- text -- */
  --text: #171a1f;
  --text-2: #555d68;
  --text-3: #7b838e;

  /* -- brand ramp (Internetshub purple) -- */
  --purple: #8203b5;
  --purple-deep: #4c0273;
  --purple-ink: #24112d;
  --purple-soft: #f3e6fb;          /* light-theme soft; on dark use --accent-soft */
  --accent: #8203b5;               /* brand/action only */
  --accent-bright: #8203b5;
  --accent-soft: #f1e4f7;
  --accent-line: rgba(166, 61, 204, 0.35);
  /* legacy aliases (component CSS reads these) */
  --brand: var(--purple);
  --brand-hover: #a63dcc;
  --brand-press: var(--purple-deep);
  --brand-bright: var(--accent-bright);
  --brand-surface: rgba(130, 3, 181, 0.14);
  --brand-border: var(--accent-line);
  --brand-gradient: linear-gradient(135deg, #4c0273, #8203b5);

  /* -- status (house dark pills: surface/text pairs) -- */
  --success: #187a5c; --success-surface: #e2f5ed; --success-border: #acdcca;
  --warning: #94640c; --warning-surface: #fbf0d5; --warning-border: #e9cf91;
  --danger: #b23b4d;  --danger-surface: #fbe8eb;  --danger-border: #e8b4bc;
  --info: #286b9c;    --info-surface: #e4f0f8;    --info-border: #b5d3e6;
  --mint: #59d7ad;

  /* -- feedback -- */
  --focus-ring: 0 0 0 3px rgba(24, 122, 92, 0.18);

  /* -- typography (house: Figtree / Montserrat / IBM Plex Mono) -- */
  --font-ui: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Montserrat", "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 20px;
  --text-xl: 28px;

  /* -- spacing 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;

  /* -- radius (house: 8 controls / 14 panels; asymmetric signature) -- */
  --r-sm: 6px;
  --r: 8px;
  --r-mark: 9px 9px 9px 3px;       /* house motif: one sharp corner */
  --r-band: 20px 20px 20px 6px;

  /* -- control heights -- */
  --h-ctrl-sm: 30px;
  --h-ctrl: 36px;
  --h-ctrl-lg: 44px;

  /* -- layout -- */
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 72px;
  --rail-w: 68px;
  --content-max: 1600px;
  --topbar-h: 62px;

  /* -- elevation (overlays only; tinted house shadow) -- */
  --shadow-overlay: 0 18px 50px rgba(24, 29, 35, 0.18);
  --shadow-panel: none;

  /* -- z-index scale -- */
  --z-sticky: 100; --z-bulkbar: 300; --z-ribbon: 90;
  --z-drawer-backdrop: 400; --z-drawer: 410;
  --z-dialog-backdrop: 500; --z-dialog: 510; --z-toast: 600;

  /* -- motion (house: .18–.22s; ops: 130ms tone) -- */
  --t-fast: 140ms;
  --t-med: 200ms;
  --ease: cubic-bezier(0.2, 0.6, 0.25, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  color-scheme: light;
}

/* ============================================================
   Dark theme ("carbon") — html[data-theme="dark"], set before
   paint by the inline theme script; persisted in localStorage.
   ============================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --canvas: #0b0c0e;
  --surface-sidebar: #101216;
  --side-border: rgba(255, 255, 255, 0.08);
  --side-foot-bg: #0c0f14;
  --surface: #0f1013;
  --surface-raised: #17191d;
  --surface-hover: #1d2026;
  --surface-selected: #1c2b26;
  --card-bg: #101114;
  --input-bg: #0c0d10;
  --band-bg: #0d0f12;
  --band-ink: #6f7681;
  --thead-bg: transparent;
  --placeholder: #6f7681;
  --caret: #8b93a0;
  --select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b93a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --btn-primary-bg: #f2f3f0;
  --btn-primary-ink: #0b0c0e;
  --btn-primary-hover: #ffffff;
  --btn-wash: #1d2026;
  --input-hover-border: #454c57;
  --scrim: rgba(11, 12, 14, 0.92);

  --border: #22252b;
  --border-strong: #363c45;

  --text: #eceff2;
  --text-2: #9aa3ae;
  --text-3: #6f7681;

  --success: #5cc9a7; --success-surface: #14231e; --success-border: #234438;
  --warning: #e0aa5e; --warning-surface: #2a2315; --warning-border: #4b3d20;
  --danger: #ef8585;  --danger-surface: #2b171b;  --danger-border: #4e2a30;
  --info: #6fb0e0;    --info-surface: #16222e;    --info-border: #28425a;
  --mint: #59d7ad;

  --accent-soft: #231a2b;
  --brand-surface: rgba(166, 61, 204, 0.16);

  --shadow-overlay: 0 18px 50px rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 1ms; }
}