/* =====================================================================
   GROWLEAFY DESIGN SYSTEM — GF tokens (Phase 1, semantic layer)
   One design language across Website · User App · Business · Partner ·
   Team · Developer · Control Center. Density differs, meaning never does.
   ===================================================================== */
:root {
  /* brand */
  --gf-primary: #0a7f56;
  --gf-primary-hover: #0f8d64;
  --gf-primary-soft: #e3f4ee;
  --gf-primary-strong: #0a4026;
  --gf-on-primary: #ffffff;

  /* neutral */
  --gf-ink: #0b0f0e;
  --gf-text: #161a18;
  --gf-muted: #66706b;
  --gf-faint: #6b7470;
  --gf-surface: #ffffff;
  --gf-surface-elevated: #ffffff;
  --gf-surface-2: #f5f7f6;
  --gf-border: #c5cec9;
  --gf-border-2: #8a938e;
  --gf-background: #f7faf8;

  /* semantic */
  --gf-success: #0f8d64;
  --gf-success-soft: rgba(15, 141, 100, 0.12);
  --gf-warning: #b45309;
  --gf-warning-soft: rgba(180, 83, 9, 0.12);
  --gf-error: #c23b2e;
  --gf-error-soft: rgba(194, 59, 46, 0.12);
  --gf-info: #2f6fd0;
  --gf-info-soft: rgba(47, 111, 208, 0.12);

  /* signature palette: green stays primary; two sophisticated complements */
  --gf-deep-ink: #10231b;      /* almost-black green — headlines, nav, data */
  --gf-mint: #ecf6f0;         /* soft green-tinted surface — rhythm sections */
  --gf-blue: #2f6fd0;         /* digital — enterprise/API/data/connectivity, used sparingly */
  --gf-mint-2: #dcefe5;
  --gf-identity: #0f8d64;
  --gf-verified: #0f8d64;
  --gf-connected: #0f8d64;
  --gf-pending: #b45309;
  --gf-suspended: #c23b2e;
  --gf-revoked: #c23b2e;
  --gf-lost: #7c3aed;
  --gf-recovered: #2f6fd0;

  /* financial */
  --gf-fin-revenue: #0f8d64;
  --gf-fin-pending: #b45309;
  --gf-fin-refund: #2f6fd0;
  --gf-fin-failed: #c23b2e;
  --gf-fin-settled: #0a4026;

  /* typography scale */
  --gf-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gf-font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
  --gf-type-display: 800 40px/1.08 var(--gf-font);
  --gf-type-h1: 700 30px/1.15 var(--gf-font);
  --gf-type-h2: 700 22px/1.25 var(--gf-font);
  --gf-type-h3: 700 16.5px/1.35 var(--gf-font);
  --gf-type-body: 400 14.5px/1.65 var(--gf-font);
  --gf-type-label: 700 11px/1.3 var(--gf-font);
  --gf-type-caption: 400 12px/1.5 var(--gf-font);
  --gf-type-data: 800 26px/1.1 var(--gf-font);
  --gf-type-code: 400 12.5px/1.6 var(--gf-font-mono);

  /* spacing (4px grid) */
  --gf-sp-1: 4px; --gf-sp-2: 8px; --gf-sp-3: 12px; --gf-sp-4: 16px;
  --gf-sp-5: 20px; --gf-sp-6: 24px; --gf-sp-8: 32px; --gf-sp-10: 40px; --gf-sp-12: 48px;

  /* radius */
  --gf-r-sm: 8px; --gf-r-md: 12px; --gf-r-lg: 16px; --gf-r-xl: 22px; --gf-r-pill: 999px;

  /* shadow */
  --gf-sh-sm: 0 1px 2px rgba(10, 40, 38, 0.06);
  --gf-sh-md: 0 6px 20px -8px rgba(10, 40, 38, 0.16);
  --gf-sh-lg: 0 18px 48px -22px rgba(10, 40, 38, 0.3);

  /* motion */
  --gf-ease: cubic-bezier(0.25, 0.8, 0.25, 1);
  --gf-dur-fast: 120ms; --gf-dur-med: 220ms; --gf-dur-slow: 380ms;

  /* density */
  --gf-density-comfortable: 12px;
  --gf-density-standard: 10px;
  --gf-density-compact: 6px;
}

/* =====================================================================
   PHASE 2 ADDITIONS — additive only. Every token above is unchanged.
   ---------------------------------------------------------------------
   Why a second block instead of editing the first: the Phase 1 block is
   consumed by the storefront (`site/layouts/master.blade.php:60`), the
   Control Center (`admin/console-shell.blade.php:15`) and LIOS
   (`lios/layouts/master.blade.php:42`). Changing a value there would move
   three surfaces at once, unreviewably. A second `:root` block leaves the
   original 90 lines byte-identical and puts every new token in one hunk.

   A cascade audit found 44 tokens already conflicting across the estate
   (`.tmp/ux-audit/B-design-fragmentation.md` §3.3). This block deliberately
   introduces NO name that any other file in the corpus defines, so it
   cannot join that set.
   ===================================================================== */
:root {
  /* scale completion — the 4px grid, extended for section rhythm.
     Phase 1 stopped at 48px, which is a card gap, not a section gap. */
  --gf-sp-14: 56px;
  --gf-sp-16: 64px;

  /* one radius below the Phase 1 floor, for chips and inline marks */
  --gf-r-xs: 6px;

  /* a shadow lighter than sh-sm, for sticky bars that must not float */
  --gf-sh-xs: 0 1px 1px rgba(10, 40, 38, 0.04);

  /* FOCUS — required by the accessibility rule, and absent from Phase 1.
     One ring, two forms: `--gf-focus-ring` for `box-shadow` on controls and
     `--gf-focus-outline` where box-shadow is already carrying elevation. */
  --gf-focus-color: #0a7f56;
  --gf-focus-ring: 0 0 0 3px rgba(10, 127, 86, 0.28);
  --gf-focus-outline: 2px solid #0a7f56;
  --gf-focus-offset: 2px;

  /* CONTAINERS — one measure for every shell, so pages align to each other.
     Phase 1 had none, which is why each surface invented its own width. */
  --gf-container: 1160px;
  --gf-container-narrow: 760px;
  --gf-container-wide: 1400px;
  --gf-gutter: 20px;

  /* control geometry, so button and input heights agree everywhere */
  --gf-control-h-sm: 32px;
  --gf-control-h: 40px;
  --gf-control-h-lg: 48px;
  --gf-tap-min: 44px;

  /* BADGE INK — the readable foreground for each soft background above.
     The `-soft` tokens are translucent, so the base colour is not
     guaranteed to pass contrast against them; these are the values that do. */
  --gf-success-ink: #0a5c42;
  --gf-warning-ink: #7a3a06;
  --gf-error-ink: #8c2a20;
  --gf-info-ink: #1d4f9c;
  --gf-neutral-ink: #414a46;
  --gf-neutral-soft: rgba(102, 112, 107, 0.12);

  /* LAYER ORDER — named, so a new overlay cannot land on top of a modal by
     accident. Values are spaced to allow insertion without renumbering. */
  --gf-z-base: 0;
  --gf-z-sticky: 100;
  --gf-z-drawer: 200;
  --gf-z-modal: 300;
  --gf-z-toast: 400;

  /* TEXT RHYTHM — tracking and leading, which Phase 1 left to each rule. */
  --gf-tracking-tight: -0.018em;
  --gf-tracking-normal: 0;
  --gf-tracking-wide: 0.08em;
  --gf-leading-tight: 1.15;
  --gf-leading-snug: 1.35;
  --gf-leading-normal: 1.6;

  /* the transition shorthand, so timing cannot drift per component */
  --gf-transition: 160ms var(--gf-ease);
  --gf-transition-slow: 260ms var(--gf-ease);
}

/* Reduced motion is honoured centrally rather than per component. The rule is
   that motion may only reinforce state — so when the platform asks for less,
   every duration collapses to nothing and no component has to remember. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --gf-transition: 0.01ms;
    --gf-transition-slow: 0.01ms;
    --gf-dur-fast: 0.01ms;
    --gf-dur-med: 0.01ms;
    --gf-dur-slow: 0.01ms;
    --gf-ease: linear;
  }
}

/* =====================================================================
   PHASE 3 — THE `--gl-*` COMPATIBILITY LAYER
   ---------------------------------------------------------------------
   WHY THIS EXISTS. Measured across the corpus (`.tmp/ux-audit/
   token-surface.json`, 133 files):

       --gl-* names referenced ............................ 108
       --gl-* names defined ............................... 113
       ...of which CONFLICTING (defined twice, different) ..  54
       ...referenced but defined NOWHERE (ghosts) ..........   4

   The conflicts were not academic. `--gl-primary` alone was declared three
   times with three different greens — `#16A34A` (`growleafy.css:11`),
   `#12a374` (`design-system.css:110`) and `#22C55E` (dark theme) — so
   WHICH green the storefront rendered depended on `<link>` order, not on
   any decision. It resolved to `#12a374` while every token-driven surface
   rendered `#0a7f56`: **two different brand greens on one platform.**

   The command centre was worse. It loads `gf-tokens.css` ONLY, so all 25 of
   its `--gl-*` references resolved to nothing at all — 48% of its 52 token
   references were dead.

   WHAT THIS DOES. Every `--gl-*` name the corpus references now resolves to
   its canonical `--gf-*` value, here, in one place. This fixes the
   storefront, the console, civic, AI and the place/scan pages in a single
   change, without editing the 133 files that use the old names.

   WHY AN ALIAS AND NOT A RENAME. A rename across 133 files, 680 token
   definitions and 3,015 references is a large unreviewable diff whose
   failure mode is silent — a missed reference renders as nothing. The alias
   is one reviewable block; the rename can follow per-file, at leisure.

   ⚠ THE COMPETING DEFINITIONS HAD TO GO FIRST. These aliases live in the
   FIRST stylesheet loaded, so a `:root` block in a LATER one would override
   them. The `--gl-*` blocks in `growleafy.css:9-124` and
   `design-system.css:8-44` and `:96-115` were therefore removed in the same
   change. `[data-theme="dark"]` overrides were deliberately KEPT — those are
   scoped, and a theme is supposed to differ.

   ⚠ NOT A PERMANENT FIXTURE. This is a migration shim. New code uses
   `--gf-*` directly. When the last `--gl-*` reference is gone, delete this
   block; it is one contiguous section and nothing else depends on it.

   FOUR NAMES HERE WERE PREVIOUSLY UNDEFINED EVERYWHERE and are fixed by
   existing: `--gl-primary-hover`, `--gl-brand`, `--gl-bg-soft`,
   `--gl-t-med`. A fifth class of ghost is deliberately NOT invented:
   `--accuracy-m` and `--px-per-meter` in `growleafy-nearby.css:329` are a
   map-scale calculation missing its inputs, which is a logic defect, not a
   missing token. They are left undefined so the defect stays visible.
   ===================================================================== */
:root {
  /* brand → one green */
  --gl-primary: var(--gf-primary);
  --gl-pri: var(--gf-primary);
  --gl-accent: var(--gf-primary);
  --gl-brand: var(--gf-primary);
  --gl-brand-mid: var(--gf-primary);
  --gl-brand-bright: var(--gf-primary-hover);
  --gl-green-500: var(--gf-primary);
  --gl-green-600: var(--gf-success);
  --gl-green-700: var(--gf-primary-strong);
  --gl-green-900: var(--gf-primary-strong);
  --gl-primary-strong: var(--gf-primary-strong);
  --gl-pri-deep: var(--gf-primary-strong);
  --gl-brand-deep: var(--gf-primary-strong);
  --gl-footer-bg: var(--gf-primary-strong);
  --gl-primary-hover: var(--gf-primary-hover);
  --gl-pri-d: var(--gf-primary-hover);
  --gl-primary-soft: var(--gf-primary-soft);
  --gl-primary-wash: var(--gf-primary-soft);
  --gl-primary-wash-2: var(--gf-primary-soft);
  --gl-primary-ink: var(--gf-on-primary);
  --gl-green-50: var(--gf-primary-soft);
  --gl-green-100: var(--gf-mint-2);
  --gl-green-200: var(--gf-mint-2);
  --gl-hero-ink: var(--gf-primary-soft);
  --gl-bg-glow-1: var(--gf-primary-soft);
  --gl-bg-glow-2: var(--gf-mint);

  /* the light-green accent family */
  --gl-lime: var(--gf-mint-2);
  --gl-lime-soft: var(--gf-mint);
  --gl-lime-ink: var(--gf-primary-strong);

  /* text */
  --gl-text: var(--gf-text);
  --gl-ink: var(--gf-ink);
  --gl-ink-strong: var(--gf-ink);
  --gl-ink-2: var(--gf-text);
  --gl-text-2: var(--gf-text);
  --gl-ink-soft: var(--gf-muted);
  --gl-muted: var(--gf-muted);
  --gl-faint: var(--gf-faint);

  /* surfaces and lines */
  --gl-bg: var(--gf-background);
  --gl-bg-2: var(--gf-mint);
  --gl-bg-soft: var(--gf-surface-2);
  --gl-surface: var(--gf-surface);
  --gl-surface-2: var(--gf-surface-2);
  --gl-surface-3: var(--gf-mint-2);
  --gl-border: var(--gf-border);
  --gl-border-2: var(--gf-border-2);
  --gl-border-strong: var(--gf-border-2);
  --gl-line: var(--gf-border);
  --gl-line-strong: var(--gf-border-2);

  /* status — each keeps the base colour AND its readable ink in step */
  --gl-success: var(--gf-success);
  --gl-ok: var(--gf-success);
  --gl-success-soft: var(--gf-success-soft);
  --gl-ok-bg: var(--gf-success-soft);
  --gl-warning: var(--gf-warning);
  --gl-warn: var(--gf-warning);
  --gl-warning-soft: var(--gf-warning-soft);
  --gl-warn-bg: var(--gf-warning-soft);
  --gl-danger: var(--gf-error);
  --gl-error: var(--gf-error);
  --gl-danger-strong: var(--gf-error);
  --gl-danger-soft: var(--gf-error-soft);
  --gl-danger-bg: var(--gf-error-soft);
  --gl-info: var(--gf-info);
  --gl-info-soft: var(--gf-info-soft);
  --gl-info-bg: var(--gf-info-soft);

  /* radius */
  --gl-r-sm: var(--gf-r-sm);
  --gl-r-md: var(--gf-r-md);
  --gl-r-lg: var(--gf-r-lg);
  --gl-r-xl: var(--gf-r-xl);
  --gl-r-pill: var(--gf-r-pill);

  /* spacing */
  --gl-sp-1: var(--gf-sp-1);
  --gl-sp-2: var(--gf-sp-2);
  --gl-sp-3: var(--gf-sp-3);
  --gl-sp-4: var(--gf-sp-4);
  --gl-sp-5: var(--gf-sp-5);
  --gl-sp-6: var(--gf-sp-6);
  --gl-sp-8: var(--gf-sp-8);
  --gl-sp-10: var(--gf-sp-10);
  --gl-sp-14: var(--gf-sp-14);

  /* elevation — four legacy names collapse onto two steps.
     `--gl-shadow-glow` was a green halo around interactive elements; it
     becomes the focus ring, which is what it was being used for. */
  --gl-shadow-1: var(--gf-sh-sm);
  --gl-shadow-sm: var(--gf-sh-sm);
  --gl-sh-sm: var(--gf-sh-sm);
  --gl-shadow-2: var(--gf-sh-md);
  --gl-shadow-md: var(--gf-sh-md);
  --gl-sh-md: var(--gf-sh-md);
  --gl-shadow-lg: var(--gf-sh-lg);
  --gl-sh-lg: var(--gf-sh-lg);
  --gl-shadow-glow: var(--gf-focus-ring);

  /* motion — `--gl-ease-spring` overshoots, which is decoration, so it
     collapses to the one easing curve like everything else. */
  --gl-t-fast: var(--gf-dur-fast);
  --gl-t-mid: var(--gf-dur-med);
  --gl-t-med: var(--gf-dur-med);
  --gl-t-slow: var(--gf-dur-slow);
  --gl-ease: var(--gf-ease);
  --gl-ease-out: var(--gf-ease);
  --gl-ease-spring: var(--gf-ease);

  /* typography — one family, and raw sizes for the legacy scale */
  --gl-font: var(--gf-font);
  --gl-font-body: var(--gf-font);
  --gl-font-display: var(--gf-font);
  --gl-fs-xs: 11px;
  --gl-fs-sm: 13px;
  --gl-fs-md: 15px;
  --gl-fs-lg: 18px;
  --gl-fs-xl: 22px;
  --gl-fs-2xl: 28px;
  --gl-fs-3xl: 34px;
  --gl-display-size: 40px;
  --gl-h2-size: 23px;
  --gl-lh: var(--gf-leading-normal);
  --gl-weight-bold: 700;
  --gl-weight-semi: 600;

  /* layout and layers */
  --gl-wrap: var(--gf-container-wide);
  --gl-header-h: 64px;
  --gl-head-h: 64px;
  --gl-z-header: var(--gf-z-sticky);
  --gl-z-drawer: var(--gf-z-drawer);
  --gl-z-modal: var(--gf-z-modal);
  --gl-z-toast: var(--gf-z-toast);

  /* the unprefixed legacy names `growleafy.css:114-123` called "§35 no
     breakage", kept so that promise holds */
  --emerald: var(--gf-primary);
  --emerald-dark: var(--gf-primary-strong);
  --ink: var(--gf-text);
  --card: var(--gf-surface);
  --card-alt: var(--gf-surface-2);
  --border: var(--gf-border);
  --border-strong: var(--gf-border-2);
  --text: var(--gf-text);
  --muted: var(--gf-muted);
  --danger: var(--gf-error);
  --amber: var(--gf-warning);
}

/* ══════════════════════════════════════════════════════════════════════════
   MATERIAL SYMBOLS — THE ESTATE'S ONE ICON VOCABULARY (adopted 2026-09-23)
   ══════════════════════════════════════════════════════════════════════════
   The vocabulary lives once in `App\Support\MaterialSymbols` and glyph markup is
   emitted once by `resources/views/components/mi.blade.php`. This BASE RULE is
   the one part that cannot be shared as code, because the surfaces that draw
   icons load disjoint stylesheets: the public site loads this file plus
   `growleafy.css` and `design-system.css`; the Control Center loads THIS FILE
   ALONE (a test keeps it that way); LIOS loads this file plus `lios.css`; the AI
   surface loads only `ai.css`; the civic surface only `design-system.css`. So
   the rule is mirrored into every sheet a glyph can appear under, and
   `IconVocabularyTest` asserts each copy exists — a mirror nobody checks is a
   mirror that rots the first time somebody tidies a stylesheet.

   IT LIVES IN THE TOKEN LAYER for exactly that reason: this is the one sheet the
   site, the Control Center and LIOS have in common.

   The glyph is a LIGATURE: the element's text IS the Material identifier
   (`local_shipping`). That is why every glyph carries `aria-hidden="true"` — a
   screen reader would otherwise read "local shipping" beside "Services" — and
   why the family is requested with `display=block`, so that word is never
   painted while the font loads.
   ══════════════════════════════════════════════════════════════════════════ */
.gl-mi {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -webkit-user-select: none;
    user-select: none;
}