/* ═══════════════════════════════════════════════════════════════════
   poma.life — Shared Design Tokens
   Reference: PomaRender glass UI aesthetic
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Color Palette (HSL values, use with hsl() or Tailwind) ──── */

  /* Backgrounds */
  --poma-bg:              222 47% 11%;     /* #0f172a — primary background */
  --poma-surface:         217 33% 17%;     /* #1e293b — card/panel surface */
  --poma-surface-raised:  217 33% 20%;     /* #253348 — elevated surface */

  /* Text */
  --poma-text:            214 32% 91%;     /* #e2e8f0 — primary text */
  --poma-text-muted:      215 20% 65%;     /* #94a3b8 — secondary text */
  --poma-text-faint:      217 19% 45%;     /* #5d6b82 — tertiary/disabled */

  /* Brand / Primary (Indigo) */
  --poma-primary:         239 84% 67%;     /* #818cf8 — primary actions */
  --poma-primary-hover:   239 84% 57%;     /* #6366f1 — primary hover */
  --poma-primary-subtle:  239 84% 67% / 0.15;  /* subtle highlight */

  /* Status Colors */
  --poma-success:         160 84% 39%;     /* #059669 — emerald */
  --poma-warning:         45 93% 47%;      /* #eab308 — yellow */
  --poma-danger:          0 84% 60%;       /* #ef4444 — red */

  /* Borders */
  --poma-border:          217 33% 18%;     /* #1e293b — standard border */
  --poma-border-subtle:   217 33% 18% / 0.4;   /* glass panel border */

  /* Input */
  --poma-input-bg:        217 33% 15%;     /* input background */
  --poma-input-border:    217 33% 25%;     /* input border */
  --poma-ring:            239 84% 67%;     /* focus ring */

  /* ── Typography ────────────────────────────────────────────────── */
  --poma-font-sans:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --poma-font-mono:       'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Font Sizes */
  --poma-text-xs:         0.6875rem;       /* 11px — badges, labels */
  --poma-text-sm:         0.8125rem;       /* 13px — secondary text */
  --poma-text-base:       0.875rem;        /* 14px — body text */
  --poma-text-lg:         1.125rem;        /* 18px — headings */
  --poma-text-xl:         1.5rem;          /* 24px — page titles */

  /* ── Spacing Scale (4px base) ──────────────────────────────────── */
  --poma-space-1:         0.25rem;         /* 4px */
  --poma-space-2:         0.5rem;          /* 8px */
  --poma-space-3:         0.75rem;         /* 12px */
  --poma-space-4:         1rem;            /* 16px */
  --poma-space-5:         1.25rem;         /* 20px */
  --poma-space-6:         1.5rem;          /* 24px */
  --poma-space-8:         2rem;            /* 32px */

  /* ── Border Radius ─────────────────────────────────────────────── */
  --poma-radius-sm:       0.375rem;        /* 6px — buttons, badges */
  --poma-radius-md:       0.5rem;          /* 8px — inputs, cards */
  --poma-radius-lg:       0.75rem;         /* 12px — panels, modals */
  --poma-radius-xl:       1rem;            /* 16px — glass panels */

  /* ── Shadows ───────────────────────────────────────────────────── */
  --poma-shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.3);
  --poma-shadow-md:       0 4px 6px rgba(0, 0, 0, 0.3);
  --poma-shadow-lg:       0 10px 25px rgba(0, 0, 0, 0.4);
  --poma-shadow-xl:       0 25px 50px rgba(0, 0, 0, 0.5);

  /* ── Glass Effect Tokens ───────────────────────────────────────── */
  /* Use these for the PomaRender-style glassmorphism */
  --poma-glass-bg:        rgba(15, 23, 42, 0.5);       /* 50% opacity bg */
  --poma-glass-bg-heavy:  rgba(15, 23, 42, 0.8);       /* 80% opacity bg */
  --poma-glass-border:    rgba(30, 41, 59, 0.4);        /* 40% opacity border */
  --poma-glass-blur:      30px;                          /* backdrop-blur-xl */
  --poma-glass-blur-sm:   4px;                           /* backdrop-blur-sm */
  --poma-glass-blur-md:   12px;                          /* backdrop-blur-md */

  /* ── Responsive Breakpoints (reference — use in media queries) ── */
  /* --poma-bp-sm:  640px   — phone landscape / small tablet */
  /* --poma-bp-md:  768px   — tablet portrait */
  /* --poma-bp-lg:  1024px  — tablet landscape / small desktop */
  /* --poma-bp-xl:  1280px  — desktop */
  /* --poma-bp-2xl: 1536px  — wide desktop */
}

/* ── Glass Panel Utility (works in vanilla CSS and Tailwind apps) ── */
.poma-glass {
  background: var(--poma-glass-bg);
  backdrop-filter: blur(var(--poma-glass-blur));
  -webkit-backdrop-filter: blur(var(--poma-glass-blur));
  border: 1px solid var(--poma-glass-border);
  border-radius: var(--poma-radius-xl);
}

.poma-glass-heavy {
  background: var(--poma-glass-bg-heavy);
  backdrop-filter: blur(var(--poma-glass-blur));
  -webkit-backdrop-filter: blur(var(--poma-glass-blur));
  border: 1px solid var(--poma-glass-border);
  border-radius: var(--poma-radius-xl);
}

/* ── Selection Highlight ─────────────────────────────────────────── */
::selection {
  background-color: rgba(99, 102, 241, 0.3);
  color: hsl(var(--poma-text));
}

/* ── Scrollbar (dark theme) ──────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(30, 41, 59, 0.3); }
::-webkit-scrollbar-thumb { background: rgba(71, 85, 105, 0.5); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(71, 85, 105, 0.7); }