/*
 * Zafirra Theme System — Token Base
 * --zt-* semantic layer + Bootstrap 5 bridge
 * Load order: after core.css, before theme-<name>.css
 */

:root {
  /* ── Surface ─────────────────────────────────────────── */
  --zt-bg:            #ffffff;
  --zt-surface:       #f8f9fa;
  --zt-surface-2:     #eef0f3;
  --zt-border:        #e4e6eb;
  --zt-border-strong: #d0d3d9;

  /* ── Text ────────────────────────────────────────────── */
  --zt-text:       #1a1a1a;
  --zt-text-muted: #6b7280;
  --zt-text-soft:  #9aa1ad;

  /* ── Brand / semantic ────────────────────────────────── */
  --zt-primary:          #7367f0;
  --zt-primary-contrast: #ffffff;
  --zt-success:          #28c76f;
  --zt-warning:          #ff9f43;
  --zt-danger:           #ea5455;
  --zt-info:             #00cfe8;

  /* ── Soft tints (12 %) ───────────────────────────────── */
  --zt-primary-soft: color-mix(in srgb, var(--zt-primary) 12%, transparent);
  --zt-success-soft: color-mix(in srgb, var(--zt-success) 12%, transparent);
  --zt-warning-soft: color-mix(in srgb, var(--zt-warning) 12%, transparent);
  --zt-danger-soft:  color-mix(in srgb, var(--zt-danger)  12%, transparent);
  --zt-info-soft:    color-mix(in srgb, var(--zt-info)    12%, transparent);

  /* ── Typography ──────────────────────────────────────── */
  --zt-font-sans:    "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --zt-font-display: var(--zt-font-sans);
  --zt-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --zt-tracking-tight:  -0.01em;
  --zt-tracking-normal:  0;
  --zt-tracking-wide:    0.02em;

  /* ── Radius ──────────────────────────────────────────── */
  --zt-radius-sm: 6px;
  --zt-radius-md: 10px;
  --zt-radius-lg: 16px;

  /* ── Shadows ─────────────────────────────────────────── */
  --zt-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --zt-shadow-md: 0 4px 12px rgba(0, 0, 0, .08);
  --zt-shadow-lg: 0 12px 32px rgba(0, 0, 0, .12);

  /* ── Focus ring ──────────────────────────────────────── */
  --zt-focus-ring-color:  var(--zt-primary);
  --zt-focus-ring-width:  2px;
  --zt-focus-ring-offset: 2px;

  /* ── Scrollbar ───────────────────────────────────────── */
  /* Derived from --zt-text so it auto-adapts to mode (light: dark thumb, dark: light thumb) */
  --zt-scrollbar-width:        6px;
  --zt-scrollbar-width-hover:  8px;
  --zt-scrollbar-track:        transparent;
  --zt-scrollbar-thumb:        color-mix(in srgb, var(--zt-text) 18%, transparent);
  --zt-scrollbar-thumb-hover:  color-mix(in srgb, var(--zt-text) 35%, transparent);
  --zt-scrollbar-thumb-active: var(--zt-primary);

  /* ── Bootstrap 5 bridge ──────────────────────────────── */
  /* Every existing template inherits the new palette for free */
  --bs-body-bg:           var(--zt-bg);
  --bs-body-color:        var(--zt-text);
  --bs-primary:           var(--zt-primary);
  --bs-success:           var(--zt-success);
  --bs-warning:           var(--zt-warning);
  --bs-danger:            var(--zt-danger);
  --bs-info:              var(--zt-info);
  --bs-border-color:      var(--zt-border);
  --bs-body-font-family:  var(--zt-font-sans);
  --bs-font-monospace:    var(--zt-font-mono);
  --bs-border-radius:     var(--zt-radius-md);
  --bs-border-radius-sm:  var(--zt-radius-sm);
  --bs-border-radius-lg:  var(--zt-radius-lg);
  --bs-box-shadow-sm:     var(--zt-shadow-sm);
  --bs-box-shadow:        var(--zt-shadow-md);
  --bs-box-shadow-lg:     var(--zt-shadow-lg);
  --bs-secondary-bg:      var(--zt-surface);
  --bs-tertiary-bg:       var(--zt-surface-2);
  --bs-secondary-color:   var(--zt-text-muted);
  --bs-link-color:        var(--zt-primary);

  /* ── Sneat bridge ────────────────────────────────────── */
  --bs-card-bg:           var(--zt-surface);
  --bs-card-border-color: var(--zt-border);
  --bs-card-color:        var(--zt-text);
  --bs-menu-bg:           var(--zt-surface);
  --bs-menu-color:        var(--zt-text);
  --bs-menu-active-bg:    var(--zt-primary-soft);
  --bs-menu-active-color: var(--zt-primary);
  --bs-navbar-bg:         var(--zt-surface);

  /* ── Gradient tokens (merge-plan §4) ─────────────────── */
  /* Each new theme-X.css overrides these to lock in its exact gradient.
     Defaults derive from --zt-primary so existing themes get a sensible
     gradient automatically (no-op visual change). */
  --zt-grad-primary:
    linear-gradient(135deg,
      var(--zt-primary) 0%,
      color-mix(in srgb, var(--zt-primary) 60%, var(--zt-info)) 100%);
  --zt-grad-hero:
    radial-gradient(60% 50% at 80% 10%,
      color-mix(in srgb, var(--zt-primary) 35%, transparent) 0%, transparent 60%),
    radial-gradient(50% 50% at 10% 90%,
      color-mix(in srgb, var(--zt-info) 25%, transparent) 0%, transparent 60%);
  --zt-grad-text:
    linear-gradient(120deg,
      var(--zt-text) 0%,
      var(--zt-text-muted) 60%,
      var(--zt-primary) 100%);
  --zt-grad-border:
    linear-gradient(135deg,
      color-mix(in srgb, var(--zt-text) 22%, transparent),
      color-mix(in srgb, var(--zt-text)  4%, transparent));

  /* ── Accent satellites (Haki parity) ─────────────────── */
  --zt-primary-hover: color-mix(in srgb, var(--zt-primary) 88%, black);
  --zt-primary-ring:  color-mix(in srgb, var(--zt-primary) 18%, transparent);

  /* ── Glass tokens (promoted) ─────────────────────────── */
  --zt-glass-bg:     color-mix(in srgb, var(--zt-bg) 72%, transparent);
  --zt-glass-border: color-mix(in srgb, var(--zt-text) 8%, transparent);
  --zt-glass-blur:   12px;

  /* ── Motion ──────────────────────────────────────────── */
  --zt-ease:     cubic-bezier(.2, .7, .2, 1);
  --zt-ease-out: cubic-bezier(.16, 1, .3, 1);
  --zt-ease-in:  cubic-bezier(.7, 0, .84, 0);
  --zt-dur-1: 160ms;
  --zt-dur-2: 280ms;
  --zt-dur-3: 480ms;
  --zt-dur-4: 800ms;
}