/* =====================================================================
   MySmartInvoice 2 – DESIGN TOKENS (Lumen look: slate neutrals, soft cards, quiet sidebar; brand blue accent, Lumen "iris" preset). Change the look here only (docs/DESIGN-SYSTEM.md).
   Source: "MySmartInvoice – Branding & UI Design System" (blue / turquoise, v1.0, 14.10.2026), supersedes the
   provisional navy/petrol brand (D-12, docs/DECISIONS.md [design]).
   Layers:  1. brand tokens (exact names from the design-system PDF)   2. semantic tokens (what components use)
            3. existing variable names, mapped onto the tokens so all existing CSS keeps working
            4. modes: [data-mode=dark] (separate semantic values) · [data-accent] presets · [data-density] · [data-shape]
   Rules: blue = primary action/navigation, teal = success/positive, red = errors; the gradient only for branding
   and selected highlights (never paragraphs or financial figures); teal text on white only via --brand-teal-text.
   ===================================================================== */
:root {
  /* ---------- 1. brand tokens (design-system PDF, page 06) ---------- */
  --brand-blue: #1479ED;          /* primary CTA, navigation */
  --brand-cyan: #1CB8F2;          /* gradient / subtle accents */
  --brand-teal: #06B99B;          /* success, positive growth (fills, icons – not small text on white) */
  --text-primary: #0F172A;        /* deep navy – headings and body */
  --text-secondary: #64748B;
  --bg-page: #F8FAFC;             /* canvas */
  --bg-surface: #FFFFFF;
  --border-default: #E2E8F0;
  --brand-gradient: linear-gradient(110deg, #1479ED 0%, #1CB8F2 48%, #06B99B 100%);
  --radius-control: 10px;         /* inputs, selects */
  --radius-button: 12px;
  --radius-card: 16px;
  --font-ui: Inter, system-ui, Arial, sans-serif;

  /* derived brand shades (contrast-checked, see docs/DESIGN-SYSTEM.md) */
  --brand-navy: #0D1930;
  --brand-blue-600: #0F67D4;      /* hover */
  --brand-blue-700: #0B54AE;      /* pressed */
  --brand-blue-text: #0B5FC8;     /* blue text/links on white: 5.9:1 */
  --brand-blue-50: #EBF4FE;
  --brand-blue-100: #D3E6FD;
  --brand-teal-text: #047A66;     /* teal text on white: 5.3:1 (AA) */
  --brand-teal-50: #E7F8F4;
  --brand-teal-100: #C5EFE5;

  /* spacing scale 4/8/12/16/24/32/48 */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;

  /* motion: 150–200 ms, small movements only; logo arrow reveal 400 ms */
  --dur-fast: 150ms; --dur: 200ms; --dur-reveal: 400ms; --ease: cubic-bezier(.2, .7, .2, 1);

  /* ---------- 2. semantic tokens (light) ---------- */
  --primary: var(--accent); --primary-hover: var(--accent-600); --primary-contrast: #FFFFFF;
  --success: #047A66; --success-bg: #E7F8F4; --success-fill: #06B99B;
  --warning: #A15C07; --warning-bg: #FFF6E5; --warning-fill: #F59E0B;
  --danger: #C52A2A; --danger-bg: #FDEEEE; --danger-fill: #DC2626;
  --info-fg: #0B5FC8; --info-bg-c: #EBF4FE;
  --disabled-bg: #EEF2F7; --disabled-fg: #7A889D; --disabled-border: #DFE8F1;
  --focus: #1479ED; --focus-ring: 0 0 0 3px rgba(20, 121, 237, .28);

  /* ---------- 3. existing variable names → mapped onto the tokens ---------- */
  --brand-primary: var(--text-primary); --brand-accent: var(--brand-blue);
  --accent: #1479ED; --accent-600: #0F67D4; --accent-700: #0B54AE; --accent-50: #EBF4FE; --accent-100: #D3E6FD; --accent-contrast: #FFFFFF;
  --accent-text: #0B5FC8;                                              /* accent used as text colour (AA) */
  --coral: var(--accent); --coral-700: var(--accent-700); --coral-50: var(--accent-50);   /* legacy alias */
  --hero-from: #1479ED; --hero-to: #06B99B;
  --bg: var(--bg-page); --surface: var(--bg-surface); --surface-2: #F8FAFC; --surface-3: #F1F5F9;
  --border: var(--border-default); --border-strong: #CBD5E1;
  --text: var(--text-primary); --text-2: #334155; --text-3: var(--text-secondary); --overlay: rgba(13, 25, 48, .45);
  --ok: var(--success); --ok-bg: var(--success-bg); --warn: var(--warning); --warn-bg: var(--warning-bg); --err: var(--danger); --err-bg: var(--danger-bg);
  --info: var(--info-fg); --info-bg: var(--info-bg-c);
  --violet: #6D4ED8; --violet-bg: #F3EFFF;
  --st-all: #5B6B82; --st-all-bg: #EEF2F7; --st-draft: #0B5FC8; --st-draft-bg: #EBF4FE;
  --radius-sm: 8px; --radius: var(--radius-control); --radius-btn: var(--radius-button); --radius-lg: var(--radius-card); --radius-xl: 20px;
  --shadow-sm: 0 1px 2px rgba(13, 25, 48, .05);
  --shadow: 0 1px 2px rgba(13, 25, 48, .05), 0 4px 14px rgba(13, 25, 48, .05);
  --shadow-lg: 0 18px 44px rgba(13, 25, 48, .16);
  --font: var(--font-ui); --font-display: var(--font-ui);
  --fs-xs: 12px; --fs-sm: 14px; --fs: 16px; --fs-table: 15px; --fs-md: 17px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 30px;
  --pad: 16px; --row-h: 52px; --ctrl-h: 44px; --sidebar-w: 260px;
  /* app chrome (the admin variant overrides these, see app.css .admin-shell) */
  --sidebar-bg: var(--bg-surface); --sidebar-fg: var(--text-2); --sidebar-fg-muted: var(--text-3); --sidebar-hover: var(--surface-3);
  --sidebar-active-bg: var(--accent-50); --sidebar-active-fg: var(--accent-text); --sidebar-border: var(--border);
  --logo-word: #0B1A3C; --logo-word-2: #F0A500;      /* wordmark "My Smart" / "Invoice" */
  color-scheme: light;
}

/* ---------- accent presets (personal / company appearance). "brand" = no attribute = blue ---------- */
[data-accent="iris"]   { --accent:#5B55D9; --accent-600:#4B44BD; --accent-700:#3E3899; --accent-50:#F3F3FF; --accent-100:#E7E7FF; --accent-text:#4B44BD; --focus:#5B55D9; --focus-ring:0 0 0 3px rgba(91,85,217,.28); }
[data-accent="teal"]   { --accent:#0E7C86; --accent-600:#0B6870; --accent-700:#08535A; --accent-50:#E8F5F6; --accent-100:#C8E8EB; --accent-text:#0B6870; --focus:#0E7C86; --focus-ring:0 0 0 3px rgba(14,124,134,.28); }
[data-accent="navy"]   { --accent:#1F3A68; --accent-600:#19305A; --accent-700:#13264A; --accent-50:#EDF1F8; --accent-100:#D5DEEE; --accent-text:#1F3A68; --focus:#1F3A68; --focus-ring:0 0 0 3px rgba(31,58,104,.28); }
[data-accent="blue"]   { --accent:#1D5FD1; --accent-600:#1A52B5; --accent-700:#154494; --accent-50:#EEF4FF; --accent-100:#D6E4FD; --accent-text:#1A52B5; --focus:#1D5FD1; --focus-ring:0 0 0 3px rgba(29,95,209,.28); }
[data-accent="violet"] { --accent:#6D4ED8; --accent-600:#5D40BF; --accent-700:#4C349C; --accent-50:#F3EFFF; --accent-100:#E3DAFD; --accent-text:#5D40BF; --focus:#6D4ED8; --focus-ring:0 0 0 3px rgba(109,78,216,.28); }
[data-accent="green"]  { --accent:#15803D; --accent-600:#126D34; --accent-700:#0E5A2A; --accent-50:#ECFDF3; --accent-100:#CFF5DD; --accent-text:#126D34; --focus:#15803D; --focus-ring:0 0 0 3px rgba(21,128,61,.28); }
[data-accent="orange"] { --accent:#C2410C; --accent-600:#A8380A; --accent-700:#8A2E08; --accent-50:#FFF3EC; --accent-100:#FDE0CF; --accent-text:#A8380A; --focus:#C2410C; --focus-ring:0 0 0 3px rgba(194,65,12,.28); }
[data-accent="rose"]   { --accent:#BE185D; --accent-600:#A3154F; --accent-700:#861142; --accent-50:#FDF0F6; --accent-100:#FAD6E6; --accent-text:#A3154F; --focus:#BE185D; --focus-ring:0 0 0 3px rgba(190,24,93,.28); }
[data-accent="custom"] { --accent-600: color-mix(in srgb, var(--accent) 86%, black); --accent-700: color-mix(in srgb, var(--accent) 72%, black);
  --accent-50: color-mix(in srgb, var(--accent) 8%, white); --accent-100: color-mix(in srgb, var(--accent) 18%, white);
  --accent-text: color-mix(in srgb, var(--accent) 78%, black); --focus: var(--accent); --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }

/* ---------- dark mode: separate semantic values (light mode first; dark only via these tokens) ---------- */
[data-mode="dark"] {
  --bg-page: #0B1120; --bg-surface: #111827; --border-default: #1F2937;
  --text-primary: #E8EEF7; --text-secondary: #95A3BA;
  --bg: var(--bg-page); --surface: var(--bg-surface); --surface-2: #151E2E; --surface-3: #1E293B; --border: var(--border-default); --border-strong: #334155;
  --text: var(--text-primary); --text-2: #B6C2D4; --text-3: var(--text-secondary); --overlay: rgba(2, 6, 14, .65);
  --accent-600: color-mix(in srgb, var(--accent) 82%, white); --accent-700: color-mix(in srgb, var(--accent) 60%, white);
  --accent-50: color-mix(in srgb, var(--accent) 16%, transparent); --accent-100: color-mix(in srgb, var(--accent) 30%, transparent);
  --accent-text: color-mix(in srgb, var(--accent) 45%, white);
  --success: #3DD9B6; --success-bg: rgba(6, 185, 155, .16); --success-fill: #06B99B;
  --warning: #FBBF24; --warning-bg: rgba(245, 158, 11, .16);
  --danger: #F87171; --danger-bg: rgba(239, 68, 68, .16);
  --info-fg: #7DB5FF; --info-bg-c: rgba(20, 121, 237, .18);
  --disabled-bg: #17243B; --disabled-fg: #6F7E96; --disabled-border: #26364F;
  --focus: #5AA2FF; --focus-ring: 0 0 0 3px rgba(90, 162, 255, .35);
  --violet: #A78BFA; --violet-bg: rgba(139, 92, 246, .18);
  --st-all: #B6C2D4; --st-all-bg: rgba(148, 163, 184, .16); --st-draft: #7DB5FF; --st-draft-bg: rgba(20, 121, 237, .18);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --shadow: 0 1px 3px rgba(0, 0, 0, .4); --shadow-lg: 0 14px 36px rgba(0, 0, 0, .55);
  --sidebar-bg: #0F172A; --sidebar-hover: #1E293B;
  --logo-word: #FFFFFF; --logo-word-2: #F7B500;
  color-scheme: dark;
}

/* ---------- density / corners ---------- */
[data-density="compact"] { --pad: 12px; --row-h: 42px; --ctrl-h: 38px; --fs: 14px; --fs-sm: 13px; --fs-table: 13.5px; }
[data-density="comfortable"] { --pad: 22px; --row-h: 58px; --ctrl-h: 48px; }
[data-shape="sharp"] { --radius-sm: 3px; --radius-control: 4px; --radius-button: 4px; --radius-card: 6px; --radius-xl: 8px; }
[data-shape="round"] { --radius-sm: 10px; --radius-control: 14px; --radius-button: 22px; --radius-card: 22px; --radius-xl: 28px; }

/* ---------- motion: respect the user's setting (no animations in critical workflows) ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-reveal: 0ms; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}