/* ═══════════════════════════════════════════════════════════════════════════
   variables.css — Kmisetas Design Token System
   Apple Liquid Glass · Dark Mode · Premium Textile SPA
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ─── Liquid Glass · Blur & Saturation ──────────────────────────────────── */
  --glass-blur-panel:   22px;
  --glass-blur-control: 15px;
  --glass-saturation:   190%;

  /* ─── Liquid Glass · Tint Layers ───────────────────────────────────────── */
  --glass-tint:       rgba(20, 20, 25, 0.50);
  --glass-tint-clear: rgba(20, 20, 25, 0.25);

  /* ─── Liquid Glass · Borders ───────────────────────────────────────────── */
  --glass-border:        1px solid rgba(255, 255, 255, 0.45);
  --glass-border-subtle: 1px solid rgba(255, 255, 255, 0.20);

  /* ─── Liquid Glass · Shadows ───────────────────────────────────────────── */
  --glass-shadow:
    0 10px 30px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);

  --glass-shadow-elevated:
    0 20px 50px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);

  /* ─── Liquid Glass · Specular Gradient ─────────────────────────────────── */
  --glass-gradient: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.32) 0%,
    rgba(255, 255, 255, 0.08) 100%
  );

  /* ─── Accent Colors ─────────────────────────────────────────────────────── */
  --accent-blue:    #007aff;
  --accent-cyan:    #00c7ff;
  --accent-amber:   #ff9500;
  --accent-magenta: #ff2d55;

  /* ─── Accent RGB components (for rgba() usage) ──────────────────────────── */
  --accent-blue-rgb:    0,   122, 255;
  --accent-cyan-rgb:    0,   199, 255;
  --accent-amber-rgb:   255, 149,   0;
  --accent-magenta-rgb: 255,  45,  85;

  /* ─── Border Radii ──────────────────────────────────────────────────────── */
  --radius-window: 22px;
  --radius-card:   16px;
  --radius-field:  10px;
  --radius-pill:   999px;

  /* ─── Typography ────────────────────────────────────────────────────────── */
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  --font-mono:   "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;

  /* ─── Font Sizes (fluid scale) ──────────────────────────────────────────── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  44px;

  /* ─── Z-Index Layers ────────────────────────────────────────────────────── */
  --z-background: -1;
  --z-canvas:      0;
  --z-content:     1;
  --z-glass:      10;
  --z-nav:       100;
  --z-modal:    1000;
  --z-toast:    1100;

  /* ─── Motion · Spring Easing ────────────────────────────────────────────── */
  --spring:          cubic-bezier(0.16, 1, 0.3, 1);
  --spring-duration: 0.25s;

  /* ─── Motion · Soft Ease ────────────────────────────────────────────────── */
  --ease-out:          cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-out-duration: 0.20s;

  /* ─── Text Hierarchy ────────────────────────────────────────────────────── */
  --text-primary:   rgba(255, 255, 255, 0.95);
  --text-secondary: rgba(255, 255, 255, 0.65);
  --text-tertiary:  rgba(255, 255, 255, 0.40);
  --text-disabled:  rgba(255, 255, 255, 0.25);

  /* ─── Spacing Scale ─────────────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ─── Touch targets ─────────────────────────────────────────────────────── */
  --tap-target: 44px;
}

/* ─── Reduced-motion overrides ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --spring-duration:   0.01ms;
    --ease-out-duration: 0.01ms;
  }
}