/* =============================================================================
   theme.css — Dexuro shared design tokens + base primitives (SINGLE SOURCE OF
   TRUTH). Extracted from the approved "Editorial / branded" booking direction
   (public/__mockup_b.html). Server-rendered pages <link> this file; page CSS
   should consume these tokens/primitives and add layout only.

   No build, no deps, no external fonts — system font stack, heavy weights.

   TOKEN GROUPS (all custom properties live on :root)
   -----------------------------------------------------------------------------
   Brand / teal ramp   --teal --teal-dark --teal-deep --teal-light --mint
   Brand (seam)        --brand --brand-dark --brand-light --brand-contrast
                         ^ the per-business accent seam overrides --brand /
                           --brand-dark downstream; interactive accents read
                           these so a business tint flows through.
   Ink / gray ramp     --ink --ink-2 --gray-700 --gray-500 --muted --gray-400
                         --gray-300
   Surfaces            --paper (page) --card --bg --bg-soft --line/--border
   Status              --star (one canonical gold) --danger --danger-soft
                         --success --success-soft
   Typography          --font-sans --font  |  --fw-normal..--fw-black
                         --fs-xs..--fs-display  |  --lh-tight --lh-base
   Spacing             --space-1 .. --space-9  (4/8/12/16/20/24/30/38/48)
   Radius (one scale)  --radius-sm --radius --radius-md --radius-lg --radius-xl
                         --radius-pill
   Shadow              --shadow-sm --shadow --shadow-lg --shadow-brand
                         --shadow-brand-sm
   Motion              --dur-fast --dur --dur-slow --ease --transition --ring

   PRIMITIVES          .btn/.btn-primary/.btn-secondary  .input/.textarea
                         .card  .powered-by  global :focus-visible ring
   ============================================================================= */

:root {
  /* ── Brand / teal ramp ─────────────────────────────────────────────────── */
  --teal: #0f766e;
  --teal-dark: #0b5b54;
  --teal-deep: #052623;
  --teal-light: #ccfbf1;
  --mint: #5eead4;

  /* ── Brand semantic layer (per-business accent seam overrides --brand /
        --brand-dark). Defaults to the teal identity. ───────────────────────── */
  --brand: var(--teal);
  --brand-dark: var(--teal-dark);
  --brand-light: var(--teal-light);
  /* Derived deepest brand shade for the identity-panel gradient's far stop.
     Computed from --brand so a single --brand override retints the whole
     gradient. The 32% mix is chosen so the DEFAULT (brand = teal) resolves to
     color-mix(teal 32%, #000) = rgb(5,38,35) = #052623 = the literal --teal-deep,
     i.e. the default gradient is byte-identical to the old fixed teal ramp. */
  --brand-deep: color-mix(in srgb, var(--brand) 32%, #000);
  --brand-contrast: #ffffff;

  /* ── Ink / gray ramp ───────────────────────────────────────────────────── */
  --ink: #0b1211;
  --ink-2: #0f1720;
  --gray-700: #374151;
  --gray-500: #6a736e;
  --muted: #6a736e;
  --gray-400: #a3aaa5;
  --gray-300: #c1c8c3;

  /* ── Surfaces ──────────────────────────────────────────────────────────── */
  --paper: #eef1ee;   /* page backdrop */
  --card: #ffffff;    /* raised card / panel */
  --bg: #ffffff;      /* alias of --card for primitives */
  --bg-soft: #f7f9f7; /* recessed field / cell fill */
  --line: #e6e9e6;    /* hairline border */
  --border: var(--line);

  /* ── Status ────────────────────────────────────────────────────────────── */
  --star: #f59e0b;         /* one canonical review gold */
  --danger: #c0392b;
  --danger-soft: #fdecea;
  --success: #15803d;
  --success-soft: #dcfce7;

  /* ── Typography ────────────────────────────────────────────────────────── */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --font: var(--font-sans);

  --fw-normal: 400;
  --fw-medium: 600;
  --fw-bold: 700;
  --fw-heavy: 800;
  --fw-black: 900;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 26px;
  --fs-3xl: clamp(26px, 3vw, 34px);
  --fs-display: clamp(38px, 4.4vw, 52px);

  --lh-tight: 1.0;
  --lh-base: 1.5;

  /* ── Spacing scale ─────────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 30px;
  --space-8: 38px;
  --space-9: 48px;

  /* ── Radius (one coherent scale) ───────────────────────────────────────── */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  /* ── Shadow ────────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(5, 38, 35, 0.08);
  --shadow: 0 2px 4px rgba(5, 38, 35, 0.05), 0 18px 40px -24px rgba(5, 38, 35, 0.35);
  --shadow-lg: 0 2px 4px rgba(5, 38, 35, 0.05), 0 40px 80px -40px rgba(5, 38, 35, 0.4);
  --shadow-brand: 0 14px 30px -12px rgba(15, 118, 110, 0.8);
  --shadow-brand-sm: 0 10px 22px -8px rgba(15, 118, 110, 0.65);

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --dur-fast: 0.1s;
  --dur: 0.14s;
  --dur-slow: 0.16s;
  --ease: ease;
  --transition: var(--dur) var(--ease);
  --ring: var(--brand);
}

/* ── Dark theme ────────────────────────────────────────────────────────────
   prefers-color-scheme is the signal; brand/teal identity stays constant, only
   surfaces + ink ramp shift. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #050b0a;
    --card: #0c1614;
    --bg: #0c1614;
    --bg-soft: #09120f;
    --line: #1d2926;
    --border: var(--line);
    --ink: #eef6f3;
    --ink-2: #eef6f3;
    --gray-700: #c3d0cb;
    --gray-500: #8a978f;
    --muted: #8a978f;
    --gray-400: #5b6a65;
    --gray-300: #3a4844;
    --danger: #f3a79d;
    --danger-soft: #2a1512;
    --success: #86efac;
    --success-soft: #0c2417;
    --brand-light: #103a36;
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 18px 40px -24px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 40px 80px -40px rgba(0, 0, 0, 0.7);
  }
}

/* =============================================================================
   BASE PRIMITIVES
   ============================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Links are never underlined by default across the product; interactive
   affordance comes from color/weight and the shared focus ring below. */
a {
  text-decoration: none;
}

/* Single, consistent focus ring for every interactive primitive. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 48px;
  padding: 14px 22px;
  border: 0;
  border-radius: var(--radius-lg);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
  letter-spacing: -0.01em;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-slow) var(--ease),
    background var(--dur-slow) var(--ease),
    border-color var(--dur-slow) var(--ease),
    color var(--dur-slow) var(--ease);
}
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--brand);
  color: var(--brand-contrast);
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover:not(:disabled) {
  background: var(--brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -14px rgba(15, 118, 110, 0.9);
}
.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

.btn-secondary {
  background: var(--card);
  color: var(--ink);
  border: 1.5px solid var(--line);
  box-shadow: none;
  font-weight: var(--fw-heavy);
}
.btn-secondary:hover:not(:disabled) {
  border-color: var(--brand);
  color: var(--brand-dark);
}

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.input,
.textarea {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
  padding: 14px 15px;
  font-family: inherit;
  font-size: var(--fs-md);
  color: var(--ink);
  min-height: 48px;
  transition: border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.5;
}
.input::placeholder,
.textarea::placeholder {
  color: var(--gray-400);
}
.input:focus,
.textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--card);
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.14);
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* ── Powered-by mark ─────────────────────────────────────────────────────── */
.powered-by {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--muted);
  text-decoration: none;
  font-weight: var(--fw-bold);
}
.powered-by:hover {
  color: var(--brand-dark);
}

/* ── Dark-mode accent-text corrections ───────────────────────────────────────
   --brand-dark (#0b5b54) is a mid-dark teal: fine as accent text on the light
   surfaces, but it drops below WCAG AA against the dark surfaces (--card
   #0c1614). On dark, hover/accent text switches to the bright --mint so it
   stays legible. Backgrounds/seams are untouched, so per-business retint via
   --brand keeps working. */
@media (prefers-color-scheme: dark) {
  .btn-secondary:hover:not(:disabled) {
    color: var(--mint);
  }
  .powered-by:hover {
    color: var(--mint);
  }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}