/* ── Zeerka Design Tokens ────────────────────────────────────────────────────
   Semantic layer between Bootstrap and Zeerka component styles.
   These tokens are the single place a designer (or future theme engine) changes
   to restyle the app. Bootstrap's dark-mode variables are inherited automatically
   since each token delegates to the matching --bs-* variable at runtime.

   Usage in components: reach for --z-* instead of --bs-* directly.
   ─────────────────────────────────────────────────────────────────────────── */

:root {

  /* ── Surfaces ─────────────────────────────────────────────────────────────
     Three elevation levels for layered backgrounds. */
  --z-surface:         var(--bs-body-bg);       /* page / base layer        */
  --z-surface-raised:  var(--bs-secondary-bg);  /* tab columns, sidebars    */
  --z-surface-overlay: var(--bs-tertiary-bg);   /* popovers, tooltips, FAB  */
  --z-surface-subtle: var(--bs-light-bg-subtle); /* very faint tint, e.g. favicon preview */
  --z-card-bg:        var(--bs-body-bg);          /* card background — intentionally equals --z-surface.
                                                     NOTE: do NOT use var(--bs-card-bg) here; that variable
                                                     is component-scoped (.card only) and silently fails
                                                     inside CSS functions (e.g. linear-gradient) at :root. */

  /* ── Text ─────────────────────────────────────────────────────────────────
     Four legibility levels matching Bootstrap's body / secondary / tertiary / emphasis. */
  --z-text:              var(--bs-body-color);
  --z-text-muted:        var(--bs-secondary-color);
  --z-text-subtle:       var(--bs-tertiary-color);
  --z-text-emphasis:     var(--bs-emphasis-color);
  --z-text-emphasis-rgb: var(--bs-emphasis-color-rgb);

  /* ── Accent ───────────────────────────────────────────────────────────────
     Primary brand color — the main hook for user theme customization later.
     --z-accent-rgb mirrors the RGB channel triple so rgba() stays composable. */
  --z-accent:        var(--bs-primary);
  --z-accent-rgb:    var(--bs-primary-rgb);
  --z-accent-subtle: var(--bs-primary-bg-subtle);

  /* ── Borders & Radius ─────────────────────────────────────────────────────*/
  --z-border:              var(--bs-border-color);
  --z-border-translucent:  var(--bs-border-color-translucent);
  --z-radius:              var(--bs-border-radius);
  --z-radius-sm:           var(--bs-border-radius-sm);

  /* ── Semantic colors ─────────────────────────────────────────────────────
     Utility palette — not brand colors, but still tokenized so components
     are fully Bootstrap-agnostic. */
  --z-secondary:           var(--bs-secondary);    /* Bootstrap's gray secondary (used for badges, chips) */
  --z-danger:              var(--bs-danger);
  --z-danger-rgb:          var(--bs-danger-rgb);
  --z-danger-subtle:       var(--bs-danger-bg-subtle);
  --z-warning:             var(--bs-warning);
  --z-warning-subtle:      var(--bs-warning-bg-subtle);
  --z-warning-text:        var(--bs-warning-text-emphasis);
  --z-success:             var(--bs-success);
  --z-success-text:        var(--bs-success-text-emphasis);
  --z-info:                var(--bs-info);
  --z-link:                var(--bs-link-color);

  /* ── Layout ──────────────────────────────────────────────────────────────
     Grid gutter — used for full-bleed layout math. */
  --z-gutter-x: var(--bs-gutter-x, 1.5rem);

  /* ── Nav tabs ────────────────────────────────────────────────────────────
     --bs-nav-tabs-* are scoped to .nav-tabs, not :root — use root equivalents. */
  --z-nav-tabs-border-color: var(--bs-border-color);
  --z-nav-tabs-border-width: var(--bs-border-width);

  /* ── Dropdown ────────────────────────────────────────────────────────────
     --bs-dropdown-* are scoped to .dropdown-menu, not :root — use root equivalents. */
  --z-dropdown-bg:               var(--bs-body-bg);
  --z-dropdown-link:             var(--bs-body-color);
  --z-dropdown-link-hover:       var(--bs-body-color);
  --z-dropdown-link-hover-bg:    var(--bs-tertiary-bg);

  /* ── Focus ring ───────────────────────────────────────────────────────────
     Used on interactive elements. Matches --z-accent once the designer
     connects brand color to focus feedback. */
  --z-focus-ring: #258cfb;

  /* ── Typography ───────────────────────────────────────────────────────────
     Font families — the designer replaces these with brand-chosen typefaces.
     Font sizes use a named scale so the designer controls the full type ramp
     from one place rather than hunting magic numbers across components. */
  --z-font-family:      var(--bs-body-font-family);
  --z-font-family-mono: var(--bs-font-monospace);

  --z-text-2xs:  0.625rem;   /* ~10px — tiny labels, badges, dense widgets */
  --z-text-xs:   0.75rem;    /* ~12px — small metadata, captions           */
  --z-text-sm:   0.875rem;   /* ~14px — secondary text, table cells        */
  --z-text-base: 1rem;       /* ~16px — body / default                     */
  --z-text-lg:   1.125rem;   /* ~18px — slightly emphasized                */
  --z-text-xl:   1.25rem;    /* ~20px — section headings                   */
  --z-text-2xl:  1.5rem;     /* ~24px — modal titles, panel headers        */
  --z-text-3xl:  2rem;       /* ~32px — large display numbers              */

  /* ── Spacing ────────────────────────────────────────────────────────────
     4 px base grid. Use these instead of arbitrary px/rem values so the
     designer can rebalance density by editing this one block. */
  --z-space-1:  0.25rem;   /*  4px */
  --z-space-2:  0.5rem;    /*  8px */
  --z-space-3:  0.75rem;   /* 12px */
  --z-space-4:  1rem;      /* 16px */
  --z-space-5:  1.25rem;   /* 20px */
  --z-space-6:  1.5rem;    /* 24px */
  --z-space-8:  2rem;      /* 32px */
  --z-space-10: 2.5rem;    /* 40px */
  --z-space-12: 3rem;      /* 48px */

}