/* ============================================================
   CANTONCE — Design System Tokens
   Fuente única de verdad para colores, tipografía, espaciado
   y animaciones. Se carga antes de style.css en todas las páginas.
   ============================================================ */

:root {

  /* ---- Paleta neutra (80% de la superficie visual) ---- */
  --neutral-50:  #faf9f7;
  --neutral-100: #f2f0eb;
  --neutral-200: #e0ddd6;
  --neutral-300: #c8c4bb;
  --neutral-500: #8a8680;
  --neutral-700: #3a3733;
  --neutral-900: #1a1917;

  /* ---- Verde — color de marca (15% de la superficie) ---- */
  --green-50:  #f0f7f4;
  --green-100: #dceee8;
  --green-200: #b7dccf;
  --green-400: #7baa97;
  --green-500: #5d9281;
  --green-600: #4e796b;   /* Marca principal */
  --green-700: #3d6257;
  --green-800: #2f5f53;
  --green-900: #1e4038;
  --green-950: #122b25;   /* Footer / CTA dark */

  /* ---- Dorado — acento (5% de la superficie, solo CTAs) ---- */
  --gold-200: #fceab8;
  --gold-400: #f9d274;
  --gold-500: #F5C069;   /* CTA primario */
  --gold-600: #e4a83a;
  --gold-700: #c8892a;   /* Hover CTA */

  /* ---- Semánticos ---- */
  --color-bg:        var(--neutral-50);
  --color-bg-alt:    var(--neutral-100);
  --color-text:      var(--neutral-900);
  --color-text-muted: var(--neutral-500);
  --color-border:    var(--neutral-200);
  --color-brand:     var(--green-600);
  --color-brand-dark: var(--green-950);
  --color-accent:    var(--gold-500);
  --color-accent-hover: var(--gold-700);

  /* ---- Paleta base (compatible con style.css existente) ---- */
  --color-1: #f8f6f1;
  --color-2: #e1eae5;
  --color-3: #a7d7b8;
  --color-4: #66b2a0;
  --color-5: #4e796b;
  --color-btn: #F5C069;
  --color-black: #000000;
  --primary-color: var(--color-4);
  --primary-color-light: var(--color-3);
  --btn-color: var(--color-5);
  --btn-color-light: var(--color-4);
  --white-color: var(--color-1);
  --black-color: var(--color-black);
  --c1: var(--color-3);
  --c1-light: var(--color-2);
  --c2: var(--color-2);
  --c2-light: var(--color-1);

  /* ---- Tipografía ---- */
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body:    "Cabin", system-ui, sans-serif;

  --text-xs:      0.6875rem;  /* 11px */
  --text-sm:      0.8125rem;  /* 13px */
  --text-base:    1rem;       /* 16px */
  --text-lg:      1.125rem;   /* 18px */
  --text-xl:      1.3125rem;  /* 21px */
  --text-2xl:     1.625rem;   /* 26px */
  --text-3xl:     2rem;       /* 32px */
  --text-4xl:     2.5rem;     /* 40px */
  --text-display: clamp(3.25rem, 7.5vw, 5.5rem);

  --leading-tight:   1.05;
  --leading-snug:    1.25;
  --leading-base:    1.7;
  --leading-relaxed: 1.85;

  /* ---- Letter-spacing (tracking) ---- */
  --tracking-display:    -0.04em;
  --tracking-heading:    -0.025em;
  --tracking-subheading: -0.015em;
  --tracking-body:       0em;
  --tracking-label:      0.08em;
  --tracking-eyebrow:    0.14em;

  /* ---- Espaciado ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --container-max: 1100px;
  --container-pad: clamp(1rem, 4vw, 2rem);

  --section-py: clamp(5.5rem, 11vw, 9rem);
  --section-px: clamp(1.25rem, 5vw, 2.5rem);

  /* ---- Border radius ---- */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  --radius-full: 999px;

  /* ---- Sombras ---- */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-xl:  0 24px 64px rgba(0,0,0,0.14), 0 8px 24px rgba(0,0,0,0.08);
  --shadow-inner: inset 0 1px 2px rgba(0,0,0,0.06);

  /* ---- Animaciones ---- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-expo:  cubic-bezier(0.19, 1, 0.22, 1);
  --duration-instant: 80ms;
  --duration-fast: 150ms;
  --duration-base: 280ms;
  --duration-slow: 600ms;
  --duration-slower: 900ms;

  /* ---- Header ---- */
  --header-height: 68px;

  /* ---- Paletas de ciudad (heredadas, sin uso nuevo) ---- */
  --gdl-1: #f8f6f9;
  --gdl-2: #e7def2;
  --gdl-3: #c8b4e3;
  --gdl-4: #a580cf;
  --gdl-5: #5e3b8b;
  --mad-1: #fef4f2;
  --mad-2: #f9d6ce;
  --mad-3: #f28a70;
  --mad-4: #d94a3a;
  --mad-5: #7c1b15;
}