/* ============================================================
   iSpend design tokens — light first, dark under the data-theme="dark" root (theme.js always sets the effective theme)
   (system) or an explicit [data-theme]. Category palette c1..c12 is
   theme-aware; categories store a slot key, never a hex.
   ============================================================ */

:root {
  color-scheme: light;

  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f2f4f7;
  --surface-3: #e9ecf1;
  --surface-overlay: #ffffff;
  --border: #e5e8ee;
  --border-strong: #cfd5df;

  --text-1: #111827;
  --text-2: #4b5563;
  --text-3: #626b7a;
  --text-4: #5b6473;
  --text-disabled: #9aa3b2;

  --accent: #3f5fe0;
  --accent-hover: #2f4ccc;
  --accent-fg: #ffffff;
  --accent-soft: #eceffe;
  --accent-ring: rgba(63, 95, 224, 0.28);
  /* Filled controls (primary buttons, counts, checked marks): white text on a mid-tone. In light it is
     the accent itself; dark keeps --accent pale for links and rings but fills with a deeper blue. */
  --accent-solid: #3f5fe0;
  --accent-solid-hover: #2f4ccc;
  --accent-solid-fg: #ffffff;
  /* Control outlines (inputs, selects, secondary buttons, chips, segmented tracks) meet 3:1 against the
     surface (WCAG 1.4.11); --border / --border-strong stay for dividers and decoration. */
  --border-control: #858e9d;
  --switch-off: #7c8594;

  --success: #15803d;
  --success-soft: #ecfdf3;
  --danger: #dc2626;
  --danger-text: #b91c1c;
  --danger-soft: #fef2f2;
  --danger-solid: #dc2626;
  --warning: #b45309;
  --warning-soft: #fffbeb;
  --info-soft: #eff6ff;
  --overlay: rgba(17, 24, 39, 0.45);

  --chart-grid: #eceff3;
  --chart-axis: #cfd5df;
  --chart-muted: #667080;
  --ai-accent: #b07bff;
  --brand-dark: #0f1a3f;
  --brand-blue: #3f5fe0;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  --c1: #2a78d6;
  --c2: #d95a26;
  --c3: #0f9463;
  --c4: #b87800;
  --c5: #d4497f;
  --c6: #008300;
  --c7: #4a3aa7;
  --c8: #e34948;
  --c9: #0d9488;
  --c10: #a3611c;
  --c11: #6366f1;
  --c12: #c0399a;

  --sh-1: 0 1px 2px rgba(17, 24, 39, 0.05);
  --sh-2: 0 4px 12px -2px rgba(17, 24, 39, 0.10), 0 0 0 1px rgba(17, 24, 39, 0.04);
  --sh-3: 0 16px 40px -8px rgba(17, 24, 39, 0.22);

  --font: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
  /* Marketing faces (the landing page only; app chrome stays on Inter). Self-hosted from /fonts,
     because the CSP admits no font host but our own. */
  --font-display: 'Newsreader', 'Newsreader Fallback', 'Iowan Old Style', 'Palatino Linotype', Georgia, 'Times New Roman', serif;
  --mono-web: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  /* Type scale in rem (16px root): 11 / 12 / 13 / 14 / 16 / 20 / 26 / 34 px at default zoom, and it
     follows the browser's text-size setting. */
  --fs-xs: 0.6875rem;
  --fs-sm: 0.75rem;
  --fs-base: 0.8125rem;
  --fs-md: 0.875rem;
  --fs-lg: 1rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.625rem;
  --fs-3xl: 2.125rem;
  /* Display sizes: marketing surfaces only (the landing page), never app chrome. */
  --fs-4xl: 2.75rem;
  --fs-5xl: 3.5rem;
  --fs-6xl: 4.5rem;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  /* Section rhythm for the landing page; app layouts stop at --sp-12. */
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  --dur-1: 100ms;
  --dur-2: 160ms;
  --dur-3: 240ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --sidebar-w: 240px;
  --sidebar-rail-w: 64px;
  --topbar-h: 56px;
  /* iOS standalone (viewport-fit=cover) paints under the status bar and home indicator. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --row-h: 40px;
  --cell-py: 10px;

  /* Touch sizing: controls are 36/30px for a mouse and grow to 44/40px under a coarse pointer
     (phones, touch tablets); --tap is the minimum hit area pseudo-element expansions reach for. */
  --control-h: 36px;
  --control-h-sm: 30px;
  --tap: 44px;
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --kb-inset: 0px;   /* height of the on-screen keyboard over the layout viewport, set by ui.js (iOS) */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.2;
  --lh-body: 1.5;
}

/* .lp-dark: a dark island inside the light landing page (the product mock). */
:root[data-theme="dark"], .lp-dark {
  color-scheme: dark;
  --bg: #0c0e13;
  --surface: #161a22;
  --surface-2: #1c212b;
  --surface-3: #242a36;
  --surface-overlay: #20262f;
  --border: #262c38;
  --border-strong: #353d4c;
  --text-1: #f1f3f7;
  --text-2: #cdd3dd;
  --text-3: #b0b8c4;
  --text-4: #9ca5b3;
  --text-disabled: #5d6678;
  --brand-dark: #f3f5fb;
  --brand-blue: #7c94ff;
  --accent: #94a7ff;
  --accent-hover: #a8b8ff;
  --accent-fg: #0c0e13;
  --accent-soft: #252c47;
  --accent-ring: rgba(148, 167, 255, 0.35);
  --accent-solid: #4c68e6;
  --accent-solid-hover: #4360dc;
  --accent-solid-fg: #ffffff;
  --border-control: #6b7486;
  --switch-off: #6b7486;
  --success: #4ade80;
  --success-soft: #12281c;
  --danger: #f87171;
  --danger-text: #fb8a8a;
  --danger-soft: #2d1717;
  --danger-solid: #c53030;
  --warning: #fbbf24;
  --warning-soft: #2b2411;
  --info-soft: #172033;
  --overlay: rgba(0, 0, 0, 0.6);
  --chart-grid: #242a36;
  --chart-axis: #353d4c;
  --chart-muted: #8a93a3;
  --ai-accent: #b07bff;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa3b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --c1: #3987e5;
  --c2: #d95926;
  --c3: #199e70;
  --c4: #c98500;
  --c5: #d55181;
  --c6: #008300;
  --c7: #9085e9;
  --c8: #e66767;
  --c9: #0f9f90;
  --c10: #b8732d;
  --c11: #6f7ae6;
  --c12: #d04fae;
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --sh-3: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* .lp-navy: the landing page's dark bands. The dark app palette is near-black; marketing wants
   the brand blue's own navy, so the ground and surfaces are re-pointed here and everything else
   inherits from the dark set above. */
.lp-navy {
  color-scheme: dark;
  --bg: #0f1a3f;
  --surface: #172454;
  --surface-2: #1c2b62;
  --surface-3: #263775;
  --surface-overlay: #172454;
  --border: #29397a;
  --border-strong: #3a4c94;
  --text-1: #f3f5fb;
  --text-2: #c2cbe6;
  --text-3: #98a5cf;
  --text-4: #8391bf;
  --text-disabled: #5d6b9a;
  --accent: #8fa6ff;
  --accent-hover: #a7b8ff;
  --accent-fg: #0b1330;
  --accent-soft: #24357e;
  --accent-ring: rgba(143, 166, 255, 0.35);
  /* marketing keeps its pale CTA on navy */
  --accent-solid: var(--accent);
  --accent-solid-hover: var(--accent-hover);
  --accent-solid-fg: var(--accent-fg);
  --success: #5ee09a;
  --success-soft: #16303f;
  --danger: #f87171;
  --danger-text: #f87171;
  --danger-soft: #3a1f2f;
  --warning: #ffcf66;
  --warning-soft: #33301f;
  --info-soft: #1c2b62;
  --overlay: rgba(0, 0, 0, 0.6);
  --chart-grid: #1c2b62;
  --chart-axis: #3a4c94;
  --chart-muted: #8391bf;
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --sh-2: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --sh-3: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Phone type ramp: the same rem tokens, one step larger at arm's length (12 / 13 / 15 / 16 / 17 /
   22 / 28 px). --fs-md is 16px here, which is also what keeps iOS from zooming into a focused field.
   The landing page (.lp) keeps its own tuned sizes. */
@media (max-width: 768px) {
  :root {
    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-base: 0.9375rem;
    --fs-md: 1rem;
    --fs-lg: 1.0625rem;
    --fs-xl: 1.375rem;
    --fs-2xl: 1.75rem;
  }
  .lp {
    --fs-xs: 0.6875rem;
    --fs-sm: 0.75rem;
    --fs-base: 0.8125rem;
    --fs-md: 0.875rem;
    --fs-lg: 1rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.625rem;
  }
}
@media (pointer: coarse) {
  :root { --control-h: 44px; --control-h-sm: 40px; }
  .lp { --control-h: 36px; --control-h-sm: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}

@media (prefers-contrast: more) {
  :root { --border: var(--border-strong); }
}

html[data-density="compact"] {
  --row-h: 32px;
  --cell-py: 6px;
}