/* === SEARCH: oui_design_tokens_phase0 START (2026-08-11) ====================
 * Oui design tokens — UI Modernization Phase 0.
 *
 * Every value below is EXTRACTED from what the app already renders (dot.css,
 * vault.css, base.html-era styles), so loading this file changes nothing
 * visually. It exists so that decisions ("whatever is decided, we need it
 * across both dashboards") become one-line variable edits instead of two
 * parallel restylings.
 *
 * Rules (see docs/UI_MODERNIZATION_RULES.md):
 * - NEW UI code must reference these tokens instead of hard-coding values.
 * - EXISTING code migrates to tokens when a screen is touched (ratchet),
 *   never in a big-bang sweep.
 * - Loaded by base.html (admin/vault surfaces) AND the standalone DOT
 *   dashboard templates, always via static_v().
 * ========================================================================== */

:root {
  /* --- Brand + semantic color ------------------------------------------- */
  --oui-accent:        #0a66ff;                 /* links, focus rings, active */
  --oui-accent-soft:   rgba(10, 102, 255, .08); /* hover/selected fills      */
  /* === SEARCH: oui_link_token START (2026-09-07) ===
     --oui-accent is documented above as the link colour, but the dark block
     below never redefined it, so a link on a dark DOT surface fell through to
     the browser's own #0000EE: measured 1.90:1 against --oui-surface-2
     (#0f172a), where WCAG AA wants 4.5:1 for body text. Even --oui-accent
     itself only reaches ~3.7:1 there, so the fix is a role token with a value
     per theme rather than reusing accent. Light keeps accent so nothing that
     already reads well changes; dark uses the same #60a5fa the dot dashboard
     already uses for its dark action-group borders (dashboard.css ~912), at
     6.97:1. Focus rings and active states still follow --oui-accent -- this
     token is only for text a person is meant to read and click. === */
  --oui-link:          var(--oui-accent);      /* link TEXT; themed below    */
  --oui-on-accent:     #ffffff;                 /* text on accent surfaces    */
  --oui-danger:        #b00020;
  --oui-warning:       #9a3412;                 /* hint/warning text          */
  --oui-success:       #10b981;
  --oui-info:          #3b82f6;

  /* --- Text + surfaces (light) ------------------------------------------ */
  --oui-text:          #111111;
  --oui-text-2:        #1f2937;                 /* secondary headings/body    */
  --oui-muted:         #6b7280;
  --oui-surface:       #ffffff;
  --oui-surface-veil:  rgba(255, 255, 255, .94); /* translucent cards (vault) */
  --oui-border:        rgba(0, 0, 0, .14);
  --oui-border-soft:   rgba(0, 0, 0, .06);

  /* --- Radii (de-facto scale: 6 / 10 / 12 / 14 / pill) ------------------- */
  --oui-radius-sm:     6px;
  --oui-radius-md:     10px;
  --oui-radius-lg:     12px;
  --oui-radius-xl:     14px;
  --oui-radius-pill:   999px;

  /* --- Shadows ----------------------------------------------------------- */
  --oui-shadow-sm:     0 1px 3px rgba(0, 0, 0, .10);
  --oui-shadow-md:     0 6px 16px rgba(0, 0, 0, .14);
  --oui-shadow-lg:     0 12px 32px rgba(0, 0, 0, .18); /* dropdown panels    */

  /* --- Spacing scale ----------------------------------------------------- */
  --oui-space-1:       4px;
  --oui-space-2:       8px;
  --oui-space-3:       12px;
  --oui-space-4:       16px;
  --oui-space-5:       24px;
  --oui-space-6:       32px;

  /* --- Touch + motion ---------------------------------------------------- */
  --oui-tap-target:    44px;                    /* min tap size (vault nav)  */
  --oui-transition:    .15s ease;

  /* --- Z-index ladder (documented from live usage — do NOT freelance) ---- */
  --oui-z-nav:         1000;                    /* sticky topbars             */
  --oui-z-panel:       3000;                    /* dropdown panels (switcher) */
  --oui-z-overlay:     6500;                    /* share menus, above sticky  */
  --oui-z-modal:       7000;                    /* SweetAlert2                */
}

/* Dark theme — DOT surfaces toggle body.dot.theme-dark; base.html pages can
 * carry theme-dark without .dot (brand-hosted pages), so both are covered.
 * (Values extracted from the existing theme-dark rules in dot.css.) */
body.theme-dark,
body.dot.theme-dark {
  --oui-text:          #e5e7eb;
  --oui-text-2:        #cbd5e1;
  --oui-muted:         #9aa7bd;
  --oui-link:          #60a5fa;      /* SEARCH: oui_link_token (2026-09-07) */
  --oui-surface:       #0b1220;
  --oui-surface-veil:  rgba(11, 18, 32, .92);
  --oui-border:        #334155;
  --oui-border-soft:   rgba(255, 255, 255, .08);
}
/* === SEARCH: oui_design_tokens_phase0 END ================================ */