/* ═══ Rato — design tokens ═══════════════════════════════════
   Paleta núcleo: violeta · cian · rosa · naranja (+ complementarios).
   Tema por [data-theme], acento por [data-accent] en <html>.        */

:root {
  --violet: #8b5cf6;
  --cyan:   #22d3ee;
  --pink:   #ff4fb8;
  --orange: #ff8a3d;
  --lime:   #b8f23a;
  --yellow: #ffd23f;
  --blue:   #4d7cff;
  --mint:   #3ef0b0;
  --red:    #ff5a6a;

  /* Punto de endoso Core Incentive. Es el único activo visual compartido:
     el resto de la identidad de Rato sigue siendo independiente. */
  --ci-signal: #C9F73A;

  --grad:      linear-gradient(115deg, var(--violet) 0%, var(--pink) 55%, var(--orange) 100%);
  --grad-v:    linear-gradient(to top, var(--violet), var(--pink) 60%, var(--orange));
  --grad-cool: linear-gradient(115deg, var(--cyan), var(--violet));
  --grad-text: linear-gradient(100deg, var(--cyan) 0%, var(--violet) 35%, var(--pink) 68%, var(--orange) 100%);

  --f-display: 'Syne', 'Space Grotesk', system-ui, sans-serif;
  --f-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --r-xs: 8px; --r-s: 12px; --r-m: 18px; --r-l: 24px; --r-xl: 32px;
  --ease:   cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  --gutter: 16px;
  --max: 640px;
  --dock-h: 68px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  --accent: var(--violet);
  --accent-ink: #fff;
}

/* dark (default) */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0a14;
  --bg-2: #120f1e;
  --surface: #16122a;
  --surface-2: #1d1836;
  --surface-3: #282148;
  --glass: rgba(22, 18, 42, .74);
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .15);
  --text: #f4f1ff;
  --text-2: #b8b0d8;
  --text-3: #8b84ad;   /* ≥4.5:1 sobre surface-2 y surface */
  --dot: rgba(255, 255, 255, .075);
  --ok: #3ef0b0;
  --bad: #ff5a6a;
  --shadow: 0 18px 50px -18px rgba(0, 0, 0, .75);
  --shadow-s: 0 6px 20px -10px rgba(0, 0, 0, .7);
  --orb: .5;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f2fc;
  --bg-2: #ece7f8;
  --surface: #ffffff;
  --surface-2: #f6f3ff;
  --surface-3: #ebe5fb;
  --glass: rgba(255, 255, 255, .78);
  --line: rgba(35, 20, 80, .09);
  --line-2: rgba(35, 20, 80, .17);
  --text: #17112b;
  --text-2: #4d4474;
  --text-3: #6f678f;   /* ≥4.5:1 sobre fondos claros */
  --dot: rgba(60, 30, 130, .14);
  --ok: #0e9c6c;
  --bad: #e5364a;
  --shadow: 0 18px 50px -22px rgba(60, 30, 130, .32);
  --shadow-s: 0 6px 18px -10px rgba(60, 30, 130, .28);
  --orb: .28;
}

[data-accent="violet"] { --accent: var(--violet); --accent-ink: #ffffff; }
[data-accent="cyan"]   { --accent: var(--cyan);   --accent-ink: #06161b; }
[data-accent="pink"]   { --accent: var(--pink);   --accent-ink: #1b0614; }
[data-accent="orange"] { --accent: var(--orange); --accent-ink: #1d0c02; }