@layer base;

/* ===== tokens & themes ===== */
@layer base {
  :root {
    /* colors - default light */
    --bg: #f9fafb;
    --bg-alt: #ffffff;
    --bg-elevated: #ffffff;
    --fg: #0f172a;
    --fg-muted: #4b5563;
    --border-subtle: rgba(148, 163, 184, 0.4);
    --accent: #0ea5e9;
    --accent-soft: rgba(14, 165, 233, 0.1);
    --accent-strong: #0369a1;
    --danger: #b91c1c;

    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;

    --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);
    --shadow-elevated: 0 18px 45px rgba(15, 23, 42, 0.14);

    --container-max: 72rem;
    --nav-height: 4.5rem;

    --motion-fast: 0.18s ease-out;
    --motion-normal: 0.28s ease-out;
    --motion-slow: 0.45s ease-out;
	
	 --danger: #b91c1c;
  }

  body[data-theme="dark"] {
    --bg: #020617;
    --bg-alt: #020617;
    --bg-elevated: #0b1120;
    --fg: #e5e7eb;
    --fg-muted: #9ca3af;
    --border-subtle: rgba(31, 41, 55, 0.9);
    --accent: #22d3ee;
    --accent-soft: rgba(56, 189, 248, 0.12);
    --accent-strong: #06b6d4;
    --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.9);
    --shadow-elevated: 0 18px 45px rgba(15, 23, 42, 0.9);
  }

  body[data-skin="glass"] {
    --bg-elevated: rgba(255, 255, 255, 0.9);
    --border-subtle: rgba(148, 163, 184, 0.45);
    backdrop-filter: blur(14px);
  }

  body[data-theme="dark"][data-skin="glass"] {
    --bg-elevated: rgba(15, 23, 42, 0.86);
  }
}