/* =====================================================================
   DESIGN TOKENS — Modern Broker template
   ---------------------------------------------------------------------
   This is the ONLY file a landlord needs to edit to rebrand the site.
   Override these CSS custom properties via your CMS theme settings;
   nothing else (markup, components, layout) needs to be touched.

   CONFORMANCE NOTE (Playbook C2 — TEMPLATE_AUTHORING_SPEC §3.2):
   The server's buildSafeThemeStyle (public-site-builder/server/theme_tokens.go)
   injects operator overrides using the CANONICAL variable names below.
   This file defines the template's design defaults under those same
   canonical names, so operator theme settings actually take effect.
   Palette hex values may live ONLY in this file (SPEC §0.3 rule 1).
   ===================================================================== */

:root {
  /* ---------- Color: canonical THEME tokens (§3.2 — server-injectable) ---------- */
  --color-bg:            #F7F4EE;   /* page background — warm cream */
  --color-bg-panel:      #FFFFFF;   /* cards, panels (JSON: colors.bg_panel) */
  --color-bg-dark:       #1A1614;   /* deep footer / contrast surfaces (JSON: colors.bg_dark) */
  --color-ink:           #1A1614;   /* primary text — warm near-black */
  --color-ink-muted:     #6B645D;   /* secondary text */
  --color-border:        #E5DFD5;   /* dividers, card borders */
  --color-highlight-red: #B23A3A;   /* special / urgent emphasis (JSON: colors.highlight_red) */

  --color-accent:        #C9542C;   /* primary accent — warm terracotta */
  --color-accent-hover:  #8A3A1E;   /* hover / dark accent (JSON: colors.accent_hover) */
  /* accent_fg derived by the §3.2.1 luminance formula from --color-accent #C9542C:
     L = (0.2126*201 + 0.7152*84 + 0.0722*44) / 255 = 0.42  ( < 0.55 )  =>  #FFFFFF.
     Server override recomputes this from the operator accent; keep in sync if accent changes. */
  --color-accent-fg:     #FFFFFF;   /* text on accent (JSON: derived, not operator input) */
  --color-accent-tint:   rgba(201, 84, 44, 0.12);  /* soft accent fill (server = rgba(accent,0.12)) */

  /* ---------- Color: template-local roles (not server-injected) ---------- */
  /* Backward-compatible aliases: keep existing T01 markup/components working while
     the canonical names above become the source of truth. Do NOT hard-code these
     hex values outside this file. */
  --color-surface:      var(--color-bg-panel);   /* legacy alias of --color-bg-panel */
  --color-surface-alt:  #EFEAE0;   /* subtle alt panels */
  --color-ink-faint:    #A39A8E;   /* tertiary text, captions */
  --color-border-strong:#1A1614;
  --color-accent-dark:  var(--color-accent-hover);   /* legacy alias of --color-accent-hover */
  --color-accent-soft:  var(--color-accent-tint);    /* legacy alias of --color-accent-tint */

  /* Fixed brand color for third-party badges (WhatsApp brand green + on-brand text).
     WhatsApp text uses a fixed white token here so no literal hex lives in components.css. */
  --color-whatsapp:     #25D366;   /* WhatsApp brand */
  --color-whatsapp-dark:#128C7E;
  --color-on-whatsapp:  #FFFFFF;   /* text on WhatsApp brand bg (replaces literal #FFF in components.css) */

  --color-success:      #2F7D5A;
  --color-danger:       #B23A3A;

  /* ---------- Typography ---------- */
  /* TODO (Playbook B — STOP-ASK, do NOT auto-invent a font pair):
     This template's design uses Fraunces (display serif) + Plus Jakarta Sans (body).
     The §3.2 fonts.pair dictionary has NO matching key:
       - noto-serif-hk = Noto Serif HK + Noto Sans HK  (serif display, but not Fraunces)
       - jakarta-inter = Plus Jakarta Sans + Inter      (Jakarta is DISPLAY here, body = Inter)
     Neither reproduces "Fraunces display + Jakarta body". Options require user approval:
       (a) accept a lossy map to an existing pair, or
       (b) add a new pair (e.g. `fraunces-jakarta`) via Playbook B — which edits
           tokens.example.json + tokens.schema.json + theme_tokens.go (APPROVED-FILES / RED-gated).
     Until resolved, the local defaults below preserve the original T01 visual.
     Server font override (fonts.pair) still writes --font-display / --font-body 1:1. */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Type scale — modular, fluid via clamp */
  --text-xs:   0.75rem;     /* 12 */
  --text-sm:   0.875rem;    /* 14 */
  --text-base: 1rem;        /* 16 */
  --text-md:   1.125rem;    /* 18 */
  --text-lg:   1.3125rem;   /* 21 */
  --text-xl:   1.75rem;     /* 28 */
  --text-2xl:  clamp(2rem, 4vw, 2.75rem);    /* 32 → 44 */
  --text-3xl:  clamp(2.5rem, 6vw, 4rem);     /* 40 → 64 */
  --text-4xl:  clamp(3rem, 8vw, 5.5rem);     /* 48 → 88 */

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;

  /* ---------- Spacing scale ---------- */
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  3rem;      /* 48 */
  --space-8:  4rem;      /* 64 */
  --space-9:  6rem;      /* 96 */
  --space-10: 8rem;      /* 128 */

  /* ---------- Layout ---------- */
  --container-max:    1280px;
  --container-narrow:  860px;
  --gutter:           clamp(1rem, 4vw, 2.5rem);

  /* ---------- Radii (canonical --radius-md / --radius-pill are server-injectable) ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;       /* JSON: shape.radius_card */
  --radius-lg: 16px;
  --radius-pill: 999px;   /* JSON: shape.radius_button */

  /* ---------- Stroke + logo (canonical §3.2 — server-injectable) ---------- */
  --stroke-base: 1px;     /* JSON: shape.stroke_base */
  --logo-height: 44px;    /* JSON: logo.height */

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px rgba(26,22,20,0.06);
  --shadow-md: 0 6px 24px -8px rgba(26,22,20,0.12);
  --shadow-lg: 0 24px 48px -16px rgba(26,22,20,0.20);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 480ms;

  /* ---------- z-index ---------- */
  --z-nav:      50;
  --z-sticky:   40;
  --z-overlay: 100;
}

/* ---------- Optional: dark theme override ---------- */
/* A landlord can opt their site into dark mode by adding [data-theme="dark"] on <html>.
   Keep all components reading from --color-* variables — no hard-coded colors anywhere else. */
[data-theme="dark"] {
  --color-bg:           #14110F;
  --color-bg-panel:     #1E1A17;
  --color-bg-dark:      #0E0C0A;
  --color-ink:          #F2EDE5;
  --color-ink-muted:    #A39A8E;
  --color-border:       #2E2925;

  /* legacy aliases kept in sync for dark mode */
  --color-surface:      var(--color-bg-panel);
  --color-surface-alt:  #2A2522;
  --color-ink-faint:    #6B645D;
  --color-border-strong:#F2EDE5;
  --color-accent-soft:  #3A2218;
}