/* 
 * variables.css - Tokens de Diseño del Sistema
 * Punto Subjetivo - Servicios de Psicología
 */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  /* 1. Paleta de Colores (Premium Warm-Dark Mode) */
  --color-bg-primary: hsl(215, 24%, 10%);      /* Midnight Slate ( introspección y seguridad ) */
  --color-bg-secondary: hsl(220, 20%, 14%);    /* Dark Indigo Mist ( contenedores ) */
  --color-bg-tertiary: hsl(220, 20%, 18%);     /* Elementos destacados suaves */
  
  --color-text-primary: hsl(35, 30%, 90%);     /* Warm Linen / Arena ( lectura cálida y acogedora ) */
  --color-text-secondary: hsl(215, 15%, 70%);   /* Gris azulado apagado ( textos secundarios ) */
  --color-text-muted: hsl(215, 10%, 50%);       /* Gris apagado para desactivados y pies */
  
  --color-accent-gold: hsl(35, 30%, 80%);      /* Oro cálido / Arena iluminada */
  --color-accent-sage: hsl(148, 15%, 55%);      /* Sage Green ( calma, salud, ecuanimidad ) */
  --color-accent-sage-glow: hsla(148, 15%, 55%, 0.15);
  
  --color-teal-deep: hsl(185, 35%, 25%);       /* Ethereal Teal */
  --color-teal-glow: hsla(185, 35%, 45%, 0.15);
  
  /* Gradientes Premium */
  --grad-hero: linear-gradient(135deg, hsl(215, 24%, 10%), hsl(220, 20%, 6%));
  --grad-card: linear-gradient(135deg, hsla(220, 20%, 14%, 0.9), hsla(220, 20%, 10%, 0.9));
  --grad-teal-diagonal: linear-gradient(135deg, hsl(185, 35%, 25%), hsl(205, 30%, 15%));
  --grad-glow: radial-gradient(circle at 50% 50%, hsla(185, 35%, 20%, 0.4) 0%, transparent 70%);

  /* 2. Tipografías */
  --font-headings: 'Lora', 'Playfair Display', Georgia, serif;
  --font-body: 'Outfit', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* 3. Espaciado y Grid */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 8rem;

  /* 4. Bordes y Sombras */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;
  
  --border-glass: 1px solid hsla(35, 30%, 90%, 0.08);
  --border-glass-focus: 1px solid hsla(35, 30%, 90%, 0.2);
  --shadow-premium: 0 10px 40px -10px hsla(0, 0%, 0%, 0.5);
  --shadow-card-hover: 0 20px 50px -15px hsla(185, 35%, 5%, 0.7);
  --shadow-glow-sage: 0 0 20px 0 hsla(148, 15%, 55%, 0.3);

  /* 5. Parámetros de Animación */
  --transition-fast: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-normal: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- TEMA CLARO (LIGHT THEME OVERRIDES) --- */
[data-theme="light"] {
  --color-bg-primary: hsl(35, 30%, 96%);        /* Warm Ivory / Linen ( base cálida ) */
  --color-bg-secondary: hsl(35, 20%, 91%);      /* Linen Shading ( contenedores ) */
  --color-bg-tertiary: hsl(35, 15%, 85%);       /* Bordes y resalte */
  
  --color-text-primary: hsl(215, 24%, 12%);     /* Deep Midnight Slate ( legibilidad clara y premium ) */
  --color-text-secondary: hsl(215, 12%, 35%);   /* Slate Gray para textos secundarios */
  --color-text-muted: hsl(215, 8%, 55%);        /* Detalles e información secundaria */
  
  --color-accent-gold: hsl(35, 45%, 35%);       /* Warm Honey Gold ( acento académico ) */
  --color-accent-sage: hsl(148, 20%, 38%);       /* Calming Forest Sage ( contraste y salud ) */
  --color-accent-sage-glow: hsla(148, 20%, 38%, 0.1);
  
  --color-teal-deep: hsl(185, 30%, 42%);        /* Soft Ethereal Teal */
  --color-teal-glow: hsla(185, 30%, 42%, 0.1);
  
  /* Gradientes Light */
  --grad-hero: linear-gradient(135deg, hsl(35, 30%, 96%), hsl(35, 20%, 90%));
  --grad-card: linear-gradient(135deg, hsla(35, 20%, 91%, 0.75), hsla(35, 30%, 96%, 0.75));
  --grad-teal-diagonal: linear-gradient(135deg, hsl(185, 30%, 42%), hsl(205, 25%, 30%));
  --grad-glow: radial-gradient(circle at 50% 50%, hsla(185, 30%, 42%, 0.12) 0%, transparent 70%);

  /* Sombras y Límites Visuales en Luz */
  --border-glass: 1px solid hsla(215, 24%, 12%, 0.08);
  --border-glass-focus: 1px solid hsla(215, 24%, 12%, 0.2);
  --shadow-premium: 0 10px 30px -10px hsla(215, 24%, 12%, 0.12);
  --shadow-card-hover: 0 20px 45px -12px hsla(215, 24%, 12%, 0.18);
  --shadow-glow-sage: 0 0 15px 0 hsla(148, 20%, 38%, 0.2);
}