/* Whim Design System — Tokens
   Single source of truth for colors, type, spacing, radii, shadows, easings.
   Mirrors src/styles/globals.css from tdeboever/td (Design System v3).
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');

:root {
  /* ===== Backgrounds (Dusk default) ===== */
  --bg-deep:   #1a1625;
  --bg-mid:    #221e2e;
  --bg-raised: #2a2537;
  --bg-float:  #332d42;

  /* ===== Surfaces (translucent only) ===== */
  --surface-card:   rgba(255, 255, 255, 0.05);
  --surface-input:  rgba(255, 255, 255, 0.07);
  --surface-active: rgba(255, 255, 255, 0.10);
  --surface-glass:  rgba(255, 255, 255, 0.06);

  /* ===== Text ===== */
  --text-primary:   #f4f0ed;
  --text-secondary: rgba(244, 240, 237, 0.50);
  --text-ghost:     rgba(244, 240, 237, 0.22);
  --text-whisper:   rgba(244, 240, 237, 0.10);
  --text-done:      rgba(244, 240, 237, 0.15);

  /* ===== Borders (always rgba) ===== */
  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-visible: rgba(255, 255, 255, 0.10);
  --border-hover:   rgba(255, 255, 255, 0.16);

  /* ===== Joy palette ===== */
  --accent-coral:    #ff7b54;  /* primary CTA, active nav */
  --accent-rose:     #f472b6;  /* completion, celebration */
  --accent-sky:      #60a5fa;  /* time, dates */
  --accent-mint:     #4ade80;  /* success, all-clear */
  --accent-amber:    #fbbf24;  /* priority high, ✦ star */
  --accent-lavender: #a78bfa;  /* spaces / organization */

  /* ===== Priority ===== */
  --color-urgent: #ff6b6b;
  --color-high:   #fbbf24;
  --color-normal: #4ade80;

  /* ===== Accent gradients (high-impact only) ===== */
  --gradient-sunset: linear-gradient(135deg, #ff7b54, #f472b6);
  --gradient-sky:    linear-gradient(135deg, #60a5fa, #a78bfa);
  --gradient-aurora: linear-gradient(135deg, #4ade80, #60a5fa);

  /* ===== Glows ===== */
  --glow-coral:    0 0 20px rgba(255, 123, 84, 0.25);
  --glow-rose:     0 0 20px rgba(244, 114, 182, 0.25);
  --glow-sky:      0 0 20px rgba(96, 165, 250, 0.25);
  --glow-mint:     0 0 20px rgba(74, 222, 128, 0.25);
  --glow-amber:    0 0 20px rgba(251, 191, 36, 0.25);
  --glow-lavender: 0 0 20px rgba(167, 139, 250, 0.25);

  /* ===== Radii (the pillow scale) ===== */
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   22px;
  --radius-xl:   30px;
  --radius-pill: 9999px;

  /* ===== Shadows ===== */
  --shadow-ambient: 0 1px 2px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.05);
  --shadow-lifted:  0 4px 16px rgba(0,0,0,0.20), 0 0 0 1px rgba(255,255,255,0.06);
  --shadow-float:   0 12px 40px rgba(0,0,0,0.30), 0 0 0 1px rgba(255,255,255,0.08);

  /* ===== Spacing (4px base) ===== */
  --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;

  /* ===== Easings ===== */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);   /* default — gentle overshoot */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* checkbox / chip / celebration */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);    /* fades, refined transitions */

  /* ===== Fonts ===== */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif; /* view titles, brand, empty state — NOWHERE ELSE */
  --font-body:    'General Sans', system-ui, sans-serif;       /* everything else */
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;    /* numerical/data only */

  /* ===== Living gradient (default Dusk body bg) ===== */
  --body-gradient:
    radial-gradient(ellipse at 15% 5%, rgba(255, 140, 90, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 15%, rgba(236, 120, 198, 0.08) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 90%, rgba(100, 160, 255, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 60%, rgba(120, 230, 200, 0.04) 0%, transparent 40%),
    radial-gradient(ellipse 45% 35% at 20% 12%, rgba(245, 184, 30, 0.09), transparent 55%);
}

/* ===== Semantic type roles =====
   Apply these classes (or copy the rules) — DO NOT use Plus Jakarta Sans
   outside these display roles. Body text is General Sans. */

.h-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.h-view-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}
.h-empty {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: 22px;
  line-height: 1.3;
  color: var(--text-secondary);
}
.h-section-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.t-task {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
}
.t-caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
}
.t-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}
.t-nav-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
}