/*
 * TripManga — Design Tokens
 * ─────────────────────────────────────────────────────────────────────────
 * THE single source of truth for brand primitives. Every other stylesheet
 * (brand-colors.css, portal-mono.css, user-mono.css, admin-mono.css, …)
 * should reference these --tm-* variables instead of re-typing literals, so
 * a brand or palette change happens here once and cascades everywhere.
 *
 * Consumers reference tokens WITH a literal fallback — var(--tm-green, #038a52)
 * — so a surface still renders correctly even if this file is cached stale or
 * fails to load. Load this file FIRST, before any consumer stylesheet.
 *
 * Note on intent: the storefront wears the brand GREEN; the supplier/admin/user
 * portals are deliberately MONOCHROME (ink black). That is not drift — it is
 * the design. This file holds both primitive families; each surface aliases the
 * ones it needs.
 * ─────────────────────────────────────────────────────────────────────────
 */
:root {
    /* ── Brand — TripManga green (storefront + semantic success) ───────── */
    --tm-green:            #038a52;   /* primary */
    --tm-green-ink:        #026b3f;   /* hover / darker */
    --tm-green-2:          #025c35;   /* active / emphasis text */
    --tm-green-soft:       #e6f5ef;   /* subtle fill (alerts, hovers) */
    --tm-green-border:     #a8d9be;   /* subtle border */
    --tm-green-rgb:        3, 138, 82;  /* for rgba() focus rings */
    --tm-green-ink-rgb:    2, 107, 63;

    /* ── Ink & paper — monochrome portals / admin / user ───────────────── */
    --tm-ink:              #000;      /* text + emphasis, pure black */
    --tm-white:            #fff;      /* paper */
    --tm-line:             #e2e8f0;   /* faint structural hairline */

    /* ── Slate chrome — sanctioned dark sidebar shared across back-office
          (admin + user + supplier portal shells) ─────────────────────────── */
    --tm-slate-900:        #0f172a;   /* sidebar background */
    --tm-slate-800:        #1e293b;   /* sidebar border / hover / active */
    --tm-slate-500:        #64748b;   /* sidebar group label */
    --tm-slate-400:        #94a3b8;   /* sidebar text */
    --tm-slate-200:        #e2e8f0;   /* sidebar text (hover) */

    /* ── Semantic — these keep their hue even in monochrome surfaces ────── */
    --tm-success:          var(--tm-green);
    --tm-error:            #ef4444;
    --tm-warning:          #f59e0b;
    --tm-info:             #f47c04;

    /* ── Type — the one enforced face ──────────────────────────────────── */
    --tm-font-sans:        'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* ── Canonical scales — governance defaults for NEW components.
          Existing monochrome portals stay square/flat by design; adopt these
          incrementally, don't retro-apply and change today's look. ───────── */
    --tm-radius-sm:        .375rem;
    --tm-radius:           .5rem;
    --tm-radius-lg:        .75rem;
    --tm-radius-pill:      999px;

    --tm-space-1:          .25rem;
    --tm-space-2:          .5rem;
    --tm-space-3:          .75rem;
    --tm-space-4:          1rem;
    --tm-space-6:          1.5rem;
    --tm-space-8:          2rem;
}