/* ACOCOS /pos/ design tokens — the only place a colour, spacing, or radius
   value is allowed to be a literal. Every other stylesheet and template
   reads these as var(--x); never hardcode a hex value elsewhere.
   Palette: the original neutral/blue scheme. paid/partial/debt stay
   green/amber/red in both themes; --accent must never stand in for a status
   colour. Every pairing below was checked against WCAG AA (4.5:1 text, 3:1
   large text/UI) with a contrast script before being committed. */

@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.2bf3d951bf9d.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- colour: light (default) --- */
  --page: #F5F6F7;
  --surface: #FFFFFF;
  --surface-sunken: #EDEFF1;
  --border: #E3E6E9;
  --text: #14181C;
  --text-2: #5B6670;
  /* darkened from #8A939C (~3.1:1, failed WCAG AA) to ~4.6-5:1 on --page/
     --surface so tertiary text — chart axis labels, captions, hints, empty
     states, placeholders — clears AA. Still a step lighter than --text-2. */
  --text-3: #66707A;
  --accent: #2C6FB5;
  --accent-bg: #E8F0F9;
  --accent-2: #D3E4F3; /* soft accent tint for tile placeholder gradients */
  --paid: #1D7A4F;
  --paid-bg: #E4F3EB;
  /* darker amber than the original #B26B00 so text passes WCAG AA (>=4.5:1) on
     --surface — the one semantic colour that failed on white. */
  --partial: #8A5300;
  --partial-bg: #FBF0DE;
  --debt: #B3271F;
  --debt-bg: #FAE9E8;
  --border-strong: #C7CDD2; /* tooltip guide line, slightly stronger than --border */
  --rule: #14181C; /* heavy 2px structural borders — header, client chip, money-bar */

  /* Categorical ramp for charts — a monochrome accent scale, NOT a rainbow:
     payment methods carry no valence, and a red/green set would collide with
     --paid/--partial/--debt. Derived from --accent + --surface, so it re-mixes
     per theme automatically (color-mix resolves at use time). */
  --cat-1: var(--accent);
  --cat-2: color-mix(in srgb, var(--accent) 72%, var(--surface));
  --cat-3: color-mix(in srgb, var(--accent) 48%, var(--surface));
  --cat-4: color-mix(in srgb, var(--accent) 28%, var(--surface));

  /* --- type --- */
  --font: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

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

  /* --- radius --- */
  --radius-card: 6px;
  --radius-control: 6px;

  /* --- misc --- */
  --tap-min: 44px;
  --nav-height: 56px; /* set at :root, not .bottom-nav — .money-bar is a
    sibling subtree and custom properties don't cross sibling boundaries */
  --safe-bottom: env(safe-area-inset-bottom, 0px); /* iOS home-indicator gutter —
    added on top of --nav-height wherever something is fixed to the bottom edge */
  --shadow: 0 1px 3px rgba(20, 24, 28, 0.08);
  /* text/icon colour on top of a filled --accent (or paid/partial/debt)
     background — white reads on the light theme's saturated fills, but the
     dark theme's fills are pale/bright, so dark text is what clears AA there
     (see html[data-theme="dark"] below). */
  --on-accent: #FFFFFF;

  /* --- motion --- one shared easing so /pos/ and the dashboard feel alike.
     /pos/ is opened dozens of times a day with a client waiting, so its
     durations stay short (≤120ms); the dashboard can afford more. */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-pos: 120ms;
}

/* Follow the OS by default when no explicit choice has been made. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --page: #14181C;
    --surface: #1C2126;
    --surface-sunken: #23292F;
    --border: #2C333A;
    --text: #EEF1F4;
    --text-2: #9AA5B0;
    --text-3: #8B95A0;
    --accent: #6BA8E0;
    --accent-bg: #1B2C3D;
    --accent-2: #26374A;
    --paid: #4FBF8B;
    --paid-bg: #142C22;
    --partial: #E5A245;
    --partial-bg: #2E2416;
    --debt: #E86A62;
    --debt-bg: #2F1917;
    --border-strong: #3C444C;
    --rule: #EEF1F4;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    --on-accent: #14181C;
  }
}

/* Explicit choice, stored in a cookie and rendered server-side — see
   apps/core/views.py::set_theme. Wins over the OS preference either way. */
html[data-theme="dark"] {
  --page: #14181C;
  --surface: #1C2126;
  --surface-sunken: #23292F;
  --border: #2C333A;
  --text: #EEF1F4;
  --text-2: #9AA5B0;
  --text-3: #8B95A0;
  --accent: #6BA8E0;
  --accent-bg: #1B2C3D;
  --accent-2: #26374A;
  --paid: #4FBF8B;
  --paid-bg: #142C22;
  --partial: #E5A245;
  --partial-bg: #2E2416;
  --debt: #E86A62;
  --debt-bg: #2F1917;
  --border-strong: #3C444C;
  --rule: #EEF1F4;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --on-accent: #14181C;
}

html[data-theme="light"] {
  --page: #F5F6F7;
  --surface: #FFFFFF;
  --surface-sunken: #EDEFF1;
  --border: #E3E6E9;
  --text: #14181C;
  --text-2: #5B6670;
  --text-3: #66707A;
  --accent: #2C6FB5;
  --accent-bg: #E8F0F9;
  --accent-2: #D3E4F3;
  --paid: #1D7A4F;
  --paid-bg: #E4F3EB;
  --partial: #8A5300;
  --partial-bg: #FBF0DE;
  --debt: #B3271F;
  --debt-bg: #FAE9E8;
  --border-strong: #C7CDD2;
  --rule: #14181C;
  --shadow: 0 1px 3px rgba(20, 24, 28, 0.08);
  --on-accent: #FFFFFF;
}