/* ==========================================================================
   Bambo Booking — design tokens  (tokens.css)
   Load order: tokens.css -> components.css -> (optional) tenant <style>.
   - Soft, light, neutral base. System font stack, no webfont, no CDN.
   - Per-business branding: the SERVER emits ONE small block (see bottom of
     this file / contrast.md) that overrides only the --brand-* inputs.
     Everything else derives from them in CSS.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- 1. Neutrals (all AA-checked, see contrast.md) ------------- */
  --n-0:   #ffffff;   /* surface: cards, inputs, modals                     */
  --n-50:  #f7f9f8;   /* page background (soft, slightly green-grey)        */
  --n-100: #eef2f1;   /* subtle fills: table header, disabled, skeleton     */
  --n-200: #dfe5e4;   /* decorative dividers (NOT for control boundaries)   */
  --n-400: #7a8a8e;   /* control boundaries (>= 3:1 on white) — inputs      */
  --n-600: #4a5b60;   /* secondary text (>= 4.5:1 on n-0, n-50, n-100)      */
  --n-900: #1c272b;   /* primary text                                       */

  --bg:            var(--n-50);
  --surface:       var(--n-0);
  --surface-muted: var(--n-100);
  --text:          var(--n-900);
  --text-muted:    var(--n-600);
  --border:        var(--n-200);   /* decorative only                        */
  --border-strong: var(--n-400);   /* inputs, checkboxes, radios, slot cells */

  /* ---------- 2. Status colors (text on tint >= 4.5:1) ------------------ */
  /* Never rely on color alone: components always add an icon/word.         */
  --success-600: #1b6b3a;  --success-tint: #e6f4ea;
  --warning-600: #7a4f00;  --warning-tint: #fff3d6;
  --danger-600:  #b3261e;  --danger-tint:  #fdeceb;
  --info-600:    #1c5a8a;  --info-tint:    #e5f1fa;

  /* ---------- 3. Focus ring -------------------------------------------- */
  /* Fixed dark blue, NOT tenant-colored: guarantees >= 3:1 against white,
     n-50 and any brand fill it touches (ring sits 2px off the element).    */
  --focus-color:  #0b3d91;
  --focus-width:  3px;
  --focus-offset: 2px;

  /* ---------- 4. Typography -------------------------------------------- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Scale ~1.2 (minor third), fluid on the top steps. Base 16px.           */
  --fs-xs:   0.8125rem;                                   /* 13 captions    */
  --fs-sm:   0.9375rem;                                   /* 15 help, meta  */
  --fs-base: 1rem;                                        /* 16 body        */
  --fs-md:   1.125rem;                                    /* 18 lead        */
  --fs-lg:   clamp(1.25rem, 1.15rem + 0.5vw, 1.4375rem);  /* h3             */
  --fs-xl:   clamp(1.5rem, 1.3rem + 1vw, 1.875rem);       /* h2             */
  --fs-2xl:  clamp(1.875rem, 1.5rem + 1.9vw, 2.5rem);     /* h1             */
  --lh-tight: 1.25;
  --lh-base:  1.55;
  --fw-regular: 400;
  --fw-medium:  600;   /* system fonts: 600 renders reliably                */
  --fw-bold:    700;
  --measure: 65ch;     /* max line length for paragraphs                    */

  /* ---------- 5. Spacing (4px base) ------------------------------------ */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4rem;

  /* ---------- 6. Radii, shadows, sizing -------------------------------- */
  --radius-sm:   6px;   /* badges, inputs inner                             */
  --radius-md:   10px;  /* buttons, inputs, slots                           */
  --radius-lg:   16px;  /* cards, modals                                    */
  --radius-pill: 999px; /* chips, progress                                  */

  /* Soft shadows: low alpha, tinted with text color, never the only cue.   */
  --shadow-1: 0 1px 2px rgb(28 39 43 / 0.06), 0 1px 1px rgb(28 39 43 / 0.04);
  --shadow-2: 0 4px 12px rgb(28 39 43 / 0.08), 0 1px 3px rgb(28 39 43 / 0.06);
  --shadow-3: 0 12px 32px rgb(28 39 43 / 0.14), 0 2px 6px rgb(28 39 43 / 0.06);

  --tap-min:      2.75rem;   /* 44px minimum touch target (WCAG 2.5.8 is 24, we exceed) */
  --container:    72rem;
  --container-narrow: 40rem; /* booking flow column                         */
  --border-width: 1px;

  /* ---------- 7. Motion ------------------------------------------------- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- 8. Brand (per-business) ----------------------------------- */
  /* INPUTS — the only vars the server writes (defaults = Bambo's own green).
       --brand-h / --brand-s / --brand-l : validated hue/sat/lightness
       --on-brand      : #000 or #fff, whichever gives higher contrast on brand
       --on-brand-flip : the opposite of --on-brand (used to derive hover)
       --brand-text    : brand adjusted DARKER until >= 4.5:1 on white AND on
                         --brand-tint; used for links / text / icons on light
     Contrast guarantees are computed on the server (contrast.php/.js);
     the CSS below only derives shades that can only INCREASE those ratios.   */
  --brand-h: 160;
  --brand-s: 45%;
  --brand-l: 30%;
  --on-brand: #ffffff;
  --on-brand-flip: #000000;
  --brand-text: #226a4e;

  /* DERIVED — do not set per tenant. */
  --brand-500:   hsl(var(--brand-h) var(--brand-s) var(--brand-l));      /* fills */
  --brand-hover: color-mix(in srgb, var(--brand-500), var(--on-brand-flip) 12%);
  --brand-active:color-mix(in srgb, var(--brand-500), var(--on-brand-flip) 22%);
  --brand-tint:  color-mix(in srgb, var(--brand-500) 10%, #ffffff);      /* soft bg */
  --brand-tint-strong: color-mix(in srgb, var(--brand-500) 20%, #ffffff);
  /* Outline of brand-filled controls: guarantees a >= 3:1 boundary even for
     very light brand colors (e.g. pale yellow) on a white surface.           */
  --brand-edge:  color-mix(in srgb, var(--brand-500), #000000 45%);
}

/* Fallback for browsers without color-mix (very old): solid values. */
@supports not (background: color-mix(in srgb, red, blue)) {
  :root {
    --brand-hover: var(--brand-500);
    --brand-active: var(--brand-500);
    --brand-tint: #eef5f2;
    --brand-tint-strong: #dcebe5;
    --brand-edge: var(--brand-text);
  }
}

/* Motion: honor the user's OS setting globally. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Windows High Contrast / forced colors: keep boundaries and focus visible. */
@media (forced-colors: active) {
  :root { --focus-color: Highlight; }
}

/* ==========================================================================
   Example of the SERVER-EMITTED tenant block (inline <style> in <head>,
   with a CSP nonce, generated from a validated hex — never from raw input):

   :root{--brand-h:24;--brand-s:82%;--brand-l:38%;--on-brand:#fff;
         --on-brand-flip:#000;--brand-text:#a4470c}

   Nothing else per tenant. See contrast.md.
   ========================================================================== */