/* ───────────────────────────────────────────────────────────
   PALLIUM CARE · DESIGN TOKENS
   Fuente de verdad: Pallium Care Design System v1.0
   NO modificar valores aquí sin actualizar el DS.
   ─────────────────────────────────────────────────────────── */
:root {
  /* Marca · Teal (Primario) */
  --color-primary:        #0F6B6B;
  --color-primary-700:    #0A5454;
  --color-primary-900:    #063838;
  --color-primary-300:    #6FA8A8;
  --color-primary-100:    #E4EFEE;
  --color-primary-50:     #F3F8F7;

  /* Marca · Gold (Secundario) */
  --color-secondary:      #C8A35A;
  --color-secondary-700:  #9B7C3D;
  --color-secondary-300:  #E2C994;
  --color-secondary-100:  #F5ECD7;

  /* Neutros (cálidos) */
  --color-bg:             #FBFAF7;
  --color-bg-alt:         #F3F1EC;
  --color-surface:        #FFFFFF;
  --color-border:         #E5E2DA;
  --color-border-strong:  #C9C5BC;
  --color-text:           #1F2A2A;
  --color-text-muted:     #6B6B66;
  --color-text-soft:      #8A8A82;
  --color-on-primary:     #FBFAF7;

  /* Semánticos */
  --color-success:        #5B9B7E;
  --color-success-bg:     #EAF3EE;
  --color-error:          #C6604F;
  --color-error-bg:       #F8E9E5;
  --color-info:           #4A7FA8;
  --color-info-bg:        #E8EFF5;

  /* Gradientes */
  --gradient-hero:    linear-gradient(135deg, #0F6B6B 0%, #134E4E 60%, #0A3F3F 100%);
  --gradient-warm:    linear-gradient(180deg, #FBFAF7 0%, #F5ECD7 100%);
  --gradient-overlay: linear-gradient(180deg, rgba(6,56,56,.20), rgba(6,56,56,.65));

  /* Tipografía */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Espaciado (8pt base) */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  80px;
  --space-4xl:  128px;

  /* Radios */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* Sombras */
  --shadow-xs:    0 1px 2px rgba(15,40,40,.04);
  --shadow-sm:    0 2px 6px rgba(15,40,40,.06), 0 1px 2px rgba(15,40,40,.04);
  --shadow-md:    0 6px 18px rgba(15,40,40,.08), 0 2px 4px rgba(15,40,40,.04);
  --shadow-lg:    0 18px 40px rgba(15,40,40,.12), 0 4px 10px rgba(15,40,40,.06);
  --shadow-focus: 0 0 0 4px rgba(15,107,107,.18);

  /* Layout */
  --container-max: 1200px;
  --container-pad: clamp(20px, 4vw, 48px);

  /* Transiciones */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur:  180ms;
}