/* ICU Visuals CreativeFlow Hub — Design Tokens
   Light system only. Every value here maps 1:1 onto a future tailwind.config theme. */

:root {
  /* ---- Surfaces ---- */
  --bg-app: #f8fafc;
  --bg-surface: #ffffff;
  --bg-sunken: #f1f5f9;
  --bg-raised: #ffffff;
  --bg-lavender: #f5f3ff;
  --bg-lavender-soft: #faf9ff;
  --bg-overlay: rgba(15, 23, 42, 0.42);

  /* Soft gradients used behind hero/greeting areas */
  --grad-lavender: linear-gradient(135deg, #f5f3ff 0%, #faf9ff 45%, #ffffff 100%);
  --grad-violet: linear-gradient(135deg, #7c5cff 0%, #6d4aff 100%);
  --grad-mist: radial-gradient(120% 120% at 100% 0%, #ede9fe 0%, rgba(255, 255, 255, 0) 60%);

  /* ---- Brand / primary (soft violet) ---- */
  --violet-50: #f5f3ff;
  --violet-100: #ede9fe;
  --violet-200: #ddd6fe;
  --violet-300: #c4b5fd;
  --violet-400: #a78bfa;
  --violet-500: #8b5cf6;
  --violet-600: #6d4aff;
  --violet-700: #5b34e8;

  --primary: var(--violet-600);
  --primary-hover: var(--violet-700);
  --primary-soft: var(--violet-100);
  --primary-softer: var(--violet-50);
  --primary-text: #ffffff;

  /* ---- Accents ---- */
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;

  --mint-50: #ecfdf5;
  --mint-100: #d1fae5;
  --mint-500: #10b981;
  --mint-600: #059669;

  --gold-50: #fffbeb;
  --gold-100: #fef3c7;
  --gold-500: #f59e0b;
  --gold-600: #d97706;

  --rose-50: #fff1f2;
  --rose-100: #ffe4e6;
  --rose-500: #f43f5e;
  --rose-600: #e11d48;

  --pink-50: #fdf2f8;
  --pink-100: #fce7f3;
  --pink-500: #ec4899;

  --teal-50: #f0fdfa;
  --teal-100: #ccfbf1;
  --teal-500: #14b8a6;

  /* ---- Text (deep navy / charcoal) ---- */
  --text-strong: #0f172a;
  --text: #1e293b;
  --text-muted: #64748b;
  --text-subtle: #94a3b8;
  --text-on-primary: #ffffff;
  --text-link: var(--violet-600);

  /* ---- Borders ---- */
  --border: #e2e8f0;
  --border-soft: #eef2f7;
  --border-strong: #cbd5e1;
  --border-focus: var(--violet-400);

  /* ---- Radii ---- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-full: 999px;

  /* ---- Shadows (soft, never harsh) ---- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 24px 60px rgba(15, 23, 42, 0.12);
  --shadow-violet: 0 8px 20px rgba(109, 74, 255, 0.24);

  /* ---- Spacing scale ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* ---- Typography ---- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 21px;
  --fs-2xl: 26px;
  --fs-3xl: 32px;
  --fs-4xl: 40px;

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.55;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Layout ---- */
  --sidebar-w: 248px;
  --topbar-h: 72px;
  --bottomnav-h: 66px;
  --content-max: 1560px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 130ms;
  --dur: 220ms;
  --dur-slow: 340ms;

  /* ---- Z layers ---- */
  --z-nav: 40;
  --z-overlay: 60;
  --z-drawer: 70;
  --z-toast: 90;
}

/* Pastel icon tile palette — used by .icon-tile--{name} */
:root {
  --tile-violet-bg: #ede9fe;
  --tile-violet-fg: #6d4aff;
  --tile-blue-bg: #dbeafe;
  --tile-blue-fg: #2563eb;
  --tile-mint-bg: #d1fae5;
  --tile-mint-fg: #059669;
  --tile-gold-bg: #fef3c7;
  --tile-gold-fg: #d97706;
  --tile-rose-bg: #ffe4e6;
  --tile-rose-fg: #e11d48;
  --tile-pink-bg: #fce7f3;
  --tile-pink-fg: #db2777;
  --tile-teal-bg: #ccfbf1;
  --tile-teal-fg: #0d9488;
  --tile-slate-bg: #e2e8f0;
  --tile-slate-fg: #475569;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}