/* bookhome.ge design tokens, v0.3 (2026-10-06).
   Source: docs/design/ux-review.md §D. The UX review computed the contrast ratios noted below;
   keep them at WCAG 2.2 AA (4.5:1 text, 3:1 UI) when changing any value. */

:root {
  /* Colour: brand and text */
  --primary: #1F5F5B;          /* pine; white text 7.4:1 */
  --primary-hover: #174A47;
  --primary-soft: #E3F0EE;
  --ink-1: #1F2328;            /* 15.8:1 */
  --ink-2: #4A5058;            /* 8.1:1 */
  --ink-3: #646A71;            /* meta text; 5.5:1 on white, 5.0:1 on --sunken */
  --on-primary: #FFFFFF;

  /* Colour: surfaces and lines */
  --page: #FAF8F5;
  --card: #FFFFFF;
  --sunken: #F4F4F2;
  --border-input: #838990;     /* controls; 3.5:1 on white, >= 3.0:1 on every tinted background (v0.2) */
  --line: #E4E4E0;             /* decorative dividers only */

  /* Colour: status (ink on its own background) */
  --success-ink: #1E6B3A;  --success-bg: #E6F4EA;   /* 5.7:1 */
  --warning-ink: #8A4B00;  --warning-bg: #FFF3DC;   /* 6.2:1 */
  --danger-ink:  #A3262A;  --danger-bg:  #FDECEC;   /* 6.4:1; white on --danger-ink 7.3:1 */
  --danger-hover: #8A1F23;                          /* pressed/hover for destructive buttons */
  --info-ink:    #1F4E8C;  --info-bg:    #E8F0FB;   /* 7.2:1 */

  /* Colour: booking sources (always paired with a letter or glyph, never colour alone) */
  --src-direct: var(--primary);   /* D */
  --src-manual: #4A5058;          /* M */
  --src-airbnb: #C13550;          /* A; white text 5.4:1 */
  --src-booking: #003580;         /* B; white text 11.5:1 */

  /* Focus: 2 px white offset + 2 px primary ring; invert on dark surfaces */
  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--primary);
  --focus-ring-inverse: 0 0 0 2px var(--ink-1), 0 0 0 4px #FFFFFF;

  /* Overlays and dark surfaces (v0.2) */
  --scrim: rgba(31, 35, 40, 0.5);                   /* behind dialogs and sheets */
  --shadow-overlay: 0 8px 24px rgba(31, 35, 40, 0.18);
  --surface-inverse: #1F2328;                       /* photo viewer, snackbars */
  --on-inverse: #FFFFFF;

  /* Map (v0.2): approximate-area circle, D6 */
  --map-area-fill: rgba(227, 240, 238, 0.6);       /* --primary-soft at 60% */
  --map-area-stroke: var(--primary);

  /* Type: Noto Sans + Noto Sans Georgian, weights 400 and 700 only, no italics, never uppercase */
  --font-sans: "Noto Sans", "Noto Sans Georgian", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* system fonts; nothing extra to self-host */
  --weight-regular: 400;
  --weight-bold: 700;

  /* Type scale, mobile (size / line height) */
  --text-display: 28px;  --leading-display: 36px;
  --text-h1: 24px;       --leading-h1: 32px;
  --text-h2: 20px;       --leading-h2: 28px;
  --text-h3: 17px;       --leading-h3: 24px;   /* bold */
  --text-body: 16px;     --leading-body: 24px; /* ru, ka: 26px */
  --text-small: 14px;    --leading-small: 20px; /* ka: 22px */
  --text-label: 13px;    --leading-label: 18px; /* smallest size for words */
  --text-cal: 12px;      --leading-cal: 16px;   /* digits only */
  --text-amount: 32px;   --leading-amount: 40px; /* tabular figures */
  --text-mono: 15px;     --leading-mono: 22px;   /* addresses, codes */

  /* Spacing scale */
  --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; --space-16: 64px;
  --page-pad: 16px;            /* 24px from 768, 48px from 1200 */

  /* Radii */
  --radius-control: 8px;       /* inputs, buttons */
  --radius-card: 12px;
  --radius-sheet: 16px;        /* bottom-sheet top corners */
  --radius-pill: 999px;        /* chips */

  /* Targets */
  --target-min: 44px;          /* primary actions, picker days, calendar cells; never below 24px */

  /* Motion */
  --dur-press: 100ms;
  --dur-fade: 200ms;
  --dur-sheet-in: 250ms;
  --dur-sheet-out: 200ms;
  --ease: cubic-bezier(.2, 0, 0, 1);
}

/* Breakpoints: 360 · 600 · 768 (two-month picker) · 1024 (sidebar) · 1200 (max width) */
@media (min-width: 768px) {
  :root {
    --page-pad: 24px;
    --text-display: 36px; --leading-display: 44px;
    --text-h1: 28px;      --leading-h1: 36px;
    --text-h2: 22px;      --leading-h2: 30px;
  }
}
@media (min-width: 1200px) {
  :root { --page-pad: 48px; }
}

:lang(ru), :lang(ka) { --leading-body: 26px; }
:lang(ka) { --leading-small: 22px; }

/* Reduced motion: no movement; opacity fades stay (ux-review §D, Motion) */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-press: 0ms; --dur-sheet-in: 0ms; --dur-sheet-out: 0ms; }
}

/* v0.3 additions (2026-10-06). Additions only: no value above changes. */
:root {
  /* Shell (v0.3): the owner dashboard frame, from the owner-shell canvas (owner-shell-system/project/bh.css).
     Slots stack top to bottom: environment strip, act-as banner, app bar. Heights are minimums where
     text can wrap; the tab bar and the action bar add the safe-area inset. */
  --shell-env-h: 28px;               /* S-04 environment strip */
  --shell-actas-h: 56px;             /* A-16 act-as banner */
  --shell-appbar-h: 56px;            /* phone app bar, below 1024px */
  --shell-tabbar-h: 64px;            /* phone tab bar, below 1024px; 5 tabs of 72px at 360px */
  --shell-actionbar-h: 72px;         /* sticky action (save) bar on task pages */
  --shell-sidebar-w: 256px;          /* desktop sidebar, from 1024px; replaces app bar and tab bar */
  --shell-content-max: 960px;        /* dashboard content, left-aligned */
  --shell-content-max-wide: 1200px;  /* wide pages: calendars, grids, tables */

  /* Controls and states (v0.3): requests from the area designers */
  --disabled-bg: #E4E4E0;            /* disabled buttons; --disabled-ink on it 6.4:1 */
  --disabled-ink: #4A5058;
  --neutral-bg: #F4F4F2;             /* neutral chips; --neutral-ink on it 7.4:1; draw a 1px --line edge */
  --neutral-ink: #4A5058;
  --hatch-unavailable: #EDEDEA;      /* unavailable-day hatch; --ink-3 digits keep 4.7:1 over it (4.3:1 over --line) */
  --target-compact: 40px;            /* dense desktop admin rows only; never on phones, never for the main action */
  --text-code: 24px;     --leading-code: 32px;   /* door, lockbox and alarm codes: --font-mono, bold */
  --radius-inline: 4px;              /* marks inside running text: the masked span */
}

/* Email dark (proposed, needs sign-off): dark-mode emails only, never in the product.
   Text 14.9:1 on the page and 12.8:1 on blocks; links 8.7:1 and 7.5:1; button labels in
   --email-dark-page on --email-dark-primary 8.7:1. */
:root {
  --email-dark-page: #161A1D;        /* background */
  --email-dark-card: #22272B;        /* blocks */
  --email-dark-ink: #ECEDEA;         /* text */
  --email-dark-primary: #7CC4BB;     /* links and buttons */
}