/**
 * AppBuilder Design Tokens — framework-tokens.css
 *
 * Defines the --ab-* semantic token layer that sits between Bootstrap's brand
 * tokens (--bs-*) and component styles. Components reference --ab-* tokens
 * exclusively. App themes override --ab-* tokens with one [data-bs-theme] block.
 *
 * Load order: Bootstrap → this file → framework-layout.css → component <style> → app themes
 */

/* ─────────────────────────────────────────────────────────────────────────────
   :root  — Light-mode defaults (Bootstrap tokens as inputs)
   ───────────────────────────────────────────────────────────────────────────── */
:root {

  /* ── Interaction States ── */
  --ab-hover-bg:             var(--bs-tertiary-bg);
  --ab-hover-color:          inherit;
  --ab-hover-primary-bg:     rgba(var(--bs-primary-rgb), 0.08);
  --ab-hover-primary-color:  var(--bs-primary);
  --ab-active-bg:            var(--bs-primary-bg-subtle);
  --ab-active-color:         var(--bs-primary);
  --ab-active-border:        var(--bs-primary-border-subtle);
  --ab-focus-ring:           0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
  --ab-focus-border:         var(--bs-primary);

  /* ── Border Radius ── */
  --ab-radius-xs:   4px;      /* inline chips, badges */
  --ab-radius-sm:   6px;      /* buttons, inputs */
  --ab-radius-md:   8px;      /* cards, panels, dropdowns */
  --ab-radius-lg:   12px;     /* modals, large panels */
  --ab-radius-xl:   16px;     /* full-screen overlays */
  --ab-radius-pill: 999px;    /* pill-shaped elements */
  --ab-radius-full: 50%;      /* circular (avatars) */

  /* ── Typography Scale ── */
  --ab-text-2xs:   0.7rem;     /* 11.2px — timestamps, metadata */
  --ab-text-xs:    0.75rem;    /* 12px — secondary labels, section headers */
  --ab-text-sm:    0.8125rem;  /* 13px — sidebar text, nav items, body secondary */
  --ab-text-base:  0.875rem;   /* 14px — body primary, form fields */
  --ab-text-md:    1rem;       /* 16px — headings, prominent content */
  --ab-text-lg:    1.125rem;   /* 18px — page titles */

  --ab-weight-normal:   400;
  --ab-weight-medium:   500;
  --ab-weight-semibold: 600;
  --ab-weight-bold:     700;

  /* Section label pattern (uppercase group headers) */
  --ab-label-size:    var(--ab-text-xs);
  --ab-label-weight:  var(--ab-weight-bold);
  --ab-label-spacing: 0.06em;
  --ab-label-color:   var(--bs-secondary-color);

  /* ── Elevation / Shadow ── */
  --ab-shadow-none: none;
  --ab-shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.06);
  --ab-shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.07);
  --ab-shadow-md:   0 4px 16px rgba(0, 0, 0, 0.10);
  --ab-shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.14);
  --ab-shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.18);

  /* ── Control Sizing ── */
  --ab-ctrl-sm:      32px;
  --ab-ctrl:         38px;    /* standard — matches all header action buttons */
  --ab-ctrl-lg:      44px;    /* touch-friendly minimum (WCAG 2.5.5) */

  --ab-btn-pad-sm:   0.25rem 0.625rem;
  --ab-btn-pad:      0.4375rem 1rem;
  --ab-btn-pad-lg:   0.5625rem 1.25rem;

  /* ── Z-Index Scale ── */
  --ab-z-content:  1;
  --ab-z-raised:   10;
  --ab-z-dropdown: 1000;
  --ab-z-sticky:   1020;
  --ab-z-header:   1030;
  --ab-z-sidebar:  1040;
  --ab-z-backdrop: 1050;
  --ab-z-modal:    1060;
  --ab-z-overlay:  1070;
  --ab-z-toast:    2000;
  --ab-z-progress: 2040;
  --ab-z-critical: 2050;

  /* ── Motion ── */
  --ab-t-fast:   120ms ease;
  --ab-t-base:   150ms ease;
  --ab-t-slow:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --ab-lift-sm:  translateY(-1px);
  --ab-lift-md:  translateY(-3px);

  /* ── Spacing Scale (Tailwind/Bootstrap standards) ── */
  --ab-space-1: 0.25rem;  /* 4px */
  --ab-space-2: 0.5rem;   /* 8px */
  --ab-space-3: 0.75rem;  /* 12px */
  --ab-space-4: 1rem;     /* 16px */
  --ab-space-5: 1.25rem;  /* 20px */
  --ab-space-6: 1.5rem;   /* 24px */
  --ab-space-8: 2rem;     /* 32px */
  --ab-space-10: 2.5rem;  /* 40px */

  /* ── Font Sizes ── */
  --ab-font-size-xs:   0.75rem;
  --ab-font-size-sm:   0.875rem;
  --ab-font-size-base: 1rem;
  --ab-font-size-lg:   1.125rem;
  --ab-font-size-xl:   1.25rem;
  --ab-font-size-2xl:  1.5rem;
  --ab-font-size-3xl:  1.875rem;

  /* ── Monospace Font ── */
  --ab-font-mono:      var(--bs-font-monospace);

  /* ── Semantic Text Color Fallbacks ── */
  --ab-text-primary:   var(--bs-body-color);
  --ab-text-secondary: var(--bs-secondary-color);
  --ab-text-tertiary:  var(--bs-tertiary-color);

  /* ── Surface Elevation ── */
  --ab-surface-raised: var(--bs-secondary-bg);
  --ab-surface-sunken: var(--bs-tertiary-bg);
  --ab-surface-hover:  var(--ab-hover-bg);

  /* ── Borders ── */
  --ab-border-default: var(--bs-border-color);
  --ab-border-strong:  var(--bs-border-color-translucent);

  /* ── Accent/Brand Accent Mapping ── */
  --ab-color-brand-50:  rgba(var(--bs-primary-rgb), 0.05);
  --ab-color-brand-400: var(--bs-primary);
  --ab-color-brand-600: var(--bs-primary);
  --ab-color-brand-700: color-mix(in srgb, var(--bs-primary), black 15%);
  --ab-color-brand-800: color-mix(in srgb, var(--bs-primary), black 25%);

  /* ── Transitions ── */
  --ab-transition-fast: 150ms ease-in-out;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Dark-mode adjustments
   Bootstrap's [data-bs-theme="dark"] redefines --bs-* tokens automatically,
   so most --ab-* tokens adapt without any override here. Only tokens whose
   defaults are NOT derived from Bootstrap tokens need explicit dark overrides.
   ───────────────────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"],
[data-bs-theme$="-dark"] {
  --ab-hover-bg:   rgba(255, 255, 255, 0.06);
  --ab-active-bg:  rgba(var(--bs-primary-rgb), 0.20);
  --ab-focus-ring: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.25);

  --ab-shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.20);
  --ab-shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.25);
  --ab-shadow-md:  0 4px 16px rgba(0, 0, 0, 0.30);
  --ab-shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.35);
  --ab-shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.40);

  /* ── Dark Theme Semantic Override Additions ── */
  --ab-border-strong:  rgba(255, 255, 255, 0.15);
  --ab-color-brand-50: rgba(var(--bs-primary-rgb), 0.1);
}