/* =============================================================================
   NSVR DESIGN TOKENS
   Visual reference: WorkMgmt_Platform/web (React + Tailwind, Kernex red brand).
   Single source of truth for colors, typography, spacing, radius, shadow.
   Loaded from base_admin.html and base_employee.html before any per-page CSS.
   ============================================================================= */

:root {
  /* ── Brand (Fincorp brass / gold — the firm's identity colour) ──── */
  --brand-50:  #faf4e8;
  --brand-100: #f3e6c9;
  --brand-200: #e8d1a1;
  --brand-300: #dab873;
  --brand-400: #c9a04c;
  --brand-500: #b8842f;
  --brand-600: #a5762a;   /* primary */
  --brand-700: #8a611f;
  --brand-800: #6f4d18;
  --brand-900: #5a3f16;

  /* --primary is the ACTIVE accent. It defaults to the brand (brass) and is
     re-tinted per portal below via [data-role]: Admin=emerald, Partner=gold,
     Employee=indigo. Everything else in the app keeps its exact structure. */
  --primary:        var(--brand-600);
  --primary-hover:  var(--brand-700);
  --primary-light:  var(--brand-50);
  --primary-rgb:    165, 118, 42;
  --primary-gradient: linear-gradient(135deg, #b8842f 0%, #8a611f 100%);

  /* Fixed brand tokens (never re-tinted) — logo lockups, the login gateway. */
  --brand:      #b0802f;
  --brand-ink:  #8a611f;
  --brand-navy: #12253d;   /* deep navy used for hero / brand panels */

  /* ── Neutral (slate / "ink") ────────────────────────────────────── */
  --ink-50:  #f8fafc;
  --ink-100: #f1f5f9;
  --ink-200: #e2e8f0;
  --ink-300: #cbd5e1;
  --ink-400: #94a3b8;
  --ink-500: #64748b;
  --ink-600: #475569;
  --ink-700: #334155;
  --ink-800: #1e293b;
  --ink-900: #0f172a;

  /* ── Semantic surfaces & text (light mode) ──────────────────────── */
  --bg-body:     #f4f6fa;
  --bg-card:     #ffffff;
  --bg-sidebar:  #ffffff;
  --bg-elevated: #ffffff;
  --bg-subtle:   var(--ink-50);

  --text-main:   var(--ink-800);
  --text-strong: var(--ink-900);
  --text-dim:    var(--ink-500);   /* WCAG AA on --bg-body — never use --ink-400 for body */
  --text-muted:  var(--ink-400);   /* labels / captions only, must be >=18px */
  --text-inverse:#ffffff;

  --border:        var(--ink-200);
  --border-light:  var(--ink-100);
  --border-strong: var(--ink-300);

  /* ── Semantic status colors ─────────────────────────────────────── */
  --success:       #16a34a;
  --success-light: #f0fdf4;
  --success-border:#bbf7d0;
  --warning:       #f59e0b;
  --warning-light: #fffbeb;
  --warning-border:#fde68a;
  --danger:        #dc2626;
  --danger-light:  #fef2f2;
  --danger-border: #fecaca;
  --info:          #0ea5e9;
  --info-light:    #f0f9ff;
  --info-border:   #bae6fd;

  /* ── Spacing scale (4px base) ───────────────────────────────────── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */

  /* ── Radius scale ───────────────────────────────────────────────── */
  --radius-sm:    0.5rem;     /*  8px */
  --radius:       0.75rem;    /* 12px — buttons, inputs */
  --radius-lg:    1rem;       /* 16px — cards */
  --radius-xl:    1.25rem;    /* 20px */
  --radius-2xl:   1.5rem;     /* 24px — modal panels */
  --radius-full:  9999px;

  /* ── Shadow scale ───────────────────────────────────────────────── */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow:       0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
  --shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --shadow-lg:    0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --shadow-card:        0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
  --shadow-card-hover:  0 20px 40px -12px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.03);
  --shadow-float:       0 8px 30px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-primary:     0 4px 14px rgba(var(--primary-rgb), 0.25);
  --shadow-primary-lg:  0 6px 20px rgba(var(--primary-rgb), 0.30);
  --shadow-inner-sm:    inset 0 1px 2px rgba(0, 0, 0, 0.06);

  /* ── Layout dimensions ──────────────────────────────────────────── */
  --sidebar-width:           260px;
  --sidebar-width-collapsed: 72px;
  --header-height:           64px;

  /* ── Typography ─────────────────────────────────────────────────── */
  --font-sans: 'Outfit', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, 'Courier New', monospace;

  --font-base:    14px;
  --font-xs:      11px;
  --font-sm:      12px;
  --font-md:      13px;
  --font-lg:      15px;
  --font-xl:      18px;
  --font-2xl:     20px;
  --font-3xl:     24px;

  /* ── Motion ─────────────────────────────────────────────────────── */
  --transition:        200ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast:   150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* =============================================================================
   DARK MODE — opt-in only via [data-theme="dark"]. We do NOT auto-switch on
   prefers-color-scheme so the UI stays light regardless of the user's OS
   theme (staff reported the dark variant being hard to read on some screens).
   ============================================================================= */

[data-theme="dark"] {
  --bg-body:     #080e1a;
  --bg-card:     #0f172a;
  --bg-sidebar:  #0b1220;
  --bg-elevated: #111827;
  --bg-subtle:   #1e293b;

  --text-main:   #e2e8f0;
  --text-strong: #f8fafc;
  --text-dim:    #94a3b8;
  --text-muted:  #64748b;
  --text-inverse:#0f172a;

  --border:        #1e293b;
  --border-light:  #0f172a;
  --border-strong: #334155;
}

/* =============================================================================
   PER-ROLE ACCENTS — one design language, tinted per portal. The shell,
   layout, tabs and structure are identical; only --primary changes so each
   portal reads at a glance. Set via data-role on <html> in each base template.
     Admin    → emerald   Partner → gold/brass   Employee → indigo
   ============================================================================= */
html[data-role="admin"] {
  --primary: #0f9d6b;  --primary-hover: #0b7d55;  --primary-light: #e7f6ef;
  --primary-rgb: 15, 157, 107;
  --primary-gradient: linear-gradient(135deg, #12a874 0%, #0b7d55 100%);
}
html[data-role="partner"] {
  --primary: #b8842f;  --primary-hover: #8a611f;  --primary-light: #f7f0e1;
  --primary-rgb: 184, 132, 47;
  --primary-gradient: linear-gradient(135deg, #c08a2e 0%, #8a611f 100%);
}
html[data-role="employee"] {
  --primary: #5a63d6;  --primary-hover: #454dc0;  --primary-light: #eef0fb;
  --primary-rgb: 90, 99, 214;
  --primary-gradient: linear-gradient(135deg, #5a63d6 0%, #454dc0 100%);
}
/* Dark-mode role accents — brighter so they stay legible on the dark ground. */
[data-theme="dark"][data-role="admin"]    { --primary: #2fbf8c; --primary-hover: #46cf9d; --primary-rgb: 47, 191, 140;  --primary-light: #0f2a20; }
[data-theme="dark"][data-role="partner"]  { --primary: #d9ab5b; --primary-hover: #e7c184; --primary-rgb: 217, 171, 91;  --primary-light: #241d0f; }
[data-theme="dark"]html[data-role="employee"] { --primary: #7c85e8; --primary-hover: #9aa1ee; --primary-rgb: 124, 133, 232; --primary-light: #16182e; }

/* =============================================================================
   GLOBAL BASE — typography only. Layout primitives stay in base_*.html for now
   to keep the diff small; component-level overrides happen in components.css.
   ============================================================================= */
html {
  font-family: var(--font-sans);
  font-size:   var(--font-base);
}

body {
  font-family: var(--font-sans);
  color:       var(--text-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Selection — Kernex red tint */
::selection      { background: rgba(var(--primary-rgb), 0.12); color: inherit; }
[data-theme="dark"] ::selection { background: rgba(var(--primary-rgb), 0.25); }

/* Thin elegant scrollbars */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb        { background: #d4d8e0; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover  { background: #b0b8c4; }
::-webkit-scrollbar-track        { background: transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb       { background: #2d3748; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4a5568; }

/* Focus ring — keyboard only. Replaces ad-hoc outline:none across the codebase. */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* :invalid styling for form validation (consumed by form-validate.js in stage 5) */
.input.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10);
}
.field-error {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--font-sm);
  color: var(--danger);
  font-weight: 500;
}