/* ==========================================================================
   HERBE — Design Tokens
   ──────────────────────────────────────────────────────────────────────────
   Tokens for the herbe.app suite. Read by:
     • herbe.calendar   (dense power-user UI, 13px body, 2–4px radii)
     • herbe.portal     (comfy customer UI, 15px body, 4–6px radii)
     • herbe.warehouse / HApp (dense, like calendar)
     • herbe marketing site (this project's landing/)

   Everything here MUST match what's already shipping in the two apps —
   if a token's value diverges between Calendar's tokens.css and Portal's
   colors_and_type.css, this file marks the canonical version and the
   reconciliation guide explains which side needs to align.

   Namespaces:
     --burti-*    raw Burti brand colours (Sept 2022 brandbook)
     --cat-*      categorical palette (events, tags, charts)
     --status-*   semantic status colours (success/warn/danger/info)
     --herbe-*    semantic aliases used by all three apps
     --product-*  per-app accents (calendar / portal / happ)
   Tier presets (used by shared.css):
     --ui-dense-* sizing for Calendar / HApp / power UI
     --ui-comfy-* sizing for Portal / customer UI
   ========================================================================== */

/* ---------- Fonts (Poppins, local TTFs) ---------- */
@font-face { font-family:'Poppins'; font-weight:300; font-style:normal; font-display:swap; src:url('fonts/Poppins-Light.ttf') format('truetype'),       url('../fonts/Poppins-Light.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/Poppins-Regular.ttf') format('truetype'),     url('../fonts/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-weight:400; font-style:italic; font-display:swap; src:url('fonts/Poppins-Italic.ttf') format('truetype'),      url('../fonts/Poppins-Italic.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-weight:500; font-style:normal; font-display:swap; src:url('fonts/Poppins-Medium.ttf') format('truetype'),      url('../fonts/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-weight:600; font-style:normal; font-display:swap; src:url('fonts/Poppins-SemiBold.ttf') format('truetype'),    url('../fonts/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/Poppins-Bold.ttf') format('truetype'),        url('../fonts/Poppins-Bold.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-weight:700; font-style:italic; font-display:swap; src:url('fonts/Poppins-BoldItalic.ttf') format('truetype'),  url('../fonts/Poppins-BoldItalic.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-weight:800; font-style:normal; font-display:swap; src:url('fonts/Poppins-ExtraBold.ttf') format('truetype'),   url('../fonts/Poppins-ExtraBold.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-weight:900; font-style:normal; font-display:swap; src:url('fonts/Poppins-Black.ttf') format('truetype'),       url('../fonts/Poppins-Black.ttf') format('truetype'); }

:root {
  /* ════════════════════════════════════════════════════════════════
     BRAND COLOURS — Burti (canonical, Sept 2022 brandbook)
     Shared by Calendar (tokens.css) and Portal (colors_and_type.css).
     ════════════════════════════════════════════════════════════════ */
  --burti-black:          #231F20;
  --burti-white:          #FFFFFF;
  --burti-rowanberry:     #CD4C38;   /* the brand red — the squared dot */
  --burti-high-sky:       #00AEE7;   /* the brand cyan — portal accent */
  --burti-forest:         #134A40;   /* the primary brand surface */
  --burti-mud:            #212722;   /* near-black alternate */
  --burti-forest-dark:    #0A4A42;
  --burti-high-sky-light: #4DD0E1;
  --burti-offwhite:       #F7F9F8;
  --burti-gray:           #6B7B78;
  --burti-gray-light:     #E0E5E4;
  --burti-red:            var(--burti-rowanberry);
  --burti-cyan:           var(--burti-high-sky);
  --burti-teal:           var(--burti-forest);

  /* ════════════════════════════════════════════════════════════════
     HERBE SEMANTIC ALIASES
     These are what shared.css and the guideline pages reach for.
     ════════════════════════════════════════════════════════════════ */
  --herbe-paper:          #FFFFFF;
  --herbe-cream:          var(--burti-offwhite);
  --herbe-bone:           #ECEFEE;
  --herbe-mist:           var(--burti-gray-light);
  --herbe-ink:            var(--burti-black);
  --herbe-stone:          var(--burti-gray);
  --herbe-ash:            #9AA5A2;
  --herbe-forest:         var(--burti-forest);
  --herbe-forest-dark:    var(--burti-forest-dark);
  --herbe-mud:            var(--burti-mud);
  --herbe-red:            var(--burti-rowanberry);
  --herbe-sky:            var(--burti-high-sky);

  /* The brand glyph — the squared dot. Always SQUARE, default red. */
  --herbe-dot:            var(--burti-rowanberry);

  /* ════════════════════════════════════════════════════════════════
     PRODUCT ACCENTS — one accent per app
     Calendar dot: red (matches wordmark dot in logo SVGs)
     Portal dot:   sky (matches wordmark dot in portal logos)
     HApp dot:     red (matches wordmark dot in warehouse logos)
     ════════════════════════════════════════════════════════════════ */
  --product-herbe:        var(--burti-rowanberry);
  --product-calendar:     var(--burti-rowanberry);
  --product-portal:       var(--burti-high-sky);
  --product-happ:         var(--burti-rowanberry);

  /* ════════════════════════════════════════════════════════════════
     CATEGORICAL PALETTE — events, tags, charts, calendar event colors
     Mirrors the --cat-* tokens defined in both apps.
     ════════════════════════════════════════════════════════════════ */
  --cat-rust:        #CD4C38;   --cat-rust-soft:   #FBE7E2;
  --cat-amber:       #E08A2B;   --cat-amber-soft:  #FBEBD4;
  --cat-ochre:       #C9A227;   --cat-ochre-soft:  #F6EECB;
  --cat-moss:        #6B8E3D;   --cat-moss-soft:   #E6EED6;
  --cat-forest:      #134A40;   --cat-forest-soft: #D4E1DD;
  --cat-teal:        #2A8F94;   --cat-teal-soft:   #D4ECEC;
  --cat-sky:         #00AEE7;   --cat-sky-soft:    #D1EEFA;
  --cat-indigo:      #3F56A6;   --cat-indigo-soft: #DDE3F3;
  --cat-violet:      #7A4E9C;   --cat-violet-soft: #E8DEF1;
  --cat-plum:        #A8446E;   --cat-plum-soft:   #F2DCE5;
  --cat-graphite:    #4A4E53;   --cat-graphite-soft:#DEE0E2;

  /* ════════════════════════════════════════════════════════════════
     STATUS COLOURS — canonical semantic mapping
     The two apps express these slightly differently today; the
     reconciliation guide marks the canonical values below.
     • paid / success     → forest      (Portal uses this; Calendar uses moss-green)
     • partial / info     → sky
     • pending / warning  → amber       (both apps drift; this hex is the target)
     • overdue / danger   → rowanberry
     • neutral / unpaid   → gray
     ════════════════════════════════════════════════════════════════ */
  --status-success:        #0A4A42;
  --status-success-soft:   #D4E1DD;
  --status-success-fg:     #0A4A42;

  --status-warning:        #B07A1A;
  --status-warning-soft:   #FBEBD4;
  --status-warning-fg:     #6B4B14;

  --status-danger:         #CD4C38;
  --status-danger-soft:    #FBE7E2;
  --status-danger-fg:      #8C2E20;

  --status-info:           #0088B5;
  --status-info-soft:      #D1EEFA;
  --status-info-fg:        #0B5A72;

  --status-neutral:        var(--herbe-stone);
  --status-neutral-soft:   var(--herbe-bone);
  --status-neutral-fg:     var(--herbe-ink);

  /* ════════════════════════════════════════════════════════════════
     SEMANTIC ROLES — default = light surface (Portal default)
     Calendar overrides with [data-theme="dark"] / [data-theme="light"].
     ════════════════════════════════════════════════════════════════ */
  --bg:            var(--herbe-paper);
  --bg-elevated:   var(--herbe-cream);
  --bg-sunken:     var(--herbe-bone);
  --bg-inverse:    var(--herbe-forest);
  --fg:            var(--herbe-ink);
  --fg-muted:      var(--herbe-stone);
  --fg-subtle:     var(--herbe-ash);
  --fg-on-accent:  #FFFFFF;
  --border:        var(--herbe-mist);
  --border-strong: #C9D0CE;
  --accent:        var(--herbe-red);
  --accent-cool:   var(--herbe-sky);
  --link:          var(--herbe-forest);
  --link-hover:    var(--herbe-sky);
  --focus-ring:    0 0 0 3px rgba(19,74,64,0.18);
  --selection-bg:  var(--herbe-red);
  --selection-fg:  #FFFFFF;

  /* ════════════════════════════════════════════════════════════════
     TYPE
     Both apps use Poppins, ALL CAPS for headings (Burti tradition),
     wider tracking on caps labels. We preserve that.
     ════════════════════════════════════════════════════════════════ */
  --font-sans:      'Poppins', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-display:   var(--font-sans);
  --font-mono:      ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fw-light:       300;
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-extrabold:   800;
  --fw-black:       900;

  /* Size scale — 16px base */
  --fs-xxs:  0.6875rem; /* 11px */
  --fs-xs:   0.75rem;   /* 12px — caps labels, table headers */
  --fs-sm:   0.8125rem; /* 13px — dense body (Calendar), table cells */
  --fs-base: 0.9375rem; /* 15px — comfy body (Portal) */
  --fs-md:   1rem;      /* 16px */
  --fs-lg:   1.125rem;  /* 18px */
  --fs-xl:   1.375rem;  /* 22px — page h1 in Portal */
  --fs-2xl:  1.75rem;   /* 28px */
  --fs-3xl:  2.25rem;   /* 36px */
  --fs-4xl:  3rem;      /* 48px */
  --fs-5xl:  4rem;      /* 64px — hero */
  --fs-6xl:  5.5rem;

  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;

  --tracking-tight:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;   /* module nav tabs, button labels */
  --tracking-caps:   0.06em;   /* eyebrow / section labels */
  --tracking-loose:  0.08em;   /* h1 in admin / "ALL CAPS" page titles */
  --tracking-extra:  0.10em;   /* small caps row labels in forms */

  /* ════════════════════════════════════════════════════════════════
     SPACING — 4px base
     ════════════════════════════════════════════════════════════════ */
  --space-0:  0;
  --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 */

  /* ════════════════════════════════════════════════════════════════
     RADII — tight scale (the brand IS square-first)
     Real-world usage in the apps lives between 2–6px.
     ════════════════════════════════════════════════════════════════ */
  --radius-none: 0;
  --radius-xs:   2px;    /* event chips, popover-rows, kbd hint */
  --radius-sm:   3px;    /* dense inputs (Calendar) */
  --radius-md:   4px;    /* dense buttons, badges, segmented control */
  --radius-lg:   6px;    /* comfy inputs/buttons/cards (Portal default) */
  --radius-xl:   8px;
  --radius-2xl:  12px;   /* marketing cards, modal panels */
  --radius-full: 9999px; /* DEPRECATED — do not use for avatars or UI elements. Herbe geometry is rectilinear; see Principle 6. Retained only for pill-shaped progress bars or similar non-identity uses. */

  /* ════════════════════════════════════════════════════════════════
     SHADOWS — cool, low elevation
     ════════════════════════════════════════════════════════════════ */
  --shadow-xs:    0 1px 1px rgba(19,74,64,0.06);
  --shadow-sm:    0 1px 2px rgba(19,74,64,0.08);
  --shadow-md:    0 4px 14px rgba(19,74,64,0.10);
  --shadow-lg:    0 12px 32px rgba(19,74,64,0.14);
  --shadow-xl:    0 24px 64px rgba(19,74,64,0.18);
  --shadow-pop:   0 8px 32px rgba(19,74,64,0.18);
  --shadow-inset: inset 0 0 0 1px var(--border);

  /* ════════════════════════════════════════════════════════════════
     MOTION
     ════════════════════════════════════════════════════════════════ */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.7, 0, 1, 1);
  --dur-quick: 120ms;
  --dur-base:  200ms;
  --dur-slow:  360ms;

  /* ════════════════════════════════════════════════════════════════
     DENSITY TIER PRESETS
     The two real apps map onto these tiers. Each tier defines a
     compatible set of sizes for buttons, inputs, badges, etc.
     Shared.css picks the right tier via data-density or a wrapper.
     ════════════════════════════════════════════════════════════════ */

  /* DENSE — herbe.calendar, herbe.warehouse / HApp, power-user product UI */
  --ui-dense-body:        13px;
  --ui-dense-btn-h:       28px;
  --ui-dense-btn-h-sm:    24px;
  --ui-dense-btn-h-lg:    34px;
  --ui-dense-input-h:     32px;
  --ui-dense-radius-input:3px;
  --ui-dense-radius-btn:  4px;
  --ui-dense-radius-card: 4px;
  --ui-dense-radius-chip: 2px;
  --ui-dense-label-fs:    11px;   /* uppercase row labels in forms */
  --ui-dense-label-track: 0.10em;

  /* COMFY — herbe.portal, customer-facing screens, auth pages */
  --ui-comfy-body:        15px;
  --ui-comfy-btn-h:       42px;
  --ui-comfy-btn-h-sm:    36px;
  --ui-comfy-btn-h-lg:    46px;
  --ui-comfy-input-h:     44px;
  --ui-comfy-radius-input:4px;
  --ui-comfy-radius-btn:  4px;   /* Portal already uses 4px */
  --ui-comfy-radius-card: 6px;
  --ui-comfy-radius-chip: 4px;
  --ui-comfy-label-fs:    12px;
  --ui-comfy-label-track: 0.04em;
}

/* ════════════════════════════════════════════════════════════════
   Dark-surface override — used by Calendar dark theme, marketing
   hero strips, and footer.
   ════════════════════════════════════════════════════════════════ */
.on-dark,
[data-surface="dark"],
[data-theme="dark"] {
  --bg:            var(--herbe-forest);
  --bg-elevated:   var(--herbe-forest-dark);
  --bg-sunken:     var(--herbe-mud);
  --bg-inverse:    var(--herbe-paper);
  --fg:            #FFFFFF;
  --fg-muted:      rgba(255,255,255,0.72);
  --fg-subtle:     rgba(255,255,255,0.5);
  --border:        rgba(255,255,255,0.12);
  --border-strong: rgba(255,255,255,0.22);
  --link:          var(--herbe-sky);
  --link-hover:    #FFFFFF;
  --focus-ring:    0 0 0 3px rgba(255,255,255,0.32);
}

/* ════════════════════════════════════════════════════════════════
   Base — body styling is opt-in (no global h1-h6 restyle so we don't
   break the apps' existing markup).
   ════════════════════════════════════════════════════════════════ */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--selection-bg); color: var(--selection-fg); }