/* calculator.realestate design system: TOKENS (TD-214 B2 r1, concept A "Keypad", Dror's pick 2026-10-05).
   Source of truth for colours, type, spacing and shape. Light is the default; dark applies by the user's
   prefers-color-scheme, or by data-theme="dark" (used by the audit pages to test both themes).
   Contrast of every pair actually used is measured by checks/audit.js, not assumed (README). */

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215;
}

:root {
  /* colour: light */
  --c-bg: #F6F7F2;
  --c-surface: #FFFFFF;
  --c-text: #0E1A2B;
  --c-muted: #4A5568;
  --c-link: #1A47C9;
  --c-accent: #C8F031;        /* LIGHT: a FILL only, behind --c-on-accent text (1.22:1 on bg). Never a border, focus ring or state. */
  --c-on-accent: #0E1A2B;
  --c-ink: #0E1A2B;
  --c-border: #7A8597;        /* input / card boundaries: >= 3:1 against bg and surface */
  --c-focus: #1A47C9;
  --c-display-bg: #0E1A2B;
  --c-display-text: #C8F031;
  --c-display-muted: #C9D2DD;
  --c-display-line: #26344D;  /* decorative divider inside the display, carries no information */
  --c-key: #E9ECE4;           /* decorative key shadow, carries no information */
  --c-error: #B3261E;
  --c-btn-bg: #0E1A2B;
  --c-btn-text: #C8F031;

  /* type: Space Grotesk for display + numbers, the system UI font for body text (covers Hebrew) */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans Hebrew", sans-serif;
  /* scale 1.250 (major third), base 1rem = 16px */
  --fs-sm: 0.8rem;
  --fs-base: 1rem;
  --fs-md: 1.25rem;
  --fs-lg: 1.563rem;
  --fs-xl: 1.953rem;
  --fs-2xl: 2.441rem;
  --fs-3xl: 3.052rem;
  --lh-body: 1.6;
  --lh-tight: 1.1;

  /* space (4px grid) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* shape */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --border-w: 2px;
  --focus-w: 3px;
  --focus-offset: 3px;

  /* targets: WCAG 2.2 2.5.8 needs 24x24 CSS px; we use 44 for every control */
  --target-min: 44px;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #0B1220;
    --c-surface: #131C2E;
    --c-text: #EEF2F6;
    --c-muted: #A7B0BE;
    --c-link: #C8F031;
    --c-border: #6B778A;
    --c-focus: #C8F031;
    --c-display-bg: #05090F;
    --c-display-muted: #A7B0BE;
    --c-key: #1C2740;
    --c-error: #FFB4AB;
    --c-btn-bg: #C8F031;
    --c-btn-text: #0E1A2B;
  }
}

:root[data-theme="dark"] {
  --c-bg: #0B1220;
  --c-surface: #131C2E;
  --c-text: #EEF2F6;
  --c-muted: #A7B0BE;
  --c-link: #C8F031;
  --c-border: #6B778A;
  --c-focus: #C8F031;
  --c-display-bg: #05090F;
  --c-display-muted: #A7B0BE;
  --c-key: #1C2740;
  --c-error: #FFB4AB;
  --c-btn-bg: #C8F031;
  --c-btn-text: #0E1A2B;
}