/* ═══════════════════════════════════════════════════════════════════
   tokens.css
   ───────────────────────────────────────────────────────────────────
   PART 1 — verbatim copy of the design-system colours_and_type.css
            (the committed colour + type token foundation). Do not edit
            here; site.css consumes only these variables.
   PART 2 — Sundowners admin-shell extension (the .dc.html palette,
            breakpoints, layout metrics) layered on top.
   No hard-coded colours/spacing are used in site.css — everything flows
   from these variables.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   PART 1 — DESIGN-SYSTEM TOKENS (verbatim)
   ═══════════════════════════════════════════════════════════════════ */

/* ──────────────── FONTS ──────────────── */
/* Poppins — display type (Hero + headings) */
/* Open Sans — body, UI, buttons, forms */
/* Arial — Figma meta labels only; do not use in product UI */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap");

:root {
  /* ══════════ COLOURS ══════════ */

  /* Brand — Webcoda wrapper (cover / chrome) */
  --wc-coral:        #FF5E54;   /* accent; logomark + back-link + bar */
  --wc-teal:         #2A3E43;   /* wordmark + Cover title + HR rule */
  --wc-teal-muted:   #6B787C;   /* Cover sub-instructions (86% on ink) */

  /* Primary — product */
  --primary-blue:    #2A62D3;   /* solid CTA buttons + links */

  /* Ink / text */
  --ink-900:         #000000;   /* pure black, form field labels */
  --ink-800:         #231F20;   /* default body text ("rich black") */
  --ink-700:         #333333;   /* Lead text */
  --ink-500:         #999999;   /* Figma meta labels (guide copy) */
  --ink-400:         #6B787C;   /* muted teal-grey, dark-bg caption */

  /* Greys / surfaces */
  --grey-01:         #F6F6F6;   /* lightest tint / section bg */
  --grey-02:         #E9E8E8;   /* header + footer + divider bg */
  --grey-03:         #FFFFFF;   /* white card on white = use border */
  --grey-stroke:     #D8D8D8;   /* 1px HR / input outline passive */
  --grey-placeholder:#C4C4C4;   /* placeholder surfaces, disabled fill */

  /* Feedback */
  --success-01:      #D9EFC7;   /* success pill bg */
  --success-02:      #6DA84A;   /* success icon / text */
  --error-01:        #FFCCC9;   /* error pill bg */
  --error-02:        #E41A1A;   /* error icon / text */
  --warning-01:      #FBEBC3;   /* warning pill bg */
  --warning-02:      #E6B422;   /* warning icon / text */

  /* Utility */
  --white:           #FFFFFF;
  --black:           #000000;
  --transparent:     rgba(0,0,0,0);

  /* Scrim overlays (Cover / hero) */
  --scrim-86:        rgba(2, 17, 47, 0.86);
  --scrim-45:        rgba(2, 17, 47, 0.45);

  /* ══════════ FONT FAMILIES ══════════ */
  --font-display:    "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-body:       "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --font-meta:       Arial, "Helvetica Neue", sans-serif;

  /* ══════════ SPACING (Figma tokens) ══════════ */
  /* BH #267/#171/#148 — --space-12 and --space-20 are NOT on the original Figma 4/8/16/24 scale, but
     the admin stylesheet uses them in 39 declarations (padding, gap, margin). A var() naming a custom
     property that was never declared, with no fallback, makes the whole declaration invalid at
     computed-value time — so each of those 39 declarations silently computed to ZERO rather than
     falling back to something sane. That is the single root cause behind the "buttons have no padding /
     controls are jammed together / the group sits flush against the panel edge" reports: the booking
     Financials action row measured padding 0px and gap "normal" on UAT, while the sibling rule using
     the DEFINED --space-8 measured its 8px correctly. Several call sites had already been patched
     individually with inline fallbacks (var(--space-12, 12px)), which both proves the intended values
     and shows the symptom was being treated per-site instead of at its cause. Declaring the two tokens
     here fixes every un-patched use at once and makes those inline fallbacks harmlessly redundant.
     Keep them on the 4px grid so they remain compatible with the rest of the scale. */
  --space-4:   4px;
  --space-8:   8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --space-120: 120px;

  /* ══════════ LAYOUT ══════════ */
  --container-max:   1440px;  /* desktop canvas */
  --container-pad:   68px;    /* desktop gutter */
  --container-pad-tablet: 44px;
  --container-pad-mobile: 20px;

  /* ══════════ RADII ══════════ */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;

  /* ══════════ EFFECTS ══════════ */
  --hr-thin:     1px solid var(--grey-stroke);
  --hr-heavy:    3px solid var(--wc-teal);   /* page-title underline */
}

/* ═══════════════════════════════════════════════════════════════════
   BASE + SEMANTIC TYPE (doc-template scale — site.css rescales to the
   compact admin scale the .dc.html uses.)
   ═══════════════════════════════════════════════════════════════════ */

html, body {
  font-family: var(--font-body);
  color: var(--ink-800);
  font-size: 18px;
  line-height: 28px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.t-hero, h1.hero {
  font-family: var(--font-display); font-weight: 700;
  font-size: 60px; line-height: 72px; letter-spacing: 0.01em;
  color: var(--ink-800); margin: 0;
}
.t-cover-client {
  font-family: var(--font-display); font-weight: 700;
  font-size: 40px; line-height: 48px; color: var(--wc-teal); margin: 0;
}
.t-cover-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 76px; line-height: 94px; color: var(--wc-teal); margin: 0;
}
h1, .t-title-1 { font-family: var(--font-display); font-weight: 700; font-size: 48px; line-height: 56px; color: var(--ink-800); margin: 0; }
h2, .t-title-2 { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 48px; color: var(--ink-800); margin: 0; }
h3, .t-title-3 { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 40px; color: var(--ink-800); margin: 0; }
h4, .t-title-4 { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 34px; color: var(--ink-800); margin: 0; }
h5, .t-title-5 { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 30px; color: var(--ink-800); margin: 0; }
h6, .t-title-6 { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 28px; color: var(--ink-800); margin: 0; }

.t-page-title { font-family: var(--font-body); font-weight: 700; font-size: 25px; line-height: 40px; color: var(--wc-teal); margin: 0; }

.t-lead, p.lead { font-family: var(--font-body); font-weight: 400; font-size: 22px; line-height: 32px; color: var(--ink-700); margin: 0; }
p, .t-body { font-family: var(--font-body); font-size: 18px; line-height: 28px; color: var(--ink-800); margin: 0 0 1em; }
.t-body-bold, strong { font-weight: 700; }
.t-body-italic, em   { font-style: italic; }
.t-body-bold-italic  { font-weight: 700; font-style: italic; }
a, .t-link { color: var(--primary-blue); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
.t-body-sm { font-family: var(--font-body); font-size: 16px; line-height: 24px; color: var(--ink-800); }
.t-body-tiny { font-family: var(--font-body); font-size: 12px; line-height: 20px; color: var(--ink-800); }
.t-caption { font-family: var(--font-body); font-style: italic; font-size: 14px; line-height: 24px; letter-spacing: 0.01em; color: var(--ink-800); }
.t-label { font-family: var(--font-body); font-weight: 700; font-size: 14px; line-height: 24px; color: var(--ink-800); }
.t-label-tiny { font-family: var(--font-body); font-weight: 700; font-size: 12px; line-height: 20px; color: var(--ink-800); }
.t-meta { font-family: var(--font-meta); font-size: 20px; line-height: 28px; color: var(--ink-500); }

.wc-section-rule { border: 0; border-top: var(--hr-heavy); margin: 0; }
.wc-hr { border: 0; border-top: var(--hr-thin); margin: var(--space-48) 0; }


/* ═══════════════════════════════════════════════════════════════════
   PART 2 — SUNDOWNERS ADMIN-SHELL EXTENSION
   Surfaces, the terracotta primary, the warm-neutral palette used across
   the .dc.html, status chips, breakpoints and layout metrics. Everything
   below is named so site.css never hard-codes a value.
   ═══════════════════════════════════════════════════════════════════ */

/* The .dc.html uses Poppins 600 heavily for page/card titles — pull in 500/600. */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&family=Open+Sans:wght@600&display=swap");

:root {
  /* ── Brand (alias onto the foundation tokens) ── */
  --so-brand:         var(--wc-teal);        /* sidebar / teal rule */
  --so-coral:         var(--wc-coral);       /* Sundowners coral accent */
  --so-coral-tint:    #E8C9B5;               /* selection background (design helmet) */

  /* ── Work Packet 0.59 (a11y) ──
     --so-rule: the thin 3px teal accent rule under page/finance heads.
       Kept distinct from --so-brand so the dark theme can lift it alone
       (--so-brand also backs the filled teal sidebar, which stays brand).
     --so-focus-ring: the keyboard focus outline. Rides the terracotta
       primary, which the dark block already lifts for AA on dark surfaces. */
  --so-rule:          var(--so-brand);
  --so-focus-ring:    var(--so-primary);

  /* ── Primary action — terracotta (the .dc.html button colour) ── */
  --so-primary:       #A8481F;
  --so-primary-hover: #8A3A18;
  --so-overland:      #D2773F;               /* "Overland" wordmark accent */

  /* BugHerd #339 — the small "selected-period" scope cue in a card meta. It rides the terracotta
     primary so the cue matches the landmark it belongs to, but it is 11.5px text, so it needs its
     OWN token: the brand primary is legible at button size and on light surfaces, and must not be
     re-tinted globally just to satisfy small text on one dark surface. In light it IS the primary
     (#A8481F on the white card = 5.81:1, passes AA); the dark theme overrides only this token. */
  --so-scope-cue:     var(--so-primary);

  /* ── Surfaces ── */
  --so-app-bg:        #F2F1EE;               /* app background (warm off-white) */
  --so-topbar:        var(--white);
  --so-sidebar:       var(--so-brand);
  --so-sidebar-rule:  rgba(255,255,255,0.08);
  --so-card:          var(--white);
  --so-border:        #E4E2DF;               /* card / panel border */
  --so-border-soft:   #ECEAE9;               /* card-head divider */
  --so-table-head:    #F2F0EE;               /* table header background */
  --so-row-rule:      #F0EEEC;               /* table row bottom border */
  --so-row-hover:     #F4EFEA;               /* row hover */
  --so-track:         #F6F4F1;               /* timeline / bar track */
  --so-input-bg:      #FAFAF9;
  --so-input-border:  var(--grey-stroke);

  /* ── Text scale (warm neutrals from the .dc.html) ── */
  --so-text-1:        var(--ink-800);        /* #231F20 default */
  --so-text-2:        #3D3833;
  --so-text-3:        #5E5852;
  --so-text-4:        #6E6862;
  --so-muted:         #857F78;               /* labels / captions */
  --so-caption:       #948D86;
  --so-faint:         #A39C95;

  /* ── Sidebar-only tints (cooler, for the teal rail) ── */
  --so-nav-group:     #5E7176;
  --so-nav-sub:       #8FA0A4;
  --so-nav-footer:    #6E8085;
  --so-nav-badge-bg:  rgba(255,255,255,0.12);
  --so-nav-badge-fg:  #CBD6D9;
  --so-nav-active:    #33484E;               /* active item background lift */

  /* ── Status chips (semantic) ── */
  --chip-success-bg:  #D9EFC7; --chip-success-fg: #2c4f12;
  --chip-info-bg:     #E1E8EC; --chip-info-fg:    #34525E;
  --chip-neutral-bg:  #F2F0EE; --chip-neutral-fg: #6E6862;
  --chip-warn-bg:     var(--warning-01); --chip-warn-fg: #8A6A12;
  --chip-error-bg:    var(--error-01);    --chip-error-fg:    var(--error-02);
  --chip-brand-bg:    #FBE4E2; --chip-brand-fg: #A8481F;

  /* ── Booking-status chips (the .dc.html booking lifecycle set, verbatim) ── */
  --chip-quote-bg:     #E1E8EC; --chip-quote-fg:     #34525E;
  --chip-option-bg:    #FBEBC3; --chip-option-fg:    #6b4f0a;
  --chip-booking-bg:   #D9EFC7; --chip-booking-fg:   #2c4f12;
  --chip-waitlist-bg:  #EDE7D8; --chip-waitlist-fg:  #6f5d2b;
  --chip-cancelled-bg: #ECEAE9; --chip-cancelled-fg: #908981;
  /* Work Packet 0.52 — Closed (legacy 'C', commission-withdrawn): a cool slate, deliberately
     distinct from Booking's confirmed green and Cancelled's warm grey. */
  --chip-closed-bg:    #DBE3E8; --chip-closed-fg:    #3D5560;

  /* ── Booking-category confidence badges (A–D, .dc.html conf() set) ── */
  --conf-a-bg: #6DA84A; --conf-a-fg: #FFFFFF;
  --conf-b-bg: #D9EFC7; --conf-b-fg: #2c4f12;
  --conf-c-bg: #FBEBC3; --conf-c-fg: #6b4f0a;
  --conf-d-bg: #ECEAE9; --conf-d-fg: #908981;

  /* ── Dashboard pipeline value bars (Work Packet 0.86) ── */
  --pipe-track: #F2F1EE;
  --pipe-a: #6DA84A;
  --pipe-b: #A9C77E;
  --pipe-c: #E6C766;
  --pipe-d: #CFCAC4;

  /* ── Layout metrics ── */
  --so-sidebar-width: 232px;
  --so-sidebar-mini: 64px;                  /* collapsed icon-rail width (Work Packet 0.15) */
  --so-topbar-height: 56px;
  --so-content-pad:   30px;                  /* desktop gutter */
  --so-content-pad-narrow: 16px;             /* mobile gutter */
  --so-radius:        0;                     /* the design is square-cornered */
  --so-max-content:   1180px;                /* dashboard content cap */
  --so-max-content-analytics: 1680px;        /* BH #174 — Analytics control-desk cap on wide desktop
                                                (the redesign brief's deliberate 12-column max, inside
                                                the 1680–1760px testing band). Only /Analytics opts in;
                                                the dashboard and every other page stay at the 1180 cap. */

  /* ── Breakpoints (desktop 1440 / tablet 768 / mobile 375) ── */
  --bp-nav-collapse:  992px;   /* below this the sidebar becomes a drawer */
  --bp-tablet:        768px;
  --bp-mobile:        480px;

  /* ══════════ FINANCE (F1–F4) ══════════
     Money direction (receipts in / payments out), the NZD trust segregation
     accent + wash, the highlighted closing/net tile wash, and the balanced/
     reconciled wash reused across the reconcile panel, journal footer and
     trust note. All lifted from the .dc.html F1–F4 frames. */
  --so-money-in:      var(--chip-success-fg);   /* receipts / inflow (green) */
  --so-money-out:     #9b2f28;                   /* payments / outflow / net-negative (the .dc.html brick-red) */
  /* BH #267 (same undeclared-token class) — this referenced --chip-success-02, which is not declared
     anywhere, so the forward-cash inflow bar had NO background at all rather than the intended green.
     --success-02 is the declared token holding exactly the #6DA84A this line's own comment names. */
  --so-money-in-bar:  var(--success-02);         /* forward-cash inflow bar (#6DA84A) */
  --so-money-out-bar: var(--so-overland);        /* forward-cash outflow bar (#D2773F, alias) */
  --so-trust:         var(--chip-info-fg);       /* NZD trust account accent (teal #34525E) */
  --so-trust-tint:    #F4F6F6;                   /* trust row / card wash (cool) */
  --so-tile-accent:   #F8F4F0;                   /* highlighted closing-position / net / total tile wash */
  --so-ok-bg:         #EAF3E2;                   /* balanced / reconciled wash */
  --so-ok-border:     #CDE3BB;                   /* balanced / reconciled rule */

  /* ══════════ AVATAR PALETTE (Work Packet 0.82 — BugHerd #10) ══════════
     Eight named keys backing the user initials badge (top-bar chip, Users list,
     edit preview) and the edit-page swatch picker. Each key is a -bg/-fg pair so
     the dark block can darken the fill + lift the fg for AA. The renderer never
     inlines hex — it emits an .avatar--{key} modifier, so everything themes. */
  --avatar-slate-bg:   #475569; --avatar-slate-fg:   #FFFFFF;
  --avatar-indigo-bg:  #4F46E5; --avatar-indigo-fg:  #FFFFFF;
  --avatar-teal-bg:    #0F766E; --avatar-teal-fg:    #FFFFFF;
  --avatar-green-bg:   #4D7C0F; --avatar-green-fg:   #FFFFFF;
  --avatar-amber-bg:   #B45309; --avatar-amber-fg:   #FFFFFF;
  --avatar-rose-bg:    #BE185D; --avatar-rose-fg:    #FFFFFF;
  --avatar-violet-bg:  #6D28D9; --avatar-violet-fg:  #FFFFFF;
  --avatar-cyan-bg:    #0E7490; --avatar-cyan-fg:    #FFFFFF;
}