/* ==========================================================================
   OWN BUSINESS — Design tokens
   --------------------------------------------------------------------------
   The single place for colours, type, spacing, radii and shadows.
   Shared by the prototype (Part A) and the pre-launch site (Part B).
   Change a value here, run scripts/sync-shared.sh, and both parts update.

   Palette comes from the client's logo: ink + tan ("black and tan") on a
   neutral off-white. Deep green (carried over from the client's V3
   prototype) is kept only for "verified / positive".
   Design refinement pass 2 Oct 2026 — see PROJECT-BRIEF.md §11.
   ========================================================================== */
:root {
  /* ---- Brand colours ------------------------------------------------------
     "Black and tan", taken straight from the logo: the ink of "Own Business"
     and the tan edge inside the doorway O. Neutral (not cream) paper keeps the
     tan reading as an accent rather than a whole warm-beige theme.        */
  --ink:          #15171a;  /* primary text, primary buttons (logo black)    */
  --ink-soft:     #2c3036;  /* hover state for ink surfaces                  */
  --ink-2:        #1e2125;  /* raised ink surface (featured listing sheet)   */
  --gold:         #b8966e;  /* logo tan: rules, marks, the doorway edge      */
  --gold-deep:    #7a5a34;  /* tan used for TEXT on light bg (AA contrast)   */
  --gold-tint:    #efe7dc;  /* faint tan wash (Semi Managed badge)           */
  --green:        #1f4d3d;  /* verified / success / positive                 */
  --green-tint:   #e5efe9;
  --danger:       #9a3b2c;  /* demo labels, errors                           */
  --danger-tint:  #f6e9e6;

  /* ---- Neutrals (cool-neutral, one family) ------------------------------ */
  --paper:        #f4f4f1;  /* page background                               */
  --surface:      #fcfcfb;  /* cards, panels, modals                         */
  --surface-alt:  #ebebe7;  /* alternate section background                  */
  --field:        #efefeb;  /* quiet fills (callouts, hover)                 */
  --line:         #dcdcd6;  /* hairlines, borders                            */
  --line-strong:  #babab2;  /* input borders, hover borders                  */
  --muted:        #575b62;  /* secondary text (AA on paper + surface)        */
  --subtle:       #74787f;  /* tertiary text, labels — large/bold use only   */

  /* ---- Management categories (locked decision #1) -----------------------
     Every badge shows its text label too — colour is never the only cue.    */
  --cat-full-bg:   var(--green);      --cat-full-fg:   #ffffff;   /* Fully Managed    */
  --cat-semi-bg:   var(--gold-tint);  --cat-semi-fg:   #5a4224;   /* Semi Managed     */
  --cat-ready-bg:  #e4e6ea;           --cat-ready-fg:  #353c48;   /* Management Ready */

  /* ---- Typography ---------------------------------------------------------
     Montserrat carries the brand. Headlines borrow the logo's own contrast:
     heavy weight for the claim, light weight (.h-light) for the follow-on —
     the way "Own" is heavy and "Business" is light.                        */
  --font-display: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale — clamp(min, preferred, max) */
  --fs-xs:   0.75rem;                                   /* 12px  labels      */
  --fs-sm:   0.875rem;                                  /* 14px  small text  */
  --fs-base: 1rem;                                      /* 16px  body        */
  --fs-md:   1.125rem;                                  /* 18px  lead        */
  --fs-lg:   clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);  /* card titles       */
  --fs-xl:   clamp(1.45rem, 1.2rem + 1vw, 2rem);        /* H3 / modal titles */
  --fs-2xl:  clamp(1.85rem, 1.4rem + 1.6vw, 2.6rem);    /* H2 section titles */
  --fs-3xl:  clamp(2.4rem, 1.5rem + 3.3vw, 4.25rem);    /* H1 hero           */

  --lh-tight: 1.04;
  --lh-snug:  1.3;
  --lh-body:  1.6;
  --tracking-wide:  0.2em;   /* tagline, set like the logo's strap line */
  --tracking-tight: -0.035em;

  /* ---- Spacing (4px base) ----------------------------------------------- */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem;  --space-6: 1.5rem;  --space-8: 2rem;    --space-10: 2.5rem;
  --space-12: 3rem;    --space-16: 4rem;   --space-20: 5rem;
  --section-y: clamp(3.5rem, 2.25rem + 4.5vw, 6.5rem);  /* vertical section padding */
  --gutter:    clamp(1rem, 0.5rem + 2vw, 1.5rem);       /* side padding (16px mobile) */
  --container: 1200px;

  /* ---- Shape & depth ------------------------------------------------------
     One radius family, deliberately tight (architectural, not bubbly):
       4px  chips and badges · 6px  buttons and inputs
       8px  cards and panels · 10px modal and the featured sheet
     Full round is kept only for the on/off toggle.                         */
  --radius-sm: 4px;  --radius: 6px;  --radius-lg: 8px;  --radius-xl: 10px;  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(21, 23, 26, 0.05);
  --shadow:    0 1px 2px rgba(21, 23, 26, 0.04), 0 14px 32px -16px rgba(21, 23, 26, 0.22);
  --shadow-lg: 0 30px 80px -24px rgba(21, 23, 26, 0.35);

  /* ---- Motion & focus --------------------------------------------------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:  200ms;
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--gold-deep);

  /* ---- Layers ----------------------------------------------------------- */
  --z-header: 50;  --z-menu: 60;  --z-modal: 100;  --z-toast: 110;

  --header-h: 68px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}