/**
 * Pilbe Design System — Canonical Tokens
 *
 * Source of truth: pilbe_design_system_v1.md
 * This file is enqueued globally at priority 1.
 * ALL Pilbe CSS files depend on this. Never redefine --pilbe-* elsewhere.
 *
 * @package Pilbe
 * @version 1.0.0
 */

:root {

  /* ================================================================
     1. BRAND — Sky blue scale
     ================================================================ */
  --pilbe-brand-50:  #E8F7FC;
  --pilbe-brand-100: #CEEEF8;
  --pilbe-brand-200: #9CDEF1;
  --pilbe-brand-300: #6BCDEA;
  --pilbe-brand-400: #47BDE4;
  --pilbe-brand-500: #25ADDE;  /* THE brand */
  --pilbe-brand-600: #1A93C4;
  --pilbe-brand-700: #147BA4;
  --pilbe-brand-800: #0F5F7D;
  --pilbe-brand-900: #0A4A60;

  /* Gradient — reserved for single primary CTA + active sidebar only */
  --pilbe-gradient-start: #3F65F3;
  --pilbe-gradient-end:   #5D40DD;
  --pilbe-gradient:       linear-gradient(135deg, #3F65F3 0%, #5D40DD 100%);
  --pilbe-gradient-hover: linear-gradient(135deg, #3558E8 0%, #5335D1 100%);

  /* ================================================================
     2. NEUTRAL — Warm-neutral scale
     ================================================================ */
  --pilbe-neutral-0:   #FFFFFF;
  --pilbe-neutral-50:  #F9FAFB;
  --pilbe-neutral-100: #F5F7FA;
  --pilbe-neutral-200: #E8ECF1;
  --pilbe-neutral-300: #D1D5DB;
  --pilbe-neutral-400: #9CA3AF;
  --pilbe-neutral-500: #6B7280;
  --pilbe-neutral-600: #4B5564;
  --pilbe-neutral-700: #374151;
  --pilbe-neutral-800: #1F2937;
  --pilbe-neutral-900: #1A1D26;
  --pilbe-neutral-950: #0F172A;

  /* ================================================================
     3. SEMANTIC
     ================================================================ */
  --pilbe-success-50:  #ECFDF5;
  --pilbe-success-500: #10B981;
  --pilbe-success-700: #047857;

  --pilbe-warning-50:  #FFFBEB;
  --pilbe-warning-500: #F59E0B;
  --pilbe-warning-700: #B45309;

  --pilbe-danger-50:  #FEF2F2;
  --pilbe-danger-500: #EF4444;
  --pilbe-danger-700: #B91C1C;

  --pilbe-info-50:  #E8F7FC;
  --pilbe-info-500: #25ADDE;

  /* ================================================================
     4. SURFACE & STATE — Components reference these, never raw colours
     ================================================================ */
  --pilbe-bg-page:          var(--pilbe-neutral-100);
  --pilbe-bg-surface:       var(--pilbe-neutral-0);
  --pilbe-bg-surface-hover: var(--pilbe-neutral-50);
  --pilbe-bg-subtle:        var(--pilbe-neutral-50);
  --pilbe-bg-sidebar:       var(--pilbe-neutral-950);

  --pilbe-border-default: var(--pilbe-neutral-200);
  --pilbe-border-strong:  var(--pilbe-neutral-300);
  --pilbe-border-focus:   var(--pilbe-brand-500);

  --pilbe-text-primary:   var(--pilbe-neutral-900);
  --pilbe-text-secondary: var(--pilbe-neutral-500);
  --pilbe-text-muted:     var(--pilbe-neutral-400);
  --pilbe-text-inverse:   var(--pilbe-neutral-0);
  --pilbe-text-link:      var(--pilbe-brand-600);

  --pilbe-overlay: rgba(15, 23, 42, 0.6);

  /* ================================================================
     5. TYPOGRAPHY
     ================================================================ */
  --pilbe-font: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Font sizes (with line-heights) */
  --pilbe-text-display: 48px;
  --pilbe-lh-display:   56px;
  --pilbe-text-h1:      36px;
  --pilbe-lh-h1:        44px;
  --pilbe-text-h2:      28px;
  --pilbe-lh-h2:        36px;
  --pilbe-text-h3:      22px;
  --pilbe-lh-h3:        30px;
  --pilbe-text-h4:      18px;
  --pilbe-lh-h4:        26px;
  --pilbe-text-lg:      16px;
  --pilbe-lh-lg:        24px;
  --pilbe-text-base:    15px;
  --pilbe-lh-base:      22px;
  --pilbe-text-sm:      13px;
  --pilbe-lh-sm:        20px;
  --pilbe-text-xs:      12px;
  --pilbe-lh-xs:        18px;
  --pilbe-text-micro:   11px;
  --pilbe-lh-micro:     16px;

  /* ================================================================
     6. SPACING — 4px base
     ================================================================ */
  --pilbe-space-0:  0;
  --pilbe-space-1:  4px;
  --pilbe-space-2:  8px;
  --pilbe-space-3:  12px;
  --pilbe-space-4:  16px;
  --pilbe-space-5:  20px;
  --pilbe-space-6:  24px;
  --pilbe-space-8:  32px;
  --pilbe-space-10: 40px;
  --pilbe-space-12: 48px;
  --pilbe-space-16: 64px;
  --pilbe-space-20: 80px;
  --pilbe-space-24: 96px;
  --pilbe-space-32: 128px;

  /* ================================================================
     7. RADII
     ================================================================ */
  --pilbe-radius-xs:     4px;
  --pilbe-radius-sm:     6px;
  --pilbe-radius-md:     8px;
  --pilbe-radius-lg:     12px;   /* default card */
  --pilbe-radius-xl:     16px;
  --pilbe-radius-2xl:    24px;
  --pilbe-radius-pill:   999px;
  --pilbe-radius-circle: 50%;

  /* ================================================================
     8. SHADOWS
     ================================================================ */
  --pilbe-shadow-none:  none;
  --pilbe-shadow-xs:    0 1px 2px rgba(16, 24, 40, 0.04);
  --pilbe-shadow-sm:    0 1px 3px rgba(16, 24, 40, 0.04), 0 1px 2px rgba(16, 24, 40, 0.06);
  --pilbe-shadow-md:    0 4px 8px rgba(16, 24, 40, 0.06), 0 2px 4px rgba(16, 24, 40, 0.04);
  --pilbe-shadow-lg:    0 10px 24px rgba(16, 24, 40, 0.08), 0 4px 8px rgba(16, 24, 40, 0.06);
  --pilbe-shadow-xl:    0 20px 40px rgba(16, 24, 40, 0.12), 0 8px 16px rgba(16, 24, 40, 0.08);
  --pilbe-shadow-focus: 0 0 0 3px rgba(37, 173, 222, 0.24);

  /* ================================================================
     9. MOTION
     ================================================================ */
  --pilbe-duration-instant:  75ms;
  --pilbe-duration-fast:     150ms;
  --pilbe-duration-base:     200ms;
  --pilbe-duration-slow:     300ms;
  --pilbe-duration-slowest:  450ms;

  --pilbe-ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --pilbe-ease-entrance:   cubic-bezier(0, 0, 0.2, 1);
  --pilbe-ease-exit:       cubic-bezier(0.4, 0, 1, 1);
  --pilbe-ease-emphasised: cubic-bezier(0.2, 0, 0, 1);

  /* ================================================================
     10. Z-INDEX
     ================================================================ */
  --pilbe-z-base:           0;
  --pilbe-z-raised:         10;
  --pilbe-z-dropdown:       100;
  --pilbe-z-sticky:         200;
  --pilbe-z-drawer:         300;
  --pilbe-z-modal-backdrop: 400;
  --pilbe-z-modal:          410;
  --pilbe-z-toast:          500;
  --pilbe-z-command:        600;

  /* ================================================================
     11. ICONS
     ================================================================ */
  --pilbe-icon-xs:  12px;
  --pilbe-icon-sm:  16px;
  --pilbe-icon-md:  20px;
  --pilbe-icon-lg:  24px;
  --pilbe-icon-xl:  32px;
  --pilbe-icon-2xl: 48px;

  /* ================================================================
     12. AGENTS JOIN ACCENTS — Reference Inspired Redesign
     ================================================================ */
  --pilbe-accent-pink: #f43f5e;
  --pilbe-accent-pink-hover: #e11d48;
  --pilbe-accent-pink-subtle: rgba(244, 63, 94, 0.1);
  --pilbe-accent-orange: #f97316;
  --pilbe-accent-gold: #eab308;
  --pilbe-accent-gold-hover: #ca8a04;
  --pilbe-accent-gold-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --pilbe-accent-dark-card: #0f172a;
}

/* ================================================================
   REDUCED MOTION — System-wide
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --pilbe-duration-instant: 0.01ms;
    --pilbe-duration-fast:    0.01ms;
    --pilbe-duration-base:    0.01ms;
    --pilbe-duration-slow:    0.01ms;
    --pilbe-duration-slowest: 0.01ms;
  }
}

/* ================================================================
   A11Y-02: Global focus indicator for keyboard navigation
   Ensures all interactive elements have a visible focus ring,
   replacing browser defaults on older stylesheets that lacked
   explicit :focus-visible definitions.
   ================================================================ */

:focus-visible {
  outline: 2px solid var(--pilbe-brand-500);
  outline-offset: 2px;
}