/* ============================================================================
   ORA TOKEN SYSTEM — LAYER 1 (theme-agnostic primitives)
   ============================================================================
   Source of truth : Token System Foundation Entity Home
                     https://www.notion.so/35f81404729f81859b73ed529ad66a9a
                     (page id: 35f81404-729f-8185-9b73-ed529ad66a9a)
   Companions      : tokens.teglo.dark.css   (Layer 2 — dark theme colours)
                     tokens.teglo.light.css  (Layer 2 — light theme colours)
   Version         : v1.0.1  (palette lock — 13 May 2026)
   Phase           : 1 — clean extraction, structural only, NO value changes
   Architecture    : runtime CSS variables (NOT Tailwind compiled config)

   This file holds the platform-locked primitives every vertical inherits:
   typography stack, type scale, weights, line-heights, letter-spacing,
   4px spacing grid, radius scale, motion durations + easings, breakpoints,
   z-index scale, layout sizing.

   These tokens are platform-locked architectural primitives. New verticals
   inherit them unchanged — EXCEPT typography (--font-display, --font-body,
   --font-mono), which is vertical-overridable via JSONB. Everything else
   here (type scale, spacing grid, radius, motion, breakpoints, z-index,
   layout sizing) is locked across all verticals. See README.md for the
   vertical override schema.
   ============================================================================ */

:root {
  /* ── TYPOGRAPHY: families (VERTICAL-OVERRIDABLE) ───────────────────────── */
  /* These three tokens are Teglo defaults. Each vertical may override them
     via vertical_configs.branding_tokens.typography at tenant load. The
     override <style> block writes new values into :root, and the host page
     injects the matching Google Fonts <link> before that <style> block.
     See README.md for JSONB shape, mechanical injection sketch, and
     vertical examples. Absent typography in JSONB = inherit Teglo defaults. */
  --font-display: 'Inter Display', system-ui, sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;
  --font-heading: var(--font-display);  /* legacy alias */

  /* NOTE: 'Inter Display' is declared but not currently loaded by the host
     document. Falls through to 'system-ui'. Phase 2 item: either load the
     font, swap the stack to 'Inter', or accept the system fallback. */

  /* ── TYPOGRAPHY: scale ─────────────────────────────────────────────────── */
  --fs-xs:   0.6875rem;  /* 11px */
  --fs-sm:   0.8125rem;  /* 13px */
  --fs-base: 0.9375rem;  /* 15px */
  --fs-md:   1rem;       /* 16px */
  --fs-lg:   1.25rem;    /* 20px */
  --fs-xl:   1.75rem;    /* 28px */
  --fs-xxl:  2.5rem;     /* 40px */

  /* Scale aliases (legacy --text-* names) */
  --text-2xs:  var(--fs-xs);
  --text-xs:   var(--fs-xs);
  --text-sm:   var(--fs-sm);
  --text-base: var(--fs-base);
  --text-md:   var(--fs-md);
  --text-lg:   var(--fs-lg);
  --text-xl:   var(--fs-xl);

  /* ── TYPOGRAPHY: weights ───────────────────────────────────────────────── */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ── TYPOGRAPHY: line heights ──────────────────────────────────────────── */
  --lh-tight:   1.15;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* ── TYPOGRAPHY: letter spacing ────────────────────────────────────────── */
  --ls-tight:  -0.01em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-wider:  0.08em;

  /* ── SPACING: 4px grid ─────────────────────────────────────────────────── */
  --space-3xs: 0.125rem; /* 2px  */
  --space-2xs: 0.25rem;  /* 4px  */
  --space-xs:  0.5rem;   /* 8px  */
  --space-sm:  0.75rem;  /* 12px */
  --space-md:  1rem;     /* 16px */
  --space-lg:  1.5rem;   /* 24px */
  --space-xl:  2rem;     /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */

  /* ── RADIUS ────────────────────────────────────────────────────────────── */
  --radius-md:     8px;
  --radius-lg:     12px;
  --radius-pill:   999px;
  --radius-circle: 50%;

  /* Radius alias */
  --radius:        var(--radius-lg);
  /* Phase 1.5 retired --radius-sm (0.75rem off-canon) and --radius-xs (0.5rem
     off-canon). New consumers use --radius-md (8px) or --radius-lg (12px). */

  /* ── MOTION ────────────────────────────────────────────────────────────── */
  --duration-instant: 50ms;
  --duration-fast:    150ms;
  --duration-medium:  250ms;
  --duration-slow:    400ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease:        var(--ease-out);  /* legacy alias */

  /* ── BREAKPOINTS: size-based (canonical — use these in @media queries) ── */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* Breakpoints: semantic aliases (reference only — CSS cannot substitute
     custom properties into @media query conditions). */
  --bp-mobile:  var(--bp-sm);   /* 640px  — mobile max */
  --bp-tablet:  var(--bp-lg);   /* 1024px — tablet max */
  --bp-desktop: var(--bp-xl);   /* 1280px — small desktop max */
  --bp-wide:    1600px;         /* wide desktop — no canonical size equivalent */

  /* ── Z-INDEX scale ─────────────────────────────────────────────────────── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-panel:    500;
  --z-modal:    1000;
  --z-toast:    2000;

  /* ── LAYOUT (platform-locked sizing) ───────────────────────────────────── */
  --container-max: 1280px;
  --sidebar-w:     220px;

  /* ── ACCENT (global alias) ─────────────────────────────────────────────── */
  /* --accent is a global alias of --color-accent (per-theme). Lazy var()
     evaluation picks up the active theme's --color-accent at the use-site.
     --accent-rgb is defined PER THEME in tokens.teglo.{dark,light}.css so
     --accent-glow resolves with the right RGB in each mode. */
  --accent: var(--color-accent);

  /* ────────────────────────────────────────────────────────────────────────
     DEPRECATION ALIASES (Phase 1 broken-ref fix)
     ────────────────────────────────────────────────────────────────────────
     These map theme-agnostic broken references found in teglo-dashboard to
     the canonical token. Phase 2 sweep migrates consumers to the canonical
     name, then deletes these aliases.
     ────────────────────────────────────────────────────────────────────── */
  --font:      var(--font-body);  /* @deprecated — use --font-body  (1 use-site in source) */
  --font-base: var(--font-body);  /* @deprecated — use --font-body  (1 use-site in source) */
}

/* ============================================================================
   ACCESSIBILITY: prefers-reduced-motion
   ============================================================================
   Operating-system-level reduced-motion preference zeroes all motion durations.
   Components consuming --duration-* tokens get accessibility-respecting motion
   for free — no per-component code, no JS detection, no React effect.
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast:    0ms;
    --duration-medium:  0ms;
    --duration-slow:    0ms;
  }
}

/* Legacy domain tokens (--sonar*, --whmcs*, --bucket-*) live in
   tokens.legacy.css, loaded LAST by host pages that need them.
   Phase 0 prototype does NOT load tokens.legacy.css. */