/* ========================================================
   VARIABLES DE DISEÑO - ESTILO MINIMALISTA & TÁCTIL (HUMAN-DESIGNED)
   Inspirado en BeReal, Threads, Linear y Whisper auténtico
   ======================================================== */
:root {
  /* Fondo mate y capas sobrias (Zinc / Slate profundo) */
  --bg-app: #090a0d;
  --bg-surface: #121318;
  --bg-surface-elevated: #1a1b22;
  --bg-surface-hover: #22242c;
  --bg-input: #15161c;

  /* Bordes limpios de alta precisión (sin brillos neón) */
  --border-subtle: #20222a;
  --border-medium: #2e313b;
  --border-strong: #3f4350;

  /* Tipografía y Texto */
  --text-primary: #f4f4f6;
  --text-secondary: #9ea2b0;
  --text-tertiary: #656977;

  /* Acentos de interfaz sobrios y funcionales */
  --accent-white: #ffffff;
  --accent-black: #090a0d;
  --accent-red: #e11d48;
  --accent-emerald: #10b981;
  --accent-amber: #f59e0b;
  --accent-blue: #3b82f6;

  /* Tarjetas temáticas: Tonos mate curados y editoriales (No degradados de IA) */
  --card-theme-charcoal: #14151b;
  --card-theme-navy: #111625;
  --card-theme-wine: #221318;
  --card-theme-forest: #101c18;
  --card-theme-sand: #1c1a16;
  --card-theme-slate: #161a20;

  /* Geometría moderna y limpia */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  /* Sombras realistas de elevación física */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 40px -8px rgba(0, 0, 0, 0.65);

  /* Transiciones */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.22s cubic-bezier(0.2, 0, 0, 1);
}