/*
 * PhoneBiz design tokens - binding for V1 (see Addon 02 section 2).
 * Values sampled from 03_Visual_UI_Blueprint.pdf, with text-safe variants added
 * so every status colour passes WCAG AA as text. Components must use these
 * variables only; no hard-coded hex values.
 *
 * Branding (Settings > Branding) may override ONLY: --brand-primary,
 * --brand-primary-hover, --brand-primary-soft, --brand-accent, --font-sans,
 * --radius-* (via preset). Everything else is fixed.
 */

:root {
  /* Brand (configurable) */
  --brand-primary: #3163D2;        /* white text on it: 5.5:1 */
  --brand-primary-hover: #2554BD;
  --brand-primary-soft: #EAF0FF;   /* active nav pill, selected chips */
  --brand-accent: #14A56A;
  --link: #3163D2;                 /* primary used as text/links; lightened in dark mode */

  /* Status fills: bars, dots, KPI accent strips, chart series (non-text, >= 3:1 vs surface) */
  --success: #14A56A;
  --danger: #DC4C64;
  --warning: #EAA43A;
  --info: #3163D2;

  /* Status text + solid button fills (>= 4.5:1 on white) */
  --success-text: #0E7A4E;
  --danger-text: #B42339;
  --warning-text: #9A5B00;
  --success-soft: #E7F6EF;
  --danger-soft: #FDECEF;
  --warning-soft: #FDF3E3;
  --on-warning: #0F172A;

  /* Neutrals */
  --bg: #F5F7FB;                   /* app background */
  --surface: #FFFFFF;              /* cards, modals */
  --surface-muted: #F3F5F9;        /* table header, inputs at rest */
  --border: #E2E7F0;
  --border-strong: #D7DDE8;
  --text: #0F172A;
  --text-secondary: #455A82;
  --text-muted: #6B7280;           /* 4.8:1 on white */
  --on-primary: #FFFFFF;

  /* Sidebar (stays dark in both themes, as blueprint) */
  --sidebar-bg: #0F172A;
  --sidebar-text: #C7D2E4;
  --sidebar-text-active: #FFFFFF;
  --sidebar-item-active: #203A70;

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(49, 99, 210, 0.45);

  /* Typography */
  --font-sans: "Inter", "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --font-numeric: var(--font-sans);
  --font-feature-numeric: "tnum" 1, "lnum" 1;   /* tabular figures for money */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;   /* page titles */
  --text-kpi: 26px;  /* KPI values desktop; 22px on phone */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Spacing (4px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Radius preset: "comfortable" (default). Presets: sharp 4/6/8, comfortable 8/12/16, round 10/16/20 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Elevation (subtle only, per design lock) */
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-popover: 0 8px 24px rgba(15, 23, 42, 0.12);
  --shadow-modal: 0 16px 48px rgba(15, 23, 42, 0.18);

  /* Layout */
  --sidebar-width: 248px;
  --sidebar-rail-width: 72px;
  --topbar-height: 64px;
  --bottomnav-height: 64px;
  --content-max: 1440px;
  --touch-target: 44px;
  --media-ratio: 4 / 3;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-sheet: 250ms;
  --skeleton-delay: 300ms;

  /* Z-index scale */
  --z-sticky: 10;
  --z-sidebar: 20;
  --z-dropdown: 30;
  --z-sheet: 40;
  --z-modal: 50;
  --z-toast: 60;
}

/* Dark theme: system preference unless the user chose light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-primary-soft: #1B2A4E;
    --link: #8FB0FF;
    --success-text: #34D399;
    --danger-text: #FB7185;
    --warning-text: #FBBF24;
    --success-soft: #0F2E24;
    --danger-soft: #3A1620;
    --warning-soft: #3A2A0F;
    --bg: #0B1120;
    --surface: #172033;
    --surface-muted: #1E293B;
    --border: #26324A;
    --border-strong: #334155;
    --text: #F1F5F9;
    --text-secondary: #C7D2E4;
    --text-muted: #94A3B8;
    --sidebar-bg: #0B1120;
    --focus-ring: 0 0 0 3px rgba(143, 176, 255, 0.55);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  --brand-primary-soft: #1B2A4E;
  --link: #8FB0FF;
  --success-text: #34D399;
  --danger-text: #FB7185;
  --warning-text: #FBBF24;
  --success-soft: #0F2E24;
  --danger-soft: #3A1620;
  --warning-soft: #3A2A0F;
  --bg: #0B1120;
  --surface: #172033;
  --surface-muted: #1E293B;
  --border: #26324A;
  --border-strong: #334155;
  --text: #F1F5F9;
  --text-secondary: #C7D2E4;
  --text-muted: #94A3B8;
  --sidebar-bg: #0B1120;
  --focus-ring: 0 0 0 3px rgba(143, 176, 255, 0.55);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-sheet: 0ms;
  }
}

/* Money helpers */
.money { font-feature-settings: var(--font-feature-numeric); text-align: right; white-space: nowrap; }
.money--in { color: var(--success-text); }
.money--out { color: var(--danger-text); }
.money--pending { color: var(--text-muted); text-decoration: underline dashed; text-underline-offset: 3px; }