/* =========================================================================
   OMNIFIN CRM — Design Tokens
   =========================================================================
   All visual properties are defined as CSS custom properties so they can be
   overwritten at runtime by a PHP helper that reads the `settings` table.

   Usage (PHP):
     <?= omnifin_render_tokens($settings) ?>   // emits <style>:root{--...}</style>

   Token naming: --<category>-<role>[-<modifier>]
   Categories: color, space, radius, type, size, elevation, motion, layer
   ========================================================================= */

:root {
  /* ----- Color scheme switch (driven by settings.color_scheme) --------- */
  color-scheme: dark;

  /* ----- Brand / accent (driven by settings.accent_color) -------------- */
  --accent-hue: 228;
  --accent-chroma: 0.18;
  --accent:              oklch(62% var(--accent-chroma) var(--accent-hue));
  --accent-strong:       oklch(68% var(--accent-chroma) var(--accent-hue));
  --accent-soft:         oklch(62% var(--accent-chroma) var(--accent-hue) / 0.14);
  --accent-glow:         oklch(72% var(--accent-chroma) var(--accent-hue) / 0.45);
  --accent-contrast:     #ffffff;
  --accent-2:            oklch(42% 0.20 286);   /* Deep Violet — secondary accent */
  /* =====================================================================
     OMN Architectural Portfolio Tokens (dashboard)
     Theme-aware semantic tokens — automatically swap in dark mode.
     ===================================================================== */
  --omn-brand-primary:   var(--accent);

  /* Chart greyscale palette — series 2/3/4 (series 1 = brand-primary).
     :root values are DARK-mode defaults; [data-theme="light"] overrides below. */
  --omn-chart-g1: #2a3441;   /* dark: border-strong */
  --omn-chart-g2: #1b232e;   /* dark: border */
  --omn-chart-g3: #141a22;   /* dark: bg-elevated */
  --accent-rgb:          62 168 220;             /* approx RGB channels for rgba() usage */
  --text-primary-rgb:    230 235 242;            /* dark-mode primary text RGB channels */

  /* Brand gradient — defaults derive from accent so theme-change is instant */
  --brand-color-start:   var(--accent);
  --brand-color-end:     var(--accent-strong);
  --brand-gradient:      linear-gradient(135deg, var(--brand-color-start), var(--brand-color-end));

  /* PDF export color (settings.pdf_color) — consumed by print stylesheets */
  --pdf-color:           #0e1116;

  /* ================================================================
     LIGHT THEME TOKENS
     Each key below maps 1:1 to a settings column.
     ================================================================ */
  --color-light-bg-base:         #f5f6f8;
  --color-light-bg-surface:      #ffffff;
  --color-light-bg-elevated:     #ffffff;
  --color-light-sidebar-bg:      #ffffff;
  --color-light-topbar-bg:       #ffffff;
  --color-light-text-primary:    #0b0d11;
  --color-light-text-secondary:  #5b6472;
  --color-light-border:          #e3e6ec;

  /* ================================================================
     DARK THEME TOKENS  (default)
     ================================================================ */
  --color-dark-accent:           oklch(62% 0.18 228);
  --color-dark-bg-base:          #07090d;   /* canvas */
  --color-dark-bg-surface:       #0d1117;   /* cards */
  --color-dark-bg-elevated:      #141a22;   /* modals, popovers */
  --color-dark-sidebar-bg:       #05070a;
  --color-dark-topbar-bg:        #0a0d12;
  --color-dark-text-primary:     #e6ebf2;
  --color-dark-text-secondary:   #8a93a3;
  --color-dark-border:           #1b232e;

  /* ================================================================
     RESOLVED ROLE TOKENS
     Components ONLY read these. Theme switch rewires them below.
     ================================================================ */
  --bg-base:         var(--color-dark-bg-base);
  --bg-surface:      var(--color-dark-bg-surface);
  --bg-elevated:     var(--color-dark-bg-elevated);
  --bg-sidebar:      var(--color-dark-sidebar-bg);
  --bg-topbar:       var(--color-dark-topbar-bg);
  --bg-hover:        oklch(100% 0 0 / 0.04);
  --bg-active:       oklch(100% 0 0 / 0.08);
  --bg-inset:        #05070a;

  --text-primary:    var(--color-dark-text-primary);
  --text-secondary:  var(--color-dark-text-secondary);
  --text-tertiary:   #5b6472;
  --text-inverse:    #0b0d11;
  --text-on-accent:  #ffffff;

  --border:          var(--color-dark-border);
  --border-strong:   #2a3441;
  --border-accent:   var(--accent);

  /* Semantic status (neon on dark) */
  --status-success:      oklch(72% 0.17 152);
  --status-success-soft: oklch(72% 0.17 152 / 0.14);
  --status-warning:      oklch(80% 0.15 80);
  --status-warning-soft: oklch(80% 0.15 80 / 0.14);
  --status-danger:       oklch(66% 0.21 22);
  --status-danger-soft:  oklch(66% 0.21 22 / 0.14);
  --status-info:         oklch(72% 0.14 220);
  --status-info-soft:    oklch(72% 0.14 220 / 0.14);
  --status-neutral:      #5b6472;
  --status-neutral-soft: oklch(70% 0.01 240 / 0.12);

  /* Data-viz ramp (series colors for charts / kanban lanes) */
  --viz-1: oklch(68% 0.17 228);
  --viz-2: oklch(72% 0.14 186);
  --viz-3: oklch(72% 0.17 152);
  --viz-4: oklch(80% 0.15 80);
  --viz-5: oklch(70% 0.19 300);
  --viz-6: oklch(66% 0.21 22);
  --viz-7: oklch(74% 0.10 250);
  --viz-8: oklch(78% 0.08 160);

  /* ================================================================
     TYPOGRAPHY  (settings.font_family)
     ================================================================ */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: var(--font-sans);

  --fs-2xs: 10px;
  --fs-xs:  11px;
  --fs-sm:  12px;
  --fs-md:  13px;   /* base */
  --fs-lg:  14px;
  --fs-xl:  16px;
  --fs-2xl: 20px;
  --fs-3xl: 24px;
  --fs-4xl: 32px;
  --fs-5xl: 40px;
  --fs-6xl: 56px;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* ================================================================
     SPACING  (settings.ui_density rescales this)
     Compact default: 4px base.
     ================================================================ */
  --space-unit: 4px;
  --space-0:   0;
  --space-1:   calc(var(--space-unit) * 1);    /*  4 */
  --space-2:   calc(var(--space-unit) * 2);    /*  8 */
  --space-3:   calc(var(--space-unit) * 3);    /* 12 */
  --space-4:   calc(var(--space-unit) * 4);    /* 16 */
  --space-5:   calc(var(--space-unit) * 5);    /* 20 */
  --space-6:   calc(var(--space-unit) * 6);    /* 24 */
  --space-8:   calc(var(--space-unit) * 8);    /* 32 */
  --space-10:  calc(var(--space-unit) * 10);   /* 40 */
  --space-12:  calc(var(--space-unit) * 12);   /* 48 */
  --space-16:  calc(var(--space-unit) * 16);   /* 64 */

  /* ================================================================
     RADIUS  (settings.border_radius)
     ================================================================ */
  --radius-base: 8px;
  --radius:      var(--radius-base);               /* alias — resolves var(--radius) references */
  --radius-xs:   var(--radius-base);               /* 8 — minimum everywhere */
  --radius-sm:   var(--radius-base);               /* 8 */
  --radius-md:   var(--radius-base);               /* 8 */
  --radius-lg:   calc(var(--radius-base) * 1.5);   /* 12 */
  --radius-xl:   calc(var(--radius-base) * 2);     /* 16 */
  --radius-2xl:  calc(var(--radius-base) * 3);     /* 24 */
  --radius-pill: 999px;

  /* ================================================================
     SIZING
     ================================================================ */
  --sidebar-width:         240px;   /* settings.sidebar_width */
  --sidebar-width-collapsed: 56px;
  --topbar-height:          48px;
  --topbar-blur:            16px;   /* settings.topbar_blur */

  --control-h-xs:  22px;
  --control-h-sm:  26px;
  --control-h-md:  30px;
  --control-h-lg:  36px;

  --container-max: 1600px;

  /* ================================================================
     TOUCH  (mobile / PWA)
     Hit targets follow Apple HIG (44px) / Material (48dp).
     ================================================================ */
  --touch-min:          44px;   /* min tappable dimension */
  --touch-comfort:      52px;   /* primary actions */
  --touch-thumbzone-h:  96px;   /* bottom reachable strip */
  --touch-safe-top:     env(safe-area-inset-top, 0px);
  --touch-safe-bottom:  env(safe-area-inset-bottom, 0px);
  --touch-safe-left:    env(safe-area-inset-left, 0px);
  --touch-safe-right:   env(safe-area-inset-right, 0px);

  --mobile-tabbar-h:    64px;
  --mobile-header-h:    52px;
  --mobile-fab:         56px;
  --mobile-gutter:      16px;

  /* OLED-tuned accents — pure black canvas stays 0,0,0 for power draw
     but neon accents are raised in lightness to keep contrast. */
  --oled-bg:            #000000;
  --oled-surface:       #0a0d12;
  --oled-elevated:      #12161d;
  --accent-oled:        oklch(72% var(--accent-chroma) var(--accent-hue));
  --accent-oled-glow:   oklch(78% var(--accent-chroma) var(--accent-hue) / 0.55);

  /* ================================================================
     ELEVATION — dark-friendly, very subtle
     ================================================================ */
  --shadow-none: none;
  --shadow-xs:   0 1px 0 0 rgb(0 0 0 / 0.3);
  --shadow-sm:   0 1px 2px 0 rgb(0 0 0 / 0.35), 0 0 0 1px rgb(0 0 0 / 0.15);
  --shadow-md:   0 4px 12px -2px rgb(0 0 0 / 0.45), 0 0 0 1px rgb(0 0 0 / 0.2);
  --shadow-lg:   0 16px 32px -8px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(0 0 0 / 0.25);
  --shadow-xl:   0 32px 60px -12px rgb(0 0 0 / 0.65);
  --shadow-focus: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent);
  --shadow-glow:  0 0 0 1px var(--accent), 0 0 24px -4px var(--accent-glow);

  /* ================================================================
     MOTION
     ================================================================ */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;

  /* ================================================================
     LAYERS
     ================================================================ */
  --z-base:     0;
  --z-raised:   10;
  --z-sticky:   50;
  --z-overlay:  100;
  --z-modal:    200;
  --z-popover:  300;
  --z-toast:    400;
  --z-tooltip:  500;

  /* ================================================================
     FORM INPUT TOKENS — dark mode defaults
     ================================================================ */
  --input-h:              36px;
  --input-bg:             #06080c;
  --input-border:         rgba(255,255,255,.09);
  --input-border-hover:   rgba(255,255,255,.15);
  --input-border-focus:   var(--accent);
  --input-shadow:         inset 0 1px 3px rgba(0,0,0,.4);
  --input-shadow-focus:   0 0 0 4px rgba(var(--accent-rgb),.16);
  --input-placeholder:    rgba(90,100,120,.75);
  --input-radius:         var(--radius-sm);
}

/* =========================================================================
   THEME: LIGHT
   Applied via [data-theme="light"]. PHP renders the chosen value from
   settings.color_scheme into the <html data-theme="..."> attribute.
   ========================================================================= */
[data-theme="light"] {
  color-scheme: light;

  /* ── Backgrounds ───────────────────────────────────────────── */
  --bg-base:         #f0f4f8;    /* page canvas */
  --bg-surface:      #ffffff;    /* cards */
  --bg-elevated:     #e8edf5;    /* modals, popovers */
  --bg-sidebar:      #ffffff;    /* sidebar — pure white */
  --bg-topbar:       #ffffff;
  --bg-hover:        #f5f7fb;    /* subtle hover */
  --bg-active:       #eaeff7;    /* pressed / selected */
  --bg-inset:        #f5f7fb;    /* inset fields — nearly white so no stripes inside cards */

  /* ── Text ──────────────────────────────────────────────────── */
  --text-primary:    #0b0d11;    /* near-black — 18:1 on white */
  --text-secondary:  #3b4250;    /* 9:1 on white */
  --text-tertiary:   #6b7280;    /* 4.6:1 on white — WCAG AA */
  --text-inverse:    #ffffff;

  /* ── Borders ───────────────────────────────────────────────── */
  --border:          #dde1ea;
  --border-strong:   #c0c6d2;
  --border-accent:   var(--accent);

  /* ── Accent soft (lighter tint on white background) ─────────── */
  --accent-soft:     oklch(62% var(--accent-chroma) var(--accent-hue) / 0.10);
  --text-primary-rgb: 11 13 17;                  /* light-mode primary text RGB channels */

  /* ── Status — WCAG AA on #f0f4f8 background ────────────────── */
  --status-success:      oklch(42% 0.16 152);   /* ≈ #0e7d3b — 5.2:1 */
  --status-success-soft: oklch(42% 0.16 152 / 0.10);
  --status-warning:      oklch(48% 0.14 65);    /* ≈ #946200 — 4.7:1 */
  --status-warning-soft: oklch(48% 0.14 65 / 0.12);
  --status-danger:       oklch(46% 0.20 25);    /* ≈ #b42020 — 5.8:1 */
  --status-danger-soft:  oklch(46% 0.20 25 / 0.10);
  --status-info:         oklch(44% 0.16 238);   /* ≈ #1a5ec2 — 5.3:1 */
  --status-info-soft:    oklch(44% 0.16 238 / 0.10);
  --status-neutral:      #5b6472;
  --status-neutral-soft: oklch(55% 0.01 240 / 0.10);

  /* ── Elevation — crisp light shadows ───────────────────────── */
  --shadow-xs: 0 1px 0 0 rgb(16 20 27 / 0.04);
  --shadow-sm: 0 1px 3px 0 rgb(16 20 27 / 0.07), 0 0 0 1px rgb(16 20 27 / 0.04);
  --shadow-md: 0 4px 12px -2px rgb(16 20 27 / 0.10), 0 0 0 1px rgb(16 20 27 / 0.05);
  --shadow-lg: 0 16px 32px -8px rgb(16 20 27 / 0.14), 0 0 0 1px rgb(16 20 27 / 0.04);
  --shadow-xl: 0 32px 60px -12px rgb(16 20 27 / 0.18);

  /* Focus ring — white halo on light background */
  --shadow-focus: 0 0 0 2px #ffffff, 0 0 0 4px var(--accent);
  --shadow-glow:  0 0 0 1px var(--accent), 0 0 16px -2px oklch(62% var(--accent-chroma) var(--accent-hue) / 0.25);

  /* ── Sidebar shadow (replaces border-right on light) ────────── */
  --sidebar-shadow-light: 1px 0 0 rgb(16 20 27 / 0.05),
                          4px 0 16px -4px rgb(16 20 27 / 0.06);

  /* ── Viz ramp — darkened for light mode readability ─────────── */
  --viz-1: oklch(48% 0.18 228);
  --viz-2: oklch(48% 0.16 186);
  --viz-3: oklch(42% 0.17 152);
  --viz-4: oklch(52% 0.15 80);
  --viz-5: oklch(46% 0.19 300);
  --viz-6: oklch(46% 0.20 22);
  --viz-7: oklch(48% 0.12 250);
  --viz-8: oklch(44% 0.10 160);

  /* ── Form input overrides — light mode ──────────────────────── */
  --input-bg:            #f2f5fa;
  --input-border:        #c8cdd9;
  --input-border-hover:  #a8b0c2;
  --input-border-focus:  var(--accent);
  --input-shadow:        inset 0 1px 2px rgba(16,20,27,.06);
  --input-shadow-focus:  0 0 0 4px rgba(var(--accent-rgb),.12);
  --input-placeholder:   #9aa4b4;

  /* OMN Architectural Portfolio — light mode chart greyscale palette */
  --omn-chart-g1: #e4e4e7;
  --omn-chart-g2: #f4f4f6;
  --omn-chart-g3: #fafafa;
}

/* =========================================================================
   DENSITY  (settings.ui_density)
   ========================================================================= */
[data-density="comfortable"] { --space-unit: 5px; --fs-md: 14px; --topbar-height: 56px; --control-h-md: 34px; }
[data-density="compact"]     { --space-unit: 4px; --fs-md: 13px; --topbar-height: 48px; --control-h-md: 30px; }
[data-density="ultra"]       { --space-unit: 3px; --fs-md: 12px; --topbar-height: 40px; --control-h-md: 26px; }

/* =========================================================================
   MOBILE OLED — activated on coarse pointers + dark theme, or explicitly
   via data-oled="true" on <html>. Deepens canvas and boosts neon.
   ========================================================================= */
@media (pointer: coarse) {
  [data-theme="dark"] {
    --bg-base:      var(--oled-bg);
    --bg-surface:   var(--oled-surface);
    --bg-elevated:  var(--oled-elevated);
    --accent:       var(--accent-oled);
    --accent-glow:  var(--accent-oled-glow);
  }
}
[data-oled="true"][data-theme="dark"] {
  --bg-base:      var(--oled-bg);
  --bg-surface:   var(--oled-surface);
  --bg-elevated:  var(--oled-elevated);
  --accent:       var(--accent-oled);
  --accent-glow:  var(--accent-oled-glow);
}

/* =========================================================================
   Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}