/*
 * RUPTLINE UI SYSTEM 19A
 * Design tokens compartidos.
 *
 * Estos tokens usan prefijo --rl-ui- para no interferir con:
 * --accent, --surface, --text, --store-* ni otros sistemas anteriores.
 */

:root {
  /* Tipografía */
  --rl-ui-font-sans:
    "Nunito",
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --rl-ui-font-mono:
    "JetBrains Mono",
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    monospace;

  --rl-ui-font-size-2xs: 0.6875rem;
  --rl-ui-font-size-xs: 0.75rem;
  --rl-ui-font-size-sm: 0.875rem;
  --rl-ui-font-size-md: 1rem;
  --rl-ui-font-size-lg: 1.125rem;
  --rl-ui-font-size-xl: 1.375rem;
  --rl-ui-font-size-2xl: 1.75rem;
  --rl-ui-font-size-3xl: 2.25rem;

  --rl-ui-line-tight: 1.15;
  --rl-ui-line-normal: 1.45;
  --rl-ui-line-relaxed: 1.65;

  --rl-ui-weight-regular: 400;
  --rl-ui-weight-medium: 500;
  --rl-ui-weight-semibold: 600;
  --rl-ui-weight-bold: 700;
  --rl-ui-weight-extrabold: 800;

  /* Espaciado */
  --rl-ui-space-0: 0;
  --rl-ui-space-1: 0.25rem;
  --rl-ui-space-2: 0.5rem;
  --rl-ui-space-3: 0.75rem;
  --rl-ui-space-4: 1rem;
  --rl-ui-space-5: 1.25rem;
  --rl-ui-space-6: 1.5rem;
  --rl-ui-space-7: 1.75rem;
  --rl-ui-space-8: 2rem;
  --rl-ui-space-10: 2.5rem;
  --rl-ui-space-12: 3rem;
  --rl-ui-space-16: 4rem;

  /* Tamaños táctiles */
  --rl-ui-touch-sm: 2.25rem;
  --rl-ui-touch-md: 2.75rem;
  --rl-ui-touch-lg: 3.25rem;

  /* Radios */
  --rl-ui-radius-xs: 0.375rem;
  --rl-ui-radius-sm: 0.625rem;
  --rl-ui-radius-md: 0.875rem;
  --rl-ui-radius-lg: 1.125rem;
  --rl-ui-radius-xl: 1.5rem;
  --rl-ui-radius-2xl: 2rem;
  --rl-ui-radius-pill: 999rem;

  /* Colores neutrales */
  --rl-ui-white: #ffffff;
  --rl-ui-black: #0b0d12;

  --rl-ui-gray-25: #fcfcfd;
  --rl-ui-gray-50: #f8fafc;
  --rl-ui-gray-100: #f1f5f9;
  --rl-ui-gray-200: #e2e8f0;
  --rl-ui-gray-300: #cbd5e1;
  --rl-ui-gray-400: #94a3b8;
  --rl-ui-gray-500: #64748b;
  --rl-ui-gray-600: #475569;
  --rl-ui-gray-700: #334155;
  --rl-ui-gray-800: #1e293b;
  --rl-ui-gray-900: #0f172a;
  --rl-ui-gray-950: #020617;

  /* Semánticos */
  --rl-ui-bg: var(--rl-ui-gray-50);
  --rl-ui-surface: var(--rl-ui-white);
  --rl-ui-surface-soft: var(--rl-ui-gray-100);
  --rl-ui-surface-strong: var(--rl-ui-gray-900);

  --rl-ui-text: var(--rl-ui-gray-900);
  --rl-ui-text-soft: var(--rl-ui-gray-600);
  --rl-ui-text-muted: var(--rl-ui-gray-500);
  --rl-ui-text-inverse: var(--rl-ui-white);

  --rl-ui-border: var(--rl-ui-gray-200);
  --rl-ui-border-strong: var(--rl-ui-gray-300);

  --rl-ui-primary: #111827;
  --rl-ui-primary-hover: #020617;
  --rl-ui-primary-soft: #eef2ff;

  --rl-ui-success: #15803d;
  --rl-ui-success-soft: #dcfce7;
  --rl-ui-warning: #b45309;
  --rl-ui-warning-soft: #fef3c7;
  --rl-ui-danger: #dc2626;
  --rl-ui-danger-soft: #fee2e2;
  --rl-ui-info: #2563eb;
  --rl-ui-info-soft: #dbeafe;

  /* Sombras */
  --rl-ui-shadow-xs:
    0 1px 2px rgba(15, 23, 42, 0.05);

  --rl-ui-shadow-sm:
    0 2px 8px rgba(15, 23, 42, 0.07);

  --rl-ui-shadow-md:
    0 8px 24px rgba(15, 23, 42, 0.09);

  --rl-ui-shadow-lg:
    0 18px 50px rgba(15, 23, 42, 0.14);

  --rl-ui-shadow-sheet:
    0 -16px 48px rgba(15, 23, 42, 0.16);

  /* Motion */
  --rl-ui-duration-fast: 120ms;
  --rl-ui-duration-normal: 200ms;
  --rl-ui-duration-slow: 320ms;

  --rl-ui-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --rl-ui-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Layout */
  --rl-ui-content-sm: 40rem;
  --rl-ui-content-md: 64rem;
  --rl-ui-content-lg: 80rem;
  --rl-ui-sidebar-width: 16rem;
  --rl-ui-header-height: 4rem;
  --rl-ui-bottom-nav-height: 4.5rem;

  /* Capas */
  --rl-ui-z-base: 1;
  --rl-ui-z-sticky: 100;
  --rl-ui-z-dropdown: 300;
  --rl-ui-z-overlay: 700;
  --rl-ui-z-drawer: 800;
  --rl-ui-z-modal: 900;
  --rl-ui-z-toast: 1000;

  /* Safe areas PWA */
  --rl-ui-safe-top: env(safe-area-inset-top, 0px);
  --rl-ui-safe-right: env(safe-area-inset-right, 0px);
  --rl-ui-safe-bottom: env(safe-area-inset-bottom, 0px);
  --rl-ui-safe-left: env(safe-area-inset-left, 0px);
}