/* ============================================================================
   pk-tokens.css — PipeKloud web brand tokens (SINGLE SOURCE OF TRUTH for color)
   See DOCS/UI_STRATEGY.md §1. Loaded AFTER MudBlazor's CSS, BEFORE pk-components.css.
   Direction: "Precision Instrument" — navy↘azure brand gradient (from the logo) + a
   deliberate AMBER signal accent (achievement / goal-met / active / "you"). Locked 2026-06-10.
   When the palette changes, update THIS file + Shared/ThemeContainer.cs (MudBlazor) +
   the MAUI Resources/Styles/Colors.xaml together.
   ============================================================================ */

:root {
  /* Brand — from the logo gradient (bright sky → deep navy) */
  --pk-azure:      #2E9BE6;
  --pk-blue:       #1565C0;   /* primary */
  --pk-navy:       #0E3A6B;
  --pk-navy-deep:  #0A2A4E;   /* app bar base */
  --pk-grad: linear-gradient(135deg, var(--pk-azure) 0%, var(--pk-blue) 45%, var(--pk-navy) 100%);

  /* Signal accent — AMBER. Reserved: achievement / goal-met / active filter / "you". */
  --pk-accent:       #E0913A;
  --pk-accent-deep:  #B26C18;
  --pk-accent-tint:  #FAEEDB;

  /* Surfaces — a hierarchy, not flat gray */
  --pk-canvas:     #EEF3F8;
  --pk-canvas-2:   #E4ECF4;
  --pk-surface:    #FFFFFF;
  --pk-surface-2:  #F7FAFD;
  --pk-line:       #D8E2EC;
  --pk-line-soft:  #E9EFF5;

  /* Text */
  --pk-ink:        #122236;
  --pk-ink-2:      #4C6075;
  --pk-ink-3:      #7E91A4;

  /* Status */
  --pk-success:#1E8E5A; --pk-success-tint:#E5F4EC;
  --pk-warning:#C9700C; --pk-warning-tint:#FBEEDD;
  --pk-danger:#C5283D;  --pk-danger-tint:#FBE7EA;

  /* Shape / depth */
  --pk-r-sm:8px; --pk-r:12px; --pk-r-lg:16px;
  --pk-shadow-1:0 1px 2px rgba(14,58,107,.06), 0 1px 3px rgba(14,58,107,.10);
  --pk-shadow-2:0 4px 10px rgba(14,58,107,.08), 0 10px 28px rgba(14,58,107,.10);
  --pk-shadow-accent:0 6px 18px rgba(224,145,58,.22);

  /* Type — Sora (display), Archivo (UI/body), Spline Sans Mono (IDs). Locked 2026-06-10. */
  --pk-font-display:'Sora','Archivo','Segoe UI',system-ui,sans-serif;
  --pk-font-ui:'Archivo','Segoe UI',system-ui,sans-serif;
  --pk-font-mono:'Spline Sans Mono',ui-monospace,monospace;
}

/* Dark theme — applied when MudBlazor sets the dark palette (we mirror with a body class). */
.pk-dark {
  --pk-canvas:#0B1622; --pk-canvas-2:#0F1E2E; --pk-surface:#15273A; --pk-surface-2:#1A2F45;
  --pk-line:#22384F; --pk-line-soft:#1C2E42;
  --pk-ink:#E7EFF7; --pk-ink-2:#A7BACE; --pk-ink-3:#6E8398;
  --pk-success-tint:#10231A; --pk-warning-tint:#241A0D; --pk-danger-tint:#261216;
  --pk-shadow-1:0 1px 3px rgba(0,0,0,.4); --pk-shadow-2:0 10px 30px rgba(0,0,0,.5);
}

/* Apply the brand UI font app-wide (MudBlazor uses Roboto by default). */
body, .mud-typography, .mud-input, .mud-button-root { font-family: var(--pk-font-ui); }
/* Tabular numerals everywhere so currency columns align. */
body { font-feature-settings:"tnum" 1; }