/*
 * Parkwise design tokens: the single source of colour, type, radius and
 * elevation for every workspace. Load this file before any other stylesheet.
 *
 * Use the semantic names (surface, ink, accent, ok/warn/danger…) rather than
 * raw colours, so light and dark themes stay in step automatically.
 * Force a theme with <html data-theme="light|dark">; otherwise it follows the OS.
 */

:root {
  color-scheme: light dark;

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 14px;
  --text-base: 15px;
  --text-lg: 18px;
  --text-xl: 22px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;

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

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --duration: 160ms;

  /* ---------- Light theme ---------- */
  --bg: #f4f6f2;
  --surface: #ffffff;
  --surface-sunken: #f7f9f4;
  --surface-muted: #edf3e8;
  --surface-hover: #f2f7ef;
  --field: #fcfdfb;
  --glass: rgb(255 255 255 / .92);

  --line: #dde6dd;
  --line-subtle: #ecf1e8;
  --line-strong: #bccfbd;

  --ink: #153c35;
  --ink-2: #3f5a4f;
  --muted: #5d6f64;

  --accent: #256651;
  --accent-hover: #1d5546;
  --on-accent: #ffffff;
  --accent-soft: #e5efdb;
  --accent-soft-ink: #2a5f48;
  --focus: #4f9a6d;

  --inverse: #153d36;
  --inverse-2: #24514a;
  --inverse-ink: #ffffff;
  --inverse-muted: #b2cabe;
  --inverse-accent: #d5eabb;
  --inverse-accent-ink: #1f4637;

  --ok-bg: #e3f1dc;
  --ok-ink: #2e6a45;
  --warn-bg: #fff2d4;
  --warn-ink: #7f5b1d;
  --attention-bg: #fdeee3;
  --attention-ink: #a14f28;
  --danger-bg: #fbe8e0;
  --danger-ink: #9a4630;
  --info-bg: #e5eff9;
  --info-ink: #2b618d;
  --review-bg: #efebfa;
  --review-ink: #66518f;
  --neutral-bg: #edf1ea;
  --neutral-ink: #56695d;

  --chart-parked: #6b9dbd;
  --chart-covered: #4cab8e;
  --chart-leakage: #d08a61;
  --chart-review: #9b8abd;
  --chart-pending: #dfc36a;

  --shadow-sm: 0 1px 2px rgb(21 60 53 / .06), 0 2px 6px rgb(21 60 53 / .05);
  --shadow-lg: 0 24px 80px rgb(16 45 41 / .22);
  --backdrop: rgb(16 45 41 / .42);
}

/* ---------- Dark theme (system preference, unless forced light) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1513;
    --surface: #151f1c;
    --surface-sunken: #111a17;
    --surface-muted: #1c2925;
    --surface-hover: #1a2622;
    --field: #111a17;
    --glass: rgb(21 31 28 / .9);

    --line: #263530;
    --line-subtle: #1e2b27;
    --line-strong: #3a4e46;

    --ink: #e4ede8;
    --ink-2: #c3d2c9;
    --muted: #93a79c;

    --accent: #7fcfa6;
    --accent-hover: #9adcb9;
    --on-accent: #0c2219;
    --accent-soft: #1d3a2e;
    --accent-soft-ink: #a9dcc0;
    --focus: #7fcfa6;

    --inverse: #13241f;
    --inverse-2: #1f3a32;
    --inverse-ink: #eef5f1;
    --inverse-muted: #9fb7ab;
    --inverse-accent: #cfe6b0;
    --inverse-accent-ink: #1b3b2e;

    --ok-bg: #1b3526;
    --ok-ink: #a1d6ac;
    --warn-bg: #372d15;
    --warn-ink: #e9c77c;
    --attention-bg: #3b2519;
    --attention-ink: #f1a577;
    --danger-bg: #3c211b;
    --danger-ink: #f0a48c;
    --info-bg: #182c3d;
    --info-ink: #9cc6ea;
    --review-bg: #27223d;
    --review-ink: #c4b5ec;
    --neutral-bg: #1f2b27;
    --neutral-ink: #abbab1;

    --chart-parked: #7fb0cf;
    --chart-covered: #5cbf9f;
    --chart-leakage: #e39a6f;
    --chart-review: #ad9dd2;
    --chart-pending: #e3c972;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / .3);
    --shadow-lg: 0 24px 80px rgb(0 0 0 / .55);
    --backdrop: rgb(0 0 0 / .6);
  }
}

/* Same dark values, applied when a page forces dark explicitly. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1513;
  --surface: #151f1c;
  --surface-sunken: #111a17;
  --surface-muted: #1c2925;
  --surface-hover: #1a2622;
  --field: #111a17;
  --glass: rgb(21 31 28 / .9);
  --line: #263530;
  --line-subtle: #1e2b27;
  --line-strong: #3a4e46;
  --ink: #e4ede8;
  --ink-2: #c3d2c9;
  --muted: #93a79c;
  --accent: #7fcfa6;
  --accent-hover: #9adcb9;
  --on-accent: #0c2219;
  --accent-soft: #1d3a2e;
  --accent-soft-ink: #a9dcc0;
  --focus: #7fcfa6;
  --inverse: #13241f;
  --inverse-2: #1f3a32;
  --inverse-ink: #eef5f1;
  --inverse-muted: #9fb7ab;
  --inverse-accent: #cfe6b0;
  --inverse-accent-ink: #1b3b2e;
  --ok-bg: #1b3526;
  --ok-ink: #a1d6ac;
  --warn-bg: #372d15;
  --warn-ink: #e9c77c;
  --attention-bg: #3b2519;
  --attention-ink: #f1a577;
  --danger-bg: #3c211b;
  --danger-ink: #f0a48c;
  --info-bg: #182c3d;
  --info-ink: #9cc6ea;
  --review-bg: #27223d;
  --review-ink: #c4b5ec;
  --neutral-bg: #1f2b27;
  --neutral-ink: #abbab1;
  --chart-parked: #7fb0cf;
  --chart-covered: #5cbf9f;
  --chart-leakage: #e39a6f;
  --chart-review: #ad9dd2;
  --chart-pending: #e3c972;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .3);
  --shadow-lg: 0 24px 80px rgb(0 0 0 / .55);
  --backdrop: rgb(0 0 0 / .6);
}
:root[data-theme="light"] { color-scheme: light; }

/* ---------- Shared base ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

dialog {
  background: var(--surface);
  color: var(--ink);
}

::selection { background: var(--accent-soft); color: var(--ink); }

/* Money and counts line up in columns. */
td, th, .value, .amount, .money-big, .stat strong, .line b, .money-end,
.pill-number, .receipt dd, .tenant b, .tenant strong {
  font-variant-numeric: tabular-nums;
}

/* Gentle, consistent transitions on interactive surfaces. */
button, a, input, select, textarea, .card, .workspace-grid > button {
  transition: background-color var(--duration) var(--ease),
              border-color var(--duration) var(--ease),
              color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease),
              transform var(--duration) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}