/**
 * RodarIA design tokens — mirrors app/globals.css + brand accents.
 * Mobile-first; dark is default.
 */

:root {
  --rodaria-font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --rodaria-font-display: "Outfit", var(--rodaria-font-sans);
  --rodaria-font-mono: "JetBrains Mono", ui-monospace, monospace;

  --rodaria-bg: #f8fafc;
  --rodaria-bg-elevated: #ffffff;
  --rodaria-bg-shell: #f1f5f9;
  --rodaria-fg: #0f172a;
  --rodaria-fg-muted: #475569;
  --rodaria-fg-subtle: #64748b;
  --rodaria-border: rgba(15, 23, 42, 0.1);
  --rodaria-border-strong: rgba(15, 23, 42, 0.16);

  --rodaria-brand: #7c3aed;
  --rodaria-brand-hover: #6d28d9;
  --rodaria-fuchsia: #c026d3;
  --rodaria-pink: #db2777;
  --rodaria-amber: #f59e0b;
  --rodaria-teal: #0d9488;
  --rodaria-teal-soft: rgba(13, 148, 136, 0.12);

  --rodaria-ok: #059669;
  --rodaria-warn: #d97706;
  --rodaria-danger: #dc2626;

  --rodaria-gradient-brand: linear-gradient(
    135deg,
    #9333ea 0%,
    #db2777 50%,
    #f59e0b 100%
  );
  --rodaria-gradient-ai-text: linear-gradient(
    135deg,
    #0070f3 0%,
    #7928ca 50%,
    #ff0080 100%
  );
  --rodaria-gradient-cta: linear-gradient(135deg, #9333ea 0%, #c026d3 100%);

  --rodaria-glass-bg: rgba(255, 255, 255, 0.75);
  --rodaria-glass-border: rgba(0, 0, 0, 0.08);

  --rodaria-radius-sm: 0.5rem;
  --rodaria-radius: 0.75rem;
  --rodaria-radius-lg: 1rem;
  --rodaria-radius-xl: 1.25rem;
  --rodaria-radius-2xl: 1.5rem;

  --rodaria-space-1: 0.25rem;
  --rodaria-space-2: 0.5rem;
  --rodaria-space-3: 0.75rem;
  --rodaria-space-4: 1rem;
  --rodaria-space-5: 1.25rem;
  --rodaria-space-6: 1.5rem;
  --rodaria-space-8: 2rem;
  --rodaria-space-10: 2.5rem;
  --rodaria-space-12: 3rem;

  --rodaria-shell: 100%;
  --rodaria-shell-max: 100rem; /* 1600px */
  --rodaria-prose: 75ch;
  --rodaria-header-h: 3.5rem;
  --rodaria-touch: 2.75rem;

  --rodaria-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --rodaria-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);

  color-scheme: light;
}

html.dark {
  --rodaria-bg: #000000;
  --rodaria-bg-elevated: #0a0a0c;
  --rodaria-bg-shell: #0a0a0c;
  --rodaria-fg: #fafafa;
  --rodaria-fg-muted: #a1a1aa;
  --rodaria-fg-subtle: #71717a;
  --rodaria-border: rgba(255, 255, 255, 0.1);
  --rodaria-border-strong: rgba(255, 255, 255, 0.16);

  --rodaria-ok: #34d399;
  --rodaria-warn: #fbbf24;
  --rodaria-danger: #f87171;
  --rodaria-teal: #5eead4;
  --rodaria-teal-soft: rgba(45, 212, 191, 0.12);

  --rodaria-gradient-ai-text: linear-gradient(
    135deg,
    #50c8ff 0%,
    #d49dff 50%,
    #ff96b4 100%
  );

  --rodaria-glass-bg: rgba(9, 9, 11, 0.8);
  --rodaria-glass-border: rgba(255, 255, 255, 0.08);

  --rodaria-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --rodaria-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);

  color-scheme: dark;
}

@media (min-width: 640px) {
  :root {
    --rodaria-header-h: 4rem;
  }
}