/* ─────────────────────────────────────────────────────────────
   InstallerHub design tokens — "Vetted Blue".

   This file is the single source of truth for colour, type, spacing,
   radius, shadow, focus-ring and motion values shared by the board
   (this app) and the future public website (installerhubuk.com). It
   defines custom properties only — no selectors, no component rules.
   public_html/assets/board.css consumes these tokens to build the board's
   component library; the future site loads this same file and layers its
   own marketing-only additions on top (see docs/DESIGN.md).

   Based on, and cited in full in docs/DESIGN.md: Calendly, Cal.com, Dock,
   N26 and Getharvest reference styles from styles.refero.design, plus
   InstallerHub's own existing #1d7afc brand blue and house+wrench mark,
   kept unchanged as the through-line.

   Do not hand-write hex values anywhere else in this codebase — every
   other stylesheet reads colour, size and spacing through these
   properties so the board and the site never drift apart.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── Colour: surfaces ──────────────────────────────────────── */
  --ih-bg:              #FAF9F6; /* Page canvas. Warm off-white, never stark white. */
  --ih-surface:         #FFFFFF; /* Default panel: cards, tables, inputs, nav bar. */
  --ih-surface-raised:  #FEFDFB; /* Floats above the page: dropdown panels, modals, sticky header once scrolled, flash messages. Pair with --ih-shadow-md, not a border. */

  /* ── Colour: borders ───────────────────────────────────────── */
  --ih-border:          #E4E1DB; /* Decorative hairline only — card edges, table row dividers. 1.31:1 vs --ih-surface: purely decorative, exempt under WCAG 1.4.11. Never the sole cue to a control. */
  --ih-border-strong:   #878C93; /* Functional boundary wherever the border IS the only cue to a control — text inputs, selects, checkbox/radio outlines, chip resting state. 3.39:1, passes the 3:1 UI-boundary bar. */

  /* ── Colour: text ──────────────────────────────────────────── */
  --ih-text:            #152238; /* Primary text, headings, icon strokes. Ink navy, never pure black. */
  --ih-text-muted:      #55606D; /* Secondary/meta text — timestamps, helper copy, captions, empty-state copy. */

  /* ── Colour: brand vs interactive blue ────────────────────── */
  --ih-brand:           #1D7AFC; /* The real, unchanged InstallerHub blue. Logo/wordmark, large decorative headline text (24px+/700 on the site), icon fills, and non-text UI boundaries only — focus ring, active-tab underline. Only 4.01:1 on white: never body or button-label text. Governed by the 3:1 non-text/large-text threshold. */
  --ih-accent:          #0A5CD8; /* The actionable colour: filled primary buttons, links, active nav/tab text, focus rings at text-adjacent size. A deepened sibling of --ih-brand chosen so white button-label text clears 4.5:1 AA (5.94:1). */
  --ih-accent-contrast: #FFFFFF; /* Text/icon colour on any --ih-accent or --ih-danger-solid fill. */

  /* ── Colour: status ────────────────────────────────────────── */
  --ih-success:         #1B6E44; /* Success/ok text — confirmed states, passed checklist items. */
  --ih-success-bg:      #E4F3EA; /* Success badge and flash background. */
  --ih-warning:         #7A5410; /* Warning text — "needs a decision" style states. Unchanged from the previous palette; already AA. */
  --ih-warning-bg:      #FDF3E0; /* Warning badge and flash background. Unchanged. */
  --ih-danger:          #8C2F22; /* Danger text for routine, reversible negative states — a failed checklist item, a declined application. Unchanged; already AA. */
  --ih-danger-bg:       #FBE9E7; /* Danger badge and flash background. Unchanged. */
  --ih-danger-solid:    #B3261E; /* Filled background reserved for genuinely irreversible destructive buttons only — erase personal data, end membership, rotate the Make secret. Heavier than outline --ih-danger so the two "red" registers are never confused. */
  --ih-info:            #1B4D89; /* Neutral informational text — statuses that aren't success/warning/danger, e.g. "Waiting to send", "Reviewed". */
  --ih-info-bg:         #E5F0FC; /* Info badge and flash background. */

  /* ── Typography: family and weight ────────────────────────── */
  --ih-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ih-weight-regular:  400;
  --ih-weight-medium:   500; /* labels, nav, captions */
  --ih-weight-semibold: 600; /* headings, buttons, strong emphasis */
  --ih-weight-bold:     700; /* page titles, site headlines */
  --ih-weight-extrabold: 800; /* site hero only */

  /* ── Typography: board scale — tight and glanceable ───────── */
  --ih-text-caption:  13px; --ih-leading-caption: 1.4;  /* meta/timestamps, weight medium, --ih-text-muted */
  --ih-text-body:     16px; --ih-leading-body: 1.5;     /* body copy & form labels — 16px floor kept so iOS Safari does not zoom on input focus */
  --ih-text-strong:   16px; --ih-leading-strong: 1.5;   /* table-header/strong text, weight semibold */
  --ih-text-button:   16px; --ih-leading-button: 1;     /* button label, weight semibold */
  --ih-text-h3:       18px; --ih-leading-h3: 1.3;       /* card/subsection title, weight semibold */
  --ih-text-h2:       22px; --ih-leading-h2: 1.25;      /* section heading, weight bold */
  --ih-text-h1:       26px; --ih-leading-h1: 1.2;       /* page title, weight bold */

  /* ── Typography: site scale — bigger jumps for editorial confidence ─ */
  --ih-text-eyebrow:      14px; --ih-leading-eyebrow: 1.4; --ih-tracking-eyebrow: 0.04em; /* uppercase, weight semibold, set in --ih-accent (never --ih-brand — below the large-text AA threshold) */
  --ih-text-site-h3:      24px; --ih-leading-site-h3: 1.3;  /* weight bold */
  --ih-text-site-h2:      32px; --ih-leading-site-h2: 1.2;  /* weight bold */
  --ih-text-site-h1:      44px; --ih-leading-site-h1: 1.1;  /* weight extrabold */
  --ih-text-site-h1-sm:   32px; --ih-leading-site-h1-sm: 1.15; /* site h1 below 480px */

  /* ── Spacing (4px base unit) ───────────────────────────────── */
  --ih-space-1:  4px;  /* icon-to-label */
  --ih-space-2:  8px;  /* inline control gaps */
  --ih-space-3: 12px;  /* form field stacking */
  --ih-space-4: 16px;  /* card padding — the workhorse value */
  --ih-space-5: 24px;  /* gap between cards in a list */
  --ih-space-6: 32px;  /* gap between page sections on the board */
  --ih-space-7: 48px;  /* site only — hero/section gaps, never used on the board */
  --ih-space-8: 64px;  /* site only — hero/section gaps, never used on the board */

  /* ── Radius ────────────────────────────────────────────────── */
  --ih-radius-sm:   8px;   /* every button and input */
  --ih-radius-md:  12px;   /* cards, phone table-row-cards */
  --ih-radius-lg:  16px;   /* modals, dropdown panels, site feature/booking cards */
  --ih-radius-pill: 999px; /* badges and status chips only — never buttons */

  /* ── Sizing ────────────────────────────────────────────────── */
  --ih-touch: 44px; /* WCAG 2.5.5/2.5.8 minimum touch target, every button/input/nav link */

  /* ── Elevation (ink-navy tinted, not neutral black) ───────── */
  --ih-shadow-sm: 0 1px 2px rgba(21, 34, 56, .06), 0 0 0 1px rgba(21, 34, 56, .04); /* shadow-as-border, for a card that needs more separation than a hairline */
  --ih-shadow-md: 0 8px 24px rgba(21, 34, 56, .14); /* things that float above the page: sticky header once scrolled, dropdown/select panels, modals, flash messages */

  /* ── Focus ring: 2px --ih-brand with a 2px offset, as a double box-shadow ─ */
  --ih-focus-ring: 0 0 0 2px var(--ih-surface), 0 0 0 4px var(--ih-brand);

  /* ── Motion ────────────────────────────────────────────────── */
  --ih-duration-fast: 120ms;
  --ih-duration-base: 200ms;
  --ih-duration-slow: 320ms;
  --ih-ease-standard: cubic-bezier(.2, 0, 0, 1);
}