/* ============================================================================
   Accessible Stays — Design Tokens
   ----------------------------------------------------------------------------
   Single source of truth for the brand, distilled from the brand board
   ("Accessible Stays — Brand.html", boards 1–9).

   Conventions
   - Everything is a CSS custom property on :root, so it inherits and can be
     overridden per-section.
   - Colour has two layers: PRIMITIVES (raw palette, never used directly in
     components) and SEMANTICS (roles: --color-bg, --color-text, …). Components
     must only reference the semantic layer, so dark mode is a single override.
   - Brand rules baked in: body text never below 16px; coral is never small
     text; white on teal is the primary button pairing.
   - Verified contrast (light): white on teal 7.78:1, charcoal on sand 13.29:1,
     coral-deep on sand 5.03:1, charcoal on sky 11.38:1. Dark pairings verified
     below. Re-run the checker if any hex changes.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- brand */
  --brand-name: "Accessible Stays";
  --brand-tagline: "Know before you go.";
  --brand-line: "Holidays, without the guesswork.";

  /* ============================================================ typography */

  /* One typeface for everything. Family first, system fallbacks behind it. */
  --font-sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible",
    system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Type scale (rem; root stays at the user's default so zoom works).
     Display and heading follow the board; body floor is 16px by rule. */
  --text-display: 3.25rem; /* 52px */
  --text-h1: 1.875rem;     /* 30px */
  --text-h2: 1.5rem;       /* 24px */
  --text-h3: 1.25rem;      /* 20px */
  --text-body-lg: 1.125rem;/* 18px — default body */
  --text-body: 1rem;       /* 16px — the floor */
  --text-meta: 0.875rem;   /* 14px — captions/meta only, never body prose */

  --leading-display: 1.12;
  --leading-heading: 1.2;
  --leading-body: 1.6;
  --leading-meta: 1.45;

  --tracking-display: -0.015em;
  --tracking-label: 0.1em;   /* uppercase labels */
  --tracking-eyebrow: 0.12em;/* section eyebrows */

  /* ================================================================ colour */

  /* ---- Primitives (hex straight from the board) ---- */
  --as-teal-700: #0f5c5a;  /* Deep sea teal  */
  --as-teal-800: #0c4b49;  /* hover/active   */
  --as-charcoal: #1c2b2a;  /* Charcoal green */
  --as-sand: #f7f3ec;      /* Warm sand      */
  --as-white: #ffffff;
  --as-coral-500: #e0684b; /* Sunset coral   */
  --as-coral-700: #b4432a; /* Coral deep     */
  --as-sky: #cfe6f2;       /* Soft sky       */
  --as-muted: #3a4847;     /* secondary text */
  --as-sand-line: #e4ddd0; /* subtle border  */
  --as-grey-700: #767163;  /* strong border  */
  --as-charcoal-deep: #121b1a;
  --as-surface-dark: #1c2b2a;
  --as-surface-dark-2: #243634;
  --as-muted-dark: #c3ccc8;
  --as-teal-300: #7fc3bc;  /* link on dark   */
  --as-teal-200: #a9d9d3;
  --as-coral-300: #f0876c; /* accent on dark */

  /* ---- Semantics: light theme (default) ---- */
  --color-bg: var(--as-sand);
  --color-surface: var(--as-white);
  --color-surface-2: var(--as-sky);       /* info panels, access chips */
  --color-surface-sunken: #f1ece2;

  --color-text: var(--as-charcoal);       /* body */
  --color-text-muted: var(--as-muted);    /* secondary */
  --color-heading: var(--as-charcoal);

  --color-link: var(--as-teal-700);
  --color-link-hover: var(--as-charcoal);
  --color-link-visited: var(--as-teal-800);

  --color-accent: var(--as-coral-500);         /* marks/icons/large only */
  --color-accent-strong: var(--as-coral-700);  /* text-safe coral (5.0:1) */

  --color-border: var(--as-sand-line);         /* decorative */
  --color-border-strong: var(--as-grey-700);   /* inputs/controls, >=3:1 */

  --color-chip-bg: var(--as-sky);
  --color-chip-text: var(--as-teal-700);
  --color-chip-border: #b9d8ea;

  /* Primary action: white on teal (7.78:1) */
  --color-action: var(--as-teal-700);
  --color-action-hover: var(--as-teal-800);
  --color-action-text: var(--as-white);

  /* Focus ring — two-tone so it is visible on sand AND teal AND dark.
     A 3px sand ring sits on a 3px charcoal ring; one always contrasts. */
  --color-focus-inner: var(--as-sand);
  --color-focus-outer: var(--as-charcoal);
  --focus-width: 3px;
  --focus-offset: 0px;

  /* Selection */
  --color-selection-bg: var(--as-coral-500);
  --color-selection-text: var(--as-charcoal);

  /* Trust badges used on listings (light) */
  --badge-checked-bg: var(--as-teal-700);
  --badge-checked-text: var(--as-white);
  --badge-visited-bg: var(--as-coral-700);
  --badge-visited-text: var(--as-white);
  --badge-self-bg: var(--as-sky);
  --badge-self-text: var(--as-charcoal);

  /* ============================================================== spacing */
  --space-1: 0.25rem; /*  4 */
  --space-2: 0.5rem;  /*  8 */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem;    /* 16 */
  --space-5: 1.25rem; /* 20 */
  --space-6: 1.5rem;  /* 24 */
  --space-8: 2rem;    /* 32 */
  --space-10: 2.5rem; /* 40 */
  --space-12: 3rem;   /* 48 */
  --space-16: 4rem;   /* 64 */
  --space-18: 4.5rem; /* 72 — board gutter */
  --space-24: 6rem;   /* 96 */

  /* ================================================================ radius */
  --radius-xs: 0.375rem; /*  6 */
  --radius-sm: 0.5rem;   /*  8 */
  --radius-md: 0.75rem;  /* 12 — cards */
  --radius-lg: 1rem;     /* 16 — panels */
  --radius-pill: 999px;

  /* ============================================================== elevation */
  --shadow-sm: 0 1px 3px rgba(28, 43, 42, 0.12);
  --shadow-md: 0 2px 8px rgba(28, 43, 42, 0.14);
  --shadow-lg: 0 8px 24px rgba(28, 43, 42, 0.16);

  /* =============================================================== layout */
  /* Breakpoints can't live in custom properties (media queries need literals).
     Documented scale — keep in sync across the theme:
       sm 480px · md 768px · lg 1024px · xl 1280px · 2xl 1440px */
  --content-max: 90rem;      /* 1440 — board canvas */
  --prose-max: 42rem;        /* readable measure for body copy */
  --gutter: clamp(1rem, 5vw, 4.5rem);
  --tap-target: 2.75rem;     /* 44px minimum touch target */

  /* =============================================================== motion */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* ============================================================== z-index */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-skip-link: 999;
}

/* ============================================================================
   Dark theme
   Two hooks: an explicit [data-theme] for a user toggle, and the OS setting as
   the default when no explicit choice is set. Verified pairings: text 15.86:1,
   muted 10.68:1, link 8.71:1, accent 7.00:1 on --color-bg.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg: var(--as-charcoal-deep);
    --color-surface: var(--as-surface-dark);
    --color-surface-2: var(--as-surface-dark-2);
    --color-surface-sunken: #0d1514;

    --color-text: var(--as-sand);
    --color-text-muted: var(--as-muted-dark);
    --color-heading: var(--as-sand);

    --color-link: var(--as-teal-300);
    --color-link-hover: var(--as-teal-200);
    --color-link-visited: var(--as-teal-200);

    --color-accent: var(--as-coral-300);
    --color-accent-strong: var(--as-coral-300);

    --color-border: #34433f;
    --color-border-strong: #647873;

    --color-chip-bg: var(--as-surface-dark-2);
    --color-chip-text: var(--as-teal-300);
    --color-chip-border: #34433f;

    --color-action: var(--as-teal-300);
    --color-action-hover: var(--as-teal-200);
    --color-action-text: var(--as-charcoal-deep);

    --color-focus-inner: var(--as-sand);
    --color-focus-outer: var(--as-charcoal-deep);

    --color-selection-bg: var(--as-coral-300);
    --color-selection-text: var(--as-charcoal-deep);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
  }
}

/* Explicit toggle wins in both directions. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: var(--as-charcoal-deep);
  --color-surface: var(--as-surface-dark);
  --color-surface-2: var(--as-surface-dark-2);
  --color-surface-sunken: #0d1514;

  --color-text: var(--as-sand);
  --color-text-muted: var(--as-muted-dark);
  --color-heading: var(--as-sand);

  --color-link: var(--as-teal-300);
  --color-link-hover: var(--as-teal-200);
  --color-link-visited: var(--as-teal-200);

  --color-accent: var(--as-coral-300);
  --color-accent-strong: var(--as-coral-300);

  --color-border: #34433f;
  --color-border-strong: #647873;

  --color-chip-bg: var(--as-surface-dark-2);
  --color-chip-text: var(--as-teal-300);
  --color-chip-border: #34433f;

  --color-action: var(--as-teal-300);
  --color-action-hover: var(--as-teal-200);
  --color-action-text: var(--as-charcoal-deep);

  --color-focus-inner: var(--as-sand);
  --color-focus-outer: var(--as-charcoal-deep);

  --color-selection-bg: var(--as-coral-300);
  --color-selection-text: var(--as-charcoal-deep);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
}

:root[data-theme="light"] {
  color-scheme: light;
}