/* ═══════════════════════════════════════════════════════════════
   FLOW — DESIGN TOKENS
   Single source of truth for every color, size, and spacing value.
   Never hardcode values anywhere else in the CSS.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;700&display=swap');

:root {
  /* Hints the browser to render native form-control chrome (a <select>'s
     own open dropdown popup, scrollbars, etc.) in dark mode — without this,
     the select BOX itself picks up our dark styling below just fine, but
     the popup list of options is OS/browser-rendered and defaults to a
     light theme regardless, which is what actually read as "white"
     dropdowns despite the box matching every other control. Flow is
     dark-theme-only today (see the note on set-light-mode further down),
     so this is unconditional, not tied to the light-mode toggle. */
  color-scheme: dark;

  /* ── BACKGROUNDS ──
     --bg is deliberately LIGHTER than --surface (sidebar) — 2026-07-07
     contrast pass: the page area and topbar (both use --bg) read as the
     lighter "working area", the sidebar (--surface) stays the darker,
     receding chrome. Previously --bg was darker than --surface, which
     made the whole app read as one flat near-black slab. Darkened
     slightly again same day (mobile feedback) — still clearly lighter
     than --surface (#111111), just a touch less bright than the first pass. */
  --bg:        #17171a;   /* Page background, topbar */
  --surface:   #111111;   /* Sidebar, cards, modals */
  --surface2:  #1a1a1a;   /* Input fields, hover states */
  --surface3:  #222222;   /* Nested surfaces, deep nesting */

  /* ── BORDERS ── */
  --border:    #2a2a2a;   /* Default dividers */
  --border2:   #333333;   /* Input borders, stronger dividers */

  /* ── ACCENT (Purple) ── */
  --accent:       #5D278D;              /* Primary action color */
  --accent-light: #7b35b8;             /* Hover state for accent */
  --accent-bright:#c084fc;             /* Text on dark bg, highlights */
  --accent-glow:  rgba(93,39,141,0.15);/* Subtle accent tint */
  --accent-border:rgba(93,39,141,0.3); /* Accent-tinted borders */

  /* ── TEXT ──
     --text3 lightened ~10% (2026-07-07 contrast pass, from the sidebar's
     own default nav-item font color, applied app-wide since --text3 is
     already the shared muted-text token everywhere), then lightened
     another ~10 percentage points of HSL lightness same day (mobile
     feedback) — #666666(L40%) -> #808080(L50%) -> #999999(L60%). */
  --text:  #ffffff;    /* Primary text */
  --text2: #C0C0C0;    /* Secondary text, labels */
  --text3: #999999;    /* Muted text, placeholders, hints */

  /* ── SEMANTIC COLORS ── */
  --success: #22c55e;
  --danger:  #ef4444;
  --warn:    #eab308;
  --info:    #3b82f6;
  --silver:  #C0C0C0;

  /* ── SEMANTIC BACKGROUNDS (always paired with their color) ── */
  --success-bg: rgba(34,197,94,0.12);
  --danger-bg:  rgba(239,68,68,0.12);
  --warn-bg:    rgba(234,179,8,0.12);
  --info-bg:    rgba(59,130,246,0.12);

  /* ── SPACING ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ── RADIUS ── */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* ── SHADOWS ── */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow:    0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.5);

  /* ── TYPOGRAPHY ── */
  /* Both overridable at runtime (Settings → Appearance → Body/Heading Font)
     — js/ui.js's applyAppFonts() sets these same custom properties directly
     on the root element once a non-default choice is saved; these plain
     values are just the fallback shown before any override is applied. */
  --font-body:    'Inter', sans-serif;
  --font-display: 'Space Grotesk', sans-serif;
  /* Estimate/Invoice document font — a separate, independently overridable
     pair (Settings → Estimates/Invoices → Document Font) so the
     customer-facing document can use its own fonts without being tied to
     whatever the app's own Appearance settings pick. See applyDocFonts()
     (js/ui.js) and the .est-doc-* rules in css/pages.css. */
  --doc-font-body:    'Inter', sans-serif;
  --doc-font-display: 'Space Grotesk', sans-serif;
  --text-2xs: 10px;
  --text-xs:  11px;
  --text-sm:  12px;
  --text-base:14px;
  --text-md:  15px;
  --text-lg:  17px;
  --text-xl:  20px;
  --text-2xl: 26px;

  /* Mobile-only text-size knob (Settings → Appearance → Text Size, mobile
     viewports only). Defaults to 1 = no change. Only ever multiplied into
     the --text-* tokens INSIDE the mobile media query (css/layout.css) —
     desktop always uses the plain values above regardless of this variable's
     stored value, so there's no risk of this leaking into the desktop app. */
  --ui-text-scale: 1;

  /* ── TRANSITIONS ── */
  --transition: 0.15s ease;
  --transition-slide: 0.25s cubic-bezier(0.4,0,0.2,1);

  /* ── LAYOUT ── */
  --sidebar-width: 230px;
  --topbar-height: 92px;

  /* ── CONTROLS (buttons, pills/tabs, dropdowns, single-line fields) ──
     One shared standard so every clickable/editable control in the app
     reads at the same visual weight regardless of which element it is —
     anchored to the existing "+ New Contact"-style button. Textareas and
     multi-line content intentionally aren't forced to a fixed height, but
     still use the same font metrics. */
  --control-height:      30px;
  --control-font-family: var(--font-body);
  --control-font-size:   var(--text-sm);
  --control-font-weight: 600;
  --control-radius:      var(--radius-sm);
  --control-padding-x:   14px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }