/* =====================================================================
   AQAR DESIGN TOKENS — single source of truth (primitive -> semantic -> component)
   Typeface: Bricolage Grotesque (display) + Hanken Grotesk (body)  [SIL OFL, self-hosted]
             Bricolage Grotesque carries hero / KPI / section titles; Hanken Grotesk
             carries body, tables, forms and buttons. A real pairing, never a monotype.
   Brand:    "Mabira forest teal" — deep teal-green, OKLCH H ~178 (anchor: Uganda's
             Mabira tropical-forest canopy). This promotes the existing forest-teal
             command identity to THE brand and deletes the generic blue SaaS gradient
             and the purple-to-blue slop gradient. One ownable hue, not stock Tabler blue.
   Doctrine: design-system-skills 01 (typography) / 02 (colour+dark) / 09 (tokens).
             WCAG-gated; contrast record in docs/plans/design/design-foundation.md.
   ===================================================================== */

:root {
  /* ---------- PRIMITIVE: brand teal ramp (OKLCH stepped on L; hex in comment) ---------- */
  --aqar-teal-50:  oklch(0.97 0.012 178);  /* #eef6f4 */
  --aqar-teal-100: oklch(0.93 0.024 178);  /* #d4e9e4 */
  --aqar-teal-200: oklch(0.87 0.045 178);  /* #a9d3ca */
  --aqar-teal-300: oklch(0.78 0.066 179);  /* #74b8ab */
  --aqar-teal-400: oklch(0.66 0.080 179);  /* #3f9888 */
  --aqar-teal-500: oklch(0.55 0.084 180);  /* #0f766e  <- brand mid */
  --aqar-teal-600: oklch(0.47 0.075 180);  /* #0c5f59 */
  --aqar-teal-700: oklch(0.40 0.062 181);  /* #0a4d48 */
  --aqar-teal-800: oklch(0.30 0.045 182);  /* #12342f  <- command dark */
  --aqar-teal-900: oklch(0.22 0.035 183);  /* #0c2521 */

  /* ---------- PRIMITIVE: brand-tinted neutrals (low chroma; never pure grey/white/black) ---------- */
  --aqar-neutral-0:   oklch(0.99 0.003 200);  /* near-white surface (not pure white) */
  --aqar-neutral-50:  oklch(0.975 0.004 200); /* sunken */
  --aqar-neutral-100: oklch(0.95 0.005 200);
  --aqar-neutral-200: oklch(0.90 0.006 200);  /* borders */
  --aqar-neutral-300: oklch(0.82 0.008 200);
  --aqar-neutral-400: oklch(0.68 0.010 205);
  --aqar-neutral-500: oklch(0.55 0.012 210);  /* muted text */
  --aqar-neutral-600: oklch(0.44 0.012 210);
  --aqar-neutral-700: oklch(0.34 0.012 210);
  --aqar-neutral-800: oklch(0.24 0.012 210);
  --aqar-neutral-900: oklch(0.16 0.012 200);  /* near-black ink (not pure black) */

  /* ---------- PRIMITIVE: status ramps (hue-separated; soft = tint) ---------- */
  --aqar-success-soft: #dcfce7; --aqar-success: #15803d; /* H~150 */
  --aqar-warning-soft: #fef3c7; --aqar-warning: #b45309; /* H~70  */
  --aqar-error-soft:   #fee2e2; --aqar-error:   #b91c1c; /* H~27  */
  --aqar-info-soft:    #dbeafe; --aqar-info:    #1d4ed8; /* H~265 cool, distinct from teal */
  --aqar-slate-soft:   #e2e8f0; --aqar-slate:   #475569; /* neutral status (vacant) */

  /* ---------- PRIMITIVE: type ---------- */
  --aqar-font-display: "Bricolage Grotesque", "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --aqar-font-sans:    "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --aqar-font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Code", monospace;

  /* modular scale, Major Third 1.25, base 16px — exactly two deliberate sub-1rem steps */
  --aqar-fs-3xs: 0.75rem;    /* 12px eyebrows / uppercase labels */
  --aqar-fs-2xs: 0.875rem;   /* 14px caption / meta / small */
  --aqar-fs-sm:  1rem;       /* 16px body */
  --aqar-fs-md:  1.25rem;    /* 20px h4 / KPI value */
  --aqar-fs-lg:  1.5625rem;  /* 25px h3 / section title */
  --aqar-fs-xl:  1.953rem;   /* 31px h2 */
  --aqar-fs-2xl: 2.441rem;   /* 39px h1 */
  --aqar-fs-3xl: clamp(2.441rem, 1.9rem + 2.7vw, 3.052rem); /* fluid display 39->49px */

  --aqar-lh-tight: 1.1;   --aqar-lh-snug: 1.25; --aqar-lh-normal: 1.5; --aqar-lh-relaxed: 1.6;
  --aqar-tracking-tight: -0.01em; --aqar-tracking-normal: 0; --aqar-tracking-wide: 0.08em;
  --aqar-fw-body: 400; --aqar-fw-medium: 500; --aqar-fw-semibold: 600;
  --aqar-fw-display: 700; --aqar-fw-display-strong: 800;

  /* radius + space (4pt set) */
  --aqar-radius-sm: 8px; --aqar-radius: 8px; --aqar-radius-md: 12px; --aqar-radius-lg: 16px; --aqar-radius-pill: 999px;
  --aqar-space-1: 0.25rem; --aqar-space-2: 0.5rem; --aqar-space-3: 0.75rem;
  --aqar-space-4: 1rem; --aqar-space-5: 1.5rem; --aqar-space-6: 2rem; --aqar-space-7: 3rem;

  /* ---------- MOTION (Phase 5, AQ-M-42) — 100/300/500 scale + ease-out curves ----------
     NEVER the banned default `ease` / bounce / elastic / linear. Exit ~75% of enter. */
  --aqar-dur-fast: 120ms;  /* feedback / press */
  --aqar-dur-base: 240ms;  /* state change */
  --aqar-dur-slow: 320ms;  /* layout / drawer */
  --aqar-ease-out: cubic-bezier(0.25, 1, 0.5, 1);        /* ease-out-quart */
  --aqar-ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */
  --aqar-ease-in: cubic-bezier(0.5, 0, 0.75, 0);

  /* ---------- SEMANTIC roles (the only theming seam) ---------- */
  --aqar-color-surface:        var(--aqar-neutral-0);
  --aqar-color-surface-raised: #ffffff;              /* raised cards lighter than surface (light mode) */
  --aqar-color-surface-sunken: var(--aqar-neutral-50);
  --aqar-color-text:           var(--aqar-neutral-900);
  --aqar-color-text-muted:     var(--aqar-neutral-500);
  --aqar-color-border:         var(--aqar-neutral-200);
  --aqar-color-brand:          var(--aqar-teal-500);
  --aqar-color-brand-strong:   var(--aqar-teal-700);
  --aqar-color-brand-text:     var(--aqar-teal-600);  /* brand at >=4.5:1 on white for text */
  --aqar-color-on-brand:       #ffffff;
  --aqar-color-focus:          var(--aqar-teal-600);

  /* ---------- COMPONENT-COMPAT: legacy names re-pointed (no markup change) ---------- */
  --aqar-surface: var(--aqar-color-surface);
  --aqar-subtle:  var(--aqar-color-surface-sunken);
  --aqar-border:  var(--aqar-color-border);
  --aqar-text:    var(--aqar-color-text);
  --aqar-muted:   var(--aqar-color-text-muted);
  --aqar-focus:   var(--aqar-color-focus);

  /* occupancy re-map: vacant is NEUTRAL not blue (keep icon + label for non-hue cue) */
  --aqar-occ-occupied: var(--aqar-success); --aqar-occ-occupied-soft: var(--aqar-success-soft);
  --aqar-occ-vacant:   var(--aqar-slate);   --aqar-occ-vacant-soft:   var(--aqar-slate-soft);
  --aqar-occ-reserved: var(--aqar-warning); --aqar-occ-reserved-soft: var(--aqar-warning-soft);
  --aqar-occ-offline:  var(--aqar-neutral-500); --aqar-occ-offline-soft: var(--aqar-neutral-100);

  /* hero: brand two-stop low-angle ramp (kills the diagonal blue/purple slop) + SOLID chip (no glass) */
  --aqar-hero-grad: linear-gradient(160deg, var(--aqar-teal-700) 0%, var(--aqar-teal-500) 100%);
  --aqar-hero-chip-bg: rgba(10, 77, 72, 0.55);    /* solid brand tint, NOT frosted glass */
  --aqar-hero-chip-border: rgba(255, 255, 255, 0.28);

  /* ---------- TABLER OVERRIDES (stop inheriting the default sans + #066fd1) ---------- */
  --tblr-font-sans-serif: var(--aqar-font-sans);
  --tblr-body-font-family: var(--aqar-font-sans);
  --tblr-primary: var(--aqar-color-brand);
  --tblr-primary-rgb: 15, 118, 110;
  --tblr-link-color: var(--aqar-color-brand-text);
}

/* base type binding so the chosen faces actually render everywhere */
body {
  font-family: var(--aqar-font-sans);
  font-weight: var(--aqar-fw-body);
  line-height: var(--aqar-lh-normal);
  background: var(--aqar-color-surface);
  color: var(--aqar-color-text);
}

h1, h2, h3,
.aqar-command-hero__title, .aqar-property-hero__title,
.aqar-kpi-tile__value, .aqar-section-card__title {
  font-family: var(--aqar-font-display);
  font-weight: var(--aqar-fw-display);
  letter-spacing: var(--aqar-tracking-tight);
  line-height: var(--aqar-lh-tight);
}

/* uppercase eyebrows/labels get the deliberate wide tracking */
.aqar-property-hero__pretitle, .aqar-kpi-tile__label,
.aqar-section-card__eyebrow, .aqar-property-card__pretitle {
  letter-spacing: var(--aqar-tracking-wide);
}

/* money / tabular figures in the data face */
.aqar-money, .aqar-amount, [data-numeric] {
  font-family: var(--aqar-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- DARK MODE: deliberate re-bind of the SAME roles (not an inversion) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --aqar-color-surface:        oklch(0.17 0.02 190);  /* brand-tinted dark grey, not pure black */
    --aqar-color-surface-raised: oklch(0.21 0.02 190);  /* elevation = lighter surface */
    --aqar-color-surface-sunken: oklch(0.14 0.02 190);
    --aqar-color-text:           oklch(0.94 0.01 190);  /* not pure white */
    --aqar-color-text-muted:     oklch(0.72 0.01 200);
    --aqar-color-border:         oklch(0.30 0.015 195);
    --aqar-color-brand:          oklch(0.70 0.090 178); /* lightened + slightly desaturated */
    --aqar-color-brand-text:     oklch(0.78 0.080 178);
    --aqar-color-on-brand:       var(--aqar-teal-900);  /* near-black on the lightened accent */
    --aqar-color-focus:          oklch(0.78 0.080 178);
  }
}
[data-theme="dark"] {
  --aqar-color-surface: oklch(0.17 0.02 190); --aqar-color-surface-raised: oklch(0.21 0.02 190);
  --aqar-color-surface-sunken: oklch(0.14 0.02 190); --aqar-color-text: oklch(0.94 0.01 190);
  --aqar-color-text-muted: oklch(0.72 0.01 200); --aqar-color-border: oklch(0.30 0.015 195);
  --aqar-color-brand: oklch(0.70 0.090 178); --aqar-color-brand-text: oklch(0.78 0.080 178);
  --aqar-color-on-brand: var(--aqar-teal-900); --aqar-color-focus: oklch(0.78 0.080 178);
}