/* ============================================================
   Vapy Premium Design System — Tokens v2.0
   ============================================================ */
:root {
  /* ── Brand ─────────────────────────────────────── */
  --vapy-primary:   #f2e82a;
  --vapy-primary-dark: #d8ce1e;
  --vapy-dark:      #3b4112;
  --vapy-accent:    #5a6820;
  --vapy-secondary: #899e6c;

  /* ── Page Backgrounds ──────────────────────────── */
  --color-bg:        #f4f5f0;
  --color-card:      #ffffff;
  --color-sidebar:   #3b4112;

  /* ── Borders ───────────────────────────────────── */
  --color-border:        #e4e6de;
  --color-border-subtle: #edeee6;
  --color-border-strong: #cdd0c0;

  /* ── Text ──────────────────────────────────────── */
  --text-primary:   #23270e;
  --text-secondary: #5a6045;
  --text-muted:     #8a9175;
  --text-on-dark:   rgba(255, 255, 255, 0.88);
  --text-on-dark-muted: rgba(255, 255, 255, 0.55);

  /* ── Status / Semantic ─────────────────────────── */
  --state-success:        #15803d;
  --state-success-bg:     #dcfce7;
  --state-success-border: #86efac;
  --state-error:          #dc2626;
  --state-error-bg:       #fee2e2;
  --state-error-border:   #fca5a5;
  --state-warning:        #d97706;
  --state-warning-bg:     #fef3c7;
  --state-warning-border: #fde68a;
  --state-info:           #2563eb;
  --state-info-bg:        #dbeafe;
  --state-info-border:    #93c5fd;
  --state-pending-bg:     #fef9c3;
  --state-pending:        #713f12;

  /* ── Typography ────────────────────────────────── */
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-xs:   11px;
  --font-size-sm:   12px;
  --font-size-base: 14px;
  --font-size-md:   15px;
  --font-size-lg:   18px;
  --font-size-xl:   22px;
  --font-size-2xl:  28px;
  --font-size-3xl:  36px;

  /* ── Spacing (8px grid) ────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  48px;
  --space-9:  64px;

  /* ── Border Radius ─────────────────────────────── */
  --radius-sm:    6px;
  --radius-md:    8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* ── Shadows ───────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.10), 0 8px 12px rgba(0, 0, 0, 0.05);
  --shadow-sidebar: 4px 0 24px rgba(0, 0, 0, 0.15);

  /* ── Transitions ───────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;

  /* ── Layout ────────────────────────────────────── */
  --sidebar-width:   240px;
  --topbar-height:    60px;
  --content-padding:  24px;
  --layout-max-width: 1440px;
  --grid-gap:         20px;

  /* ── Backward Compatibility Aliases ───────────── */
  --vapy-yellow:       var(--vapy-primary);
  --vapy-green:        var(--vapy-secondary);
  --vapy-bg:           var(--color-bg);
  --vapy-card:         var(--color-card);
  --vapy-border:       var(--color-border);
  --vapy-muted:        var(--text-secondary);
  --vapy-shadow:       var(--shadow-md);
  --vapy-text:         var(--text-primary);
  --radius-input:      var(--radius-lg);
  --radius-card:       var(--radius-lg);
  --radius-button:     var(--radius-lg);
  --radius-modal:      var(--radius-2xl);
  --shadow-card:       var(--shadow-md);
  --shadow-card-hover: var(--shadow-lg);
  --layout-padding:    var(--content-padding);
  --font-h1-size:   var(--font-size-3xl);
  --font-h1-weight: 700;
  --font-h2-size:   var(--font-size-xl);
  --font-h2-weight: 600;
  --font-h3-size:   var(--font-size-lg);
  --font-h3-weight: 600;
  --font-body-size: var(--font-size-base);
  --font-body-weight: 400;
  --font-sm-size:   var(--font-size-sm);
  --font-sm-weight: 400;
  --font-caption-size:   var(--font-size-xs);
  --font-caption-weight: 400;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: var(--font-size-3xl); font-weight: 700; line-height: 1.2; }
h2 { font-size: var(--font-size-xl);  font-weight: 600; line-height: 1.3; }
h3 { font-size: var(--font-size-lg);  font-weight: 600; line-height: 1.4; }