/* ===================================================================
   SmartlyTools v2 — Design Tokens
   Premium SaaS design system: color, type, space, radius, shadow,
   motion, z-index. Light + dark themes via [data-theme].
   =================================================================== */

:root {
  /* ---- Brand palette ---- */
  --indigo-50:#eef0ff; --indigo-100:#e0e3ff; --indigo-200:#c4caff; --indigo-300:#a3abff;
  --indigo-400:#8088f5; --indigo-500:#5b5bd6; --indigo-600:#4b46c4; --indigo-700:#3d39a3;
  --teal-400:#2bc4ad; --teal-500:#12a594; --teal-600:#0d8576;
  --coral-400:#ff8a78; --coral-500:#ff6b57; --coral-600:#e8543f;
  --amber-500:#f59e0b; --sky-500:#0ea5e9; --pink-500:#ec4899; --violet-500:#8b5cf6;

  /* ---- Core semantic (light) ---- */
  --ink:#0b0f1a;
  --ink-soft:#475067;
  --ink-faint:#737d96;
  --paper:#f7f8fb;
  --paper-2:#eef1f7;
  --surface:#ffffff;
  --surface-2:#f4f6fb;
  --surface-3:#eceff7;
  --hairline:#e2e6f0;
  --hairline-2:#d3d9e8;

  --primary:var(--indigo-500);
  --primary-strong:var(--indigo-600);
  --primary-soft:var(--indigo-50);
  --accent:var(--teal-500);
  --highlight:var(--coral-500);
  --success:#15a06b;
  --warning:#e08a00;
  --danger:#e0464a;

  /* ---- Category accents ---- */
  --cat-text:#5b5bd6; --cat-dev:#0ea5e9; --cat-calc:#6366f1; --cat-gen:#ec4899; --cat-seo:#12a594;
  --cat-img:#f43f5e; --cat-font:#8b5cf6; --cat-random:#f59e0b;
  --cat-pdf:#ef4444; --cat-biz:#0d9488;

  /* ---- Gradients ---- */
  --grad-brand:linear-gradient(135deg,#6366f1 0%,#5b5bd6 40%,#12a594 100%);
  --grad-brand-soft:linear-gradient(135deg,rgba(99,102,241,.12),rgba(18,165,148,.12));
  --grad-hero:radial-gradient(60% 80% at 15% 10%,rgba(99,102,241,.20),transparent 60%),radial-gradient(50% 70% at 90% 20%,rgba(18,165,148,.18),transparent 55%),radial-gradient(60% 80% at 60% 100%,rgba(236,72,153,.12),transparent 60%);
  --grad-text:linear-gradient(120deg,#6366f1,#5b5bd6 35%,#12a594 75%);
  --grad-sheen:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.5) 50%,transparent 80%);

  /* ---- Glass ---- */
  --glass-bg:rgba(255,255,255,.72);
  --glass-bg-strong:rgba(255,255,255,.85);
  --glass-border:rgba(255,255,255,.6);
  --glass-blur:saturate(180%) blur(18px);

  /* ---- Typography ---- */
  --font-display:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',ui-monospace,'Cascadia Code',monospace;

  --fs-xs:0.78rem; --fs-sm:0.875rem; --fs-base:1rem; --fs-md:1.0625rem;
  --fs-lg:1.1875rem; --fs-xl:1.375rem; --fs-2xl:1.75rem; --fs-3xl:2.25rem;
  --fs-4xl:3rem; --fs-5xl:3.75rem; --fs-6xl:4.5rem;
  --lh-tight:1.12; --lh-snug:1.3; --lh-normal:1.6; --lh-relaxed:1.75;
  --tracking-tight:-0.02em; --tracking-tighter:-0.035em;

  /* ---- Spacing scale (4px base) ---- */
  --sp-1:0.25rem; --sp-2:0.5rem; --sp-3:0.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem; --sp-10:8rem;

  /* ---- Radius ---- */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-2xl:36px; --r-pill:999px;

  /* ---- Shadow (layered, soft) ---- */
  --sh-xs:0 1px 2px rgba(11,15,26,.06);
  --sh-sm:0 2px 6px rgba(11,15,26,.07),0 1px 2px rgba(11,15,26,.05);
  --sh-md:0 6px 18px rgba(11,15,26,.09),0 2px 6px rgba(11,15,26,.05);
  --sh-lg:0 18px 40px rgba(11,15,26,.13),0 6px 14px rgba(11,15,26,.07);
  --sh-xl:0 30px 70px rgba(11,15,26,.18),0 12px 24px rgba(11,15,26,.08);
  --sh-primary:0 12px 30px rgba(91,91,214,.35);
  --sh-primary-sm:0 6px 16px rgba(91,91,214,.28);
  --ring:0 0 0 3px rgba(91,91,214,.32);

  /* ---- Motion ---- */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:.16s; --t:.26s; --t-slow:.42s;

  /* ---- Layout ---- */
  --maxw:1180px; --maxw-wide:1320px; --maxw-prose:46rem;
  --header-h:68px; --bottomnav-h:62px;

  /* ---- Z-index ---- */
  --z-base:1; --z-raised:10; --z-sticky:100; --z-header:200; --z-mega:250;
  --z-backdrop:290; --z-drawer:300; --z-modal:400; --z-toast:500;

  color-scheme:light;
}

/* ===================== DARK THEME ===================== */
[data-theme="dark"] {
  --ink:#eef1f8;
  --ink-soft:#aab3cb;
  --ink-faint:#7d87a1;
  --paper:#0a0d16;
  --paper-2:#0f1422;
  --surface:#141a28;
  --surface-2:#1b2235;
  --surface-3:#222b42;
  --hairline:#262f47;
  --hairline-2:#33405e;

  --primary:var(--indigo-400);
  --primary-strong:var(--indigo-300);
  --primary-soft:rgba(99,102,241,.14);
  --accent:var(--teal-400);

  --glass-bg:rgba(20,26,40,.66);
  --glass-bg-strong:rgba(20,26,40,.86);
  --glass-border:rgba(255,255,255,.08);

  --grad-hero:radial-gradient(60% 80% at 15% 10%,rgba(99,102,241,.28),transparent 60%),radial-gradient(50% 70% at 90% 20%,rgba(18,165,148,.22),transparent 55%),radial-gradient(60% 80% at 60% 100%,rgba(236,72,153,.16),transparent 60%);
  --grad-sheen:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.14) 50%,transparent 80%);

  --sh-xs:0 1px 2px rgba(0,0,0,.4);
  --sh-sm:0 2px 6px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.4);
  --sh-md:0 6px 18px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.4);
  --sh-lg:0 18px 40px rgba(0,0,0,.55),0 6px 14px rgba(0,0,0,.45);
  --sh-xl:0 30px 70px rgba(0,0,0,.6),0 12px 24px rgba(0,0,0,.5);
  --ring:0 0 0 3px rgba(128,136,245,.4);

  color-scheme:dark;
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
}