/* brand.css — Office Sentinel unified design system for the client cabinet.
   Source of truth: internal/services/web/templates/landing_v2.html (navy /
   security-blue family, system font stack, landing component shapes).

   Mechanism: the compiled Tailwind v4 build (tailwind.min.css) resolves every
   color utility through var(--color-*) custom properties declared inside
   cascade layers. This sheet loads after it, un-layered, and redefines those
   variables, so every existing utility class — including hover:, dark:, ring,
   gradient and opacity-modified variants — re-tints to the landing palette
   without touching a single template class. Rollback: remove this stylesheet
   link from templates/v2/layout.html.

   Mapping decisions:
   - slate/gray  -> one navy-tinted neutral scale (landing ink/slate/mist/line/haze)
   - cyan/sky/blue/indigo/teal -> one security-blue accent scale (landing accent)
   - emerald/green -> landing ok-green scale
   - rose -> red (single danger family)
   - amber/yellow/orange (warn) and purple/violet (categorical) stay distinct */

:root {
  /* Typography — landing font stacks */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono",
               Menlo, Consolas, monospace;

  /* Component shapes — landing radius language (buttons 10px, cards 14-16px) */
  --radius-lg: 0.625rem;
  --radius-xl: 0.875rem;

  /* Neutral scale — navy-tinted (landing ink #0f1729 / slate #33415c /
     mist #5b6b8c / line #dbe1ec / haze #f5f7fb / card #101a30 / paper #0b1120) */
  --color-slate-50:  #f5f7fb;
  --color-slate-100: #e9edf4;
  --color-slate-200: #dbe1ec;
  --color-slate-300: #c3ccdf;
  --color-slate-400: #8f9cba;
  --color-slate-500: #5b6b8c;
  --color-slate-600: #44557a;
  --color-slate-700: #33415c;
  --color-slate-800: #1b2540;
  --color-slate-900: #101a30;
  --color-slate-950: #0b1120;

  --color-gray-50:  #f5f7fb;
  --color-gray-100: #e9edf4;
  --color-gray-200: #dbe1ec;
  --color-gray-300: #c3ccdf;
  --color-gray-400: #8f9cba;
  --color-gray-500: #5b6b8c;
  --color-gray-600: #44557a;
  --color-gray-700: #33415c;
  --color-gray-800: #1b2540;
  --color-gray-900: #101a30;
  --color-gray-950: #0b1120;

  /* Accent — security blue (landing accent #2f5bd0, deep #1e3a8a,
     dark-theme accent #6c8cf0, soft #e8eefb / #182140) */
  --color-cyan-50:  #f1f5fd;
  --color-cyan-100: #e8eefb;
  --color-cyan-200: #bccbf9;
  --color-cyan-300: #93abf5;
  --color-cyan-400: #6c8cf0;
  --color-cyan-500: #4a6fdd;
  --color-cyan-600: #2f5bd0;
  --color-cyan-700: #1e3a8a;
  --color-cyan-800: #1c3376;
  --color-cyan-900: #182140;
  --color-cyan-950: #101a35;

  --color-sky-50:  #f1f5fd;
  --color-sky-100: #e8eefb;
  --color-sky-200: #bccbf9;
  --color-sky-300: #93abf5;
  --color-sky-400: #6c8cf0;
  --color-sky-500: #4a6fdd;
  --color-sky-600: #2f5bd0;
  --color-sky-700: #1e3a8a;
  --color-sky-800: #1c3376;
  --color-sky-900: #182140;
  --color-sky-950: #101a35;

  --color-blue-50:  #f1f5fd;
  --color-blue-100: #e8eefb;
  --color-blue-200: #bccbf9;
  --color-blue-300: #93abf5;
  --color-blue-400: #6c8cf0;
  --color-blue-500: #4a6fdd;
  --color-blue-600: #2f5bd0;
  --color-blue-700: #1e3a8a;
  --color-blue-800: #1c3376;
  --color-blue-900: #182140;
  --color-blue-950: #101a35;

  --color-indigo-50:  #f1f5fd;
  --color-indigo-100: #e8eefb;
  --color-indigo-200: #bccbf9;
  --color-indigo-300: #93abf5;
  --color-indigo-400: #6c8cf0;
  --color-indigo-500: #4a6fdd;
  --color-indigo-600: #2f5bd0;
  --color-indigo-700: #1e3a8a;
  --color-indigo-800: #1c3376;
  --color-indigo-900: #182140;
  --color-indigo-950: #101a35;

  --color-teal-50:  #f1f5fd;
  --color-teal-100: #e8eefb;
  --color-teal-200: #bccbf9;
  --color-teal-300: #93abf5;
  --color-teal-400: #6c8cf0;
  --color-teal-500: #4a6fdd;
  --color-teal-600: #2f5bd0;
  --color-teal-700: #1e3a8a;
  --color-teal-800: #1c3376;
  --color-teal-900: #182140;
  --color-teal-950: #101a35;

  /* Ok / success — landing green (#0f8a5f light, #3bc48b dark accents) */
  --color-emerald-50:  #ecf8f2;
  --color-emerald-100: #dcf2e8;
  --color-emerald-200: #bfe8d6;
  --color-emerald-300: #63d6a8;
  --color-emerald-400: #3bc48b;
  --color-emerald-500: #17a97c;
  --color-emerald-600: #0f8a5f;
  --color-emerald-700: #0d7450;
  --color-emerald-800: #0b5c40;
  --color-emerald-900: #0a4a34;
  --color-emerald-950: #073627;

  --color-green-50:  #ecf8f2;
  --color-green-100: #dcf2e8;
  --color-green-200: #bfe8d6;
  --color-green-300: #63d6a8;
  --color-green-400: #3bc48b;
  --color-green-500: #17a97c;
  --color-green-600: #0f8a5f;
  --color-green-700: #0d7450;
  --color-green-800: #0b5c40;
  --color-green-900: #0a4a34;
  --color-green-950: #073627;

  /* Danger — single red family (rose folded into red) */
  --color-rose-50:  #fef2f2;
  --color-rose-100: #fee2e2;
  --color-rose-200: #fecaca;
  --color-rose-300: #fca5a5;
  --color-rose-400: #f87171;
  --color-rose-500: #ef4444;
  --color-rose-600: #dc2626;
  --color-rose-700: #b91c1c;
  --color-rose-800: #991b1b;
  --color-rose-900: #7f1d1d;
  --color-rose-950: #450a0a;
}

/* Landing focus treatment for keyboard navigation. */
:focus-visible {
  outline: 2px solid var(--color-cyan-600);
  outline-offset: 2px;
}
.dark :focus-visible {
  outline-color: var(--color-cyan-400);
}

/* Application chrome — landing navy surfaces replacing the old hardcoded
   near-black hexes (#0D0F1A / #0F1117) that Tailwind compiled as literals. */
.os-app-bg {
  background-color: #f5f7fb;
}
.dark .os-app-bg {
  background-color: #0b1120;
}
.os-sidebar {
  background-color: #0f1729;
}
.dark .os-sidebar {
  background-color: #0d1526;
  border-right: 1px solid #1b2540;
}
.os-auth-bg {
  background-color: #0b1120;
  background-image: radial-gradient(120% 90% at 80% -10%, #182140 0%, transparent 55%);
}

/* Headline rhythm from the landing (tight leading, slight negative tracking). */
h1, h2, h3 {
  letter-spacing: -0.02em;
}