@layer tokens, base, componentes, vistas;

@layer tokens {
  :root {
    color-scheme: light;
    --brand: #4f3fe0;
    --brand-ink: #ffffff;
    --brand-text: #4433cc;
    --brand-soft: rgba(79, 63, 224, 0.1);
    --accent: #0f9f8f;
    --accent-soft: rgba(15, 159, 143, 0.12);
    --bg: #f7f7fb;
    --bg-elev: #ffffff;
    --surface: #ffffff;
    --surface-2: #f0f0f7;
    --border: #e3e3ee;
    --text: #12121c;
    --text-2: #43435a;
    --muted: #64647a;
    --ok: #0e7f4c;
    --warn: #9a5b00;
    --danger: #c7303a;
    --info: #2563c9;
    --ring: rgba(79, 63, 224, 0.45);
    --overlay: rgba(10, 10, 20, 0.42);
    --nav-bg: rgba(247, 247, 251, 0.78);
    --glow: radial-gradient(60% 50% at 50% 0%, rgba(79, 63, 224, 0.12), transparent 70%);

    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;

    --r-sm: 8px;
    --r: 12px;
    --r-lg: 16px;
    --r-full: 999px;

    --t-xs: 12px;
    --t-sm: 14px;
    --t-md: 16px;
    --t-lg: 18px;
    --t-xl: 22px;
    --t-2xl: 28px;
    --t-display: clamp(36px, 5vw, 64px);

    --e-1: 0 1px 2px rgba(18, 18, 40, 0.06);
    --e-2: 0 1px 2px rgba(18, 18, 40, 0.04), 0 8px 24px rgba(18, 18, 40, 0.07);
    --e-3: 0 2px 6px rgba(18, 18, 40, 0.06), 0 24px 60px rgba(18, 18, 40, 0.14);

    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --d-fast: 120ms;
    --d: 200ms;
    --d-slow: 320ms;

    --z-nav: 50;
    --z-drawer: 60;
    --z-modal: 80;
    --z-toast: 90;

    --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --brand: #8b7dff;
    --brand-ink: #0c0a24;
    --brand-text: #a99fff;
    --brand-soft: rgba(139, 125, 255, 0.16);
    --accent: #3fe0c5;
    --accent-soft: rgba(63, 224, 197, 0.14);
    --bg: #000000;
    --bg-elev: #0d0d13;
    --surface: #0d0d13;
    --surface-2: #16161f;
    --border: #25252f;
    --text: #f1f1f7;
    --text-2: #c4c4d4;
    --muted: #8f8fa6;
    --ok: #43d38e;
    --warn: #f2b544;
    --danger: #ff7d86;
    --info: #8db4ff;
    --ring: rgba(139, 125, 255, 0.55);
    --overlay: rgba(0, 0, 0, 0.66);
    --nav-bg: rgba(0, 0, 0, 0.74);
    --glow: radial-gradient(60% 50% at 50% 0%, rgba(139, 125, 255, 0.18), transparent 70%);
    --e-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --e-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5);
    --e-3: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.7);
  }
}