/*
 * DoorSuper design tokens (#60, restyled for direction D "Front office" in #90; see
 * docs/design/direction.md). Every value the Owner Screen's components use is defined here,
 * once. Colors are light-dark() pairs: the page follows the system setting, and any element
 * with data-theme="light" or data-theme="dark" pins itself and everything inside it.
 *
 * One font, bundled, never fetched from elsewhere: Figtree (The Figtree Project Authors),
 * SIL Open Font License 1.1. Latin subset from the npm package @fontsource/figtree, version
 * 5.3.0. License: fonts/LICENSE-Figtree.txt. Figures are Figtree's tabular figures, not a
 * monospace.
 */

@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/figtree-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/figtree-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/figtree-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/figtree-latin-700-normal.woff2") format("woff2"); }

:root { color-scheme: light dark; }
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
/* A pinned subtree resolves its own colors; inherited ones were resolved for the page's scheme. */
[data-theme] { color: var(--color-ink); background-color: var(--color-bg); }

:root {
  /* ---------- type: Figtree throughout, headings at 600, text at 400 to 500 */
  --font-ui: "Figtree", "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-head: var(--font-ui);
  --font-num: var(--font-ui); /* with tabular figures: see .ds-num */

  /* The scale: size / line height. Body is 16px so iOS never zooms an input. */
  --type-xs: 13px;   --type-xs-lh: 1.35;   /* section labels, times, counts */
  --type-sm: 14px;   --type-sm-lh: 1.45;   /* a row's second line, hints, notes */
  --type-md: 16px;   --type-md-lh: 1.5;    /* body, rows, inputs */
  --type-btn: 15px;                        /* buttons and nav items */
  --type-lg: 17px;   --type-lg-lh: 1.35;   /* a property's name, a decision's title */
  --type-xl: 21px;   --type-xl-lh: 1.25;   /* a section's summary line, sheet title */
  --type-2xl: 28px;  --type-2xl-lh: 1.15;  /* page heading */
  --type-display: 44px; --type-display-lh: 1.1; /* the Balance */
  --type-line: 19px;       /* a Home section's one-line summary */
  --type-balance-word: 18px; /* "owed" beside the Balance */
  --type-wordmark: 19px;
  --type-tab: 12px;        /* a phone tab's label under its icon */
  --type-count: 12px;      /* the number in a count */
  --type-pill: 12px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --track-caps: 0.06em;    /* the small uppercase section labels */
  --track-tight: -0.015em; /* page headings and the Balance */

  /* ---------- spacing: a 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;
  --space-12: 48px;
  --gutter: var(--space-4);

  /* ---------- size */
  --tap-min: 44px;        /* nothing tappable is shorter */
  --control-height: 46px; /* buttons and inputs */
  --bar-height: 56px;     /* the phone's top bar */
  --tab-height: 58px;     /* the phone's bottom bar */
  --rail-width: 248px;    /* the left rail, 880px and up */
  --row-min: 52px;        /* a list row */
  --rule-width: 1px;
  --border-width: 1px;
  --focus-width: 2px;
  --focus-offset: 2px;

  /* ---------- radius: 8px controls, 12px panels */
  --radius-none: 0;
  --radius-control: 8px;
  --radius-box: 12px;
  --radius-sheet: 16px;
  --radius-pill: 999px;

  /* ---------- elevation: one soft shadow, on decisions and sheets only */
  --elevation-flat: none;
  --elevation-raised: 0 1px 2px light-dark(rgb(20 24 28 / 0.06), rgb(0 0 0 / 0.3)), 0 8px 24px light-dark(rgb(20 24 28 / 0.1), rgb(0 0 0 / 0.5));
  --elevation-seg: 0 1px 2px rgb(0 0 0 / 0.12);
  --layer-bar: 5;
  --layer-toast: 30;
  --layer-dialog: 40;
  --scrim: rgb(0 0 0 / 0.4);

  /* ---------- motion */
  --motion-fast: 120ms;
  --motion-base: 200ms;

  /* ---------- color: light-dark(light, dark). Every text pair meets WCAG AA (4.5:1);
     focus and control edges meet 3:1 (test/owner-ui.test.ts checks). */
  --color-bg: light-dark(#f6f6f3, #111315);          /* warm off-white page */
  --color-surface: light-dark(#ffffff, #181b1f);     /* white panels */
  --color-sunk: light-dark(#efefeb, #1d2025);        /* a panel's header, the segmented filter's track */
  --color-input: light-dark(#ffffff, #181b1f);
  --color-hover: light-dark(#efefeb, #22262b);
  --color-ink: light-dark(#1a1d21, #e9ebee);
  --color-muted: light-dark(#5b6066, #a2a8af);
  --color-rule: light-dark(#e2e2dc, #2a2e33);        /* dividers and panel edges */
  --color-rule-strong: light-dark(#c9c9c1, #3b4047); /* outlined buttons, dashed slots */
  --color-control-edge: light-dark(#868a8f, #6e747b); /* an input's edge: 3:1 on every background */
  --color-link: light-dark(#1c5490, #9dc4ef);
  --color-focus: light-dark(#1f5a96, #8cb9e8);
  --color-skeleton: light-dark(#e8e8e3, #23272c);

  /* Harbor blue: the one main action, links, the current nav item. Nothing else. */
  --color-primary: light-dark(#1f5a96, #8cb9e8);
  --color-primary-hover: light-dark(#194b7e, #a5c9ef);
  --color-on-primary: light-dark(#ffffff, #0d1926);
  --color-primary-edge: light-dark(#1f5a96, #8cb9e8);
  --color-accent-soft: light-dark(#e7eff8, #1b2a3b); /* the current nav item, a door just added */

  /* Status: one meaning each, always next to a word. */
  --color-owed: light-dark(#ae3a1b, #f29c7e);      /* money a Tenant owes: brick */
  --color-owed-soft: light-dark(#fbefea, #3a211a);
  --color-paid: light-dark(#286a3b, #88c99c);      /* paid up, confirmed: green with a check */
  --color-reported: light-dark(#7a4d00, #e4bd6a);  /* a Reported Payment: amber, a clock, a dashed edge */
  --color-reported-soft: light-dark(#fdf6e7, #2e2615);
  --color-held: light-dark(#46607a, #a3b8cc);      /* on hold: a late fee held, a deposit held */
  --color-urgent: light-dark(#a8141b, #ff8a80);    /* a real problem: an emergency, a failed save */
  --color-on-urgent: light-dark(#ffffff, #1a0a0a);

  /* The phone's top and bottom bars and the rail are white panels like the rest. */
  --color-bar: light-dark(#ffffff, #181b1f);
  --color-on-bar: light-dark(#1a1d21, #e9ebee);
  --color-on-bar-muted: light-dark(#5b6066, #a2a8af);
  --color-bar-focus: light-dark(#1f5a96, #8cb9e8);
}

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