/*
 * KINOS REAL ESTATE — tokens.css
 * Design tokens del sistema de diseño Kinos.
 * Fuente de verdad única para colores, tipografía, espaciado, radios, sombras y z-index.
 *
 * PALETA KINOS:
 *   Navy authority:  #06184A  — color institucional principal
 *   Gold accent:     #C8A96E  — acento editorial (máx. 3% de la interfaz)
 *   Editorial white: #FAFAF8  — fondo editorial principal
 *   Warm surface:    #F5F2EE  — fondo cálido secundario
 *
 * REGLA DE ORO:
 *   El gold (#C8A96E) es acento, no color dominante.
 *   Nunca usar gold en texto pequeño sobre blanco.
 *   Máximo 3% de la interfaz en gold.
 *
 * WCAG AA:
 *   Navy sobre blanco: 12.6:1 ✓
 *   Gold sobre navy:   5.2:1  ✓ (texto grande)
 *   Gold sobre blanco: 2.8:1  ✗ (solo decorativo, nunca texto)
 */

:root {

  /* ── PALETA BASE ── */

  /* Navy / Authority */
  --color-kinos-navy:       #06184A;
  --color-kinos-navy-dark:  #030E2E;
  --color-kinos-navy-mid:   #0C2C7F;
  --color-kinos-blue:       #0C2C7F;
  --color-kinos-blue-dark:  #06184A;
  --color-kinos-blue-light: #EEF1F9;
  --color-kinos-blue-25:    #C4C0DC;

  /* Gold / Accent */
  --color-gold:             #C8A96E;
  --color-gold-hover:       #B89B5E;
  --color-gold-on:          #06184A;   /* texto sobre gold */
  --color-gold-light:       #F5EDD8;
  --color-gold-muted:       rgba(200, 169, 110, 0.15);

  /* Neutrals */
  --color-kinos-white:      #FFFFFF;
  --color-kinos-black:      #0A0A0A;
  --color-kinos-gray-50:    #F8FAFC;
  --color-kinos-gray-100:   #F1F5F9;
  --color-kinos-gray-200:   #E2E8F0;
  --color-kinos-gray-400:   #94A3B8;
  --color-kinos-gray-600:   #475569;
  --color-kinos-gray-800:   #1E293B;

  /* ── SUPERFICIES ── */

  --surface-editorial:      #FAFAF8;   /* fondo editorial principal */
  --surface-warm:           #F5F2EE;   /* fondo cálido secundario */
  --surface-neutral:        #F7F8FA;   /* fondo técnico / bloques de datos */
  --surface-authority:      #06184A;   /* fondo institucional navy */
  --surface-authority-deep: #030E2E;   /* fondo navy más oscuro */

  /* ── TEXTO ── */

  /* Sobre fondos claros */
  --text-authority:         #06184A;   /* navy — titulares, énfasis */
  --text-primary:           #1E293B;   /* casi negro — cuerpo */
  --text-secondary:         #475569;   /* gris medio — descripción */
  --text-muted:             #94A3B8;   /* gris claro — metadata */
  --text-placeholder:       #CBD5E1;   /* placeholder de inputs */

  /* Sobre fondos oscuros (navy) */
  --text-on-dark-primary:   #F8FAFC;   /* blanco editorial */
  --text-on-dark-secondary: #CBD5E1;   /* gris claro */
  --text-on-dark-muted:     #94A3B8;   /* gris muy claro */

  /* ── BORDES ── */

  --border-default:         #E2E4EF;   /* borde genérico */
  --border-warm:            #EDE9E3;   /* borde cálido */
  --border-gold:            rgba(200, 169, 110, 0.3);
  --border-gold-strong:     rgba(200, 169, 110, 0.5);

  /* ── TIPOGRAFÍA ── */

  /* Familias */
  --font-display: 'Cormorant Garamond', 'Garamond', 'Georgia', serif;
  --font-body:    'DM Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'DM Mono', 'Fira Code', 'Courier New', monospace;

  /* Pesos */
  --font-light:    300;
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* Escala tipográfica — Major Third (1.250) */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */
  --text-7xl:  4.5rem;     /* 72px */

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   2;

  /* Letter spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-normal:  0em;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-ultra:   0.12em;

  /* ── ESPACIADO — escala 4px ── */

  --space-0:  0;
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-7:  1.75rem;   /* 28px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-14: 3.5rem;    /* 56px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* ── RADIOS ── */

  --radius-none: 0;
  --radius-sm:   2px;
  --radius-base: 4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;

  /* ── SOMBRAS ── */

  --shadow-sm:   0 1px 2px rgba(6, 24, 74, 0.04);
  --shadow-base: 0 1px 3px rgba(6, 24, 74, 0.08), 0 1px 2px rgba(6, 24, 74, 0.04);
  --shadow-md:   0 4px 6px rgba(6, 24, 74, 0.06), 0 2px 4px rgba(6, 24, 74, 0.04);
  --shadow-lg:   0 10px 15px rgba(6, 24, 74, 0.08), 0 4px 6px rgba(6, 24, 74, 0.04);
  --shadow-xl:   0 20px 25px rgba(6, 24, 74, 0.10), 0 10px 10px rgba(6, 24, 74, 0.04);
  --shadow-2xl:  0 25px 50px rgba(6, 24, 74, 0.15);

  /* Sombras de tarjetas */
  --shadow-card:       0 2px 8px rgba(6, 24, 74, 0.06), 0 1px 3px rgba(6, 24, 74, 0.04);
  --shadow-card-hover: 0 8px 24px rgba(6, 24, 74, 0.12), 0 4px 8px rgba(6, 24, 74, 0.06);

  /* Sombra gold — para CTAs y elementos destacados */
  --shadow-gold: 0 4px 12px rgba(200, 169, 110, 0.35);

  /* ── TRANSICIONES ── */

  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;
  --transition-slower: 500ms ease;

  /* ── Z-INDEX ── */

  --z-below:   -1;
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  20;
  --z-fab:     60;
  --z-modal:   40;
  --z-header:  100;
  --z-toast:   200;

  /* ── LAYOUT ── */

  --container-max:       1400px;
  --container-narrow:    800px;
  --container-editorial: 720px;

  /* Header */
  --header-topbar-height: 36px;
  --header-nav-height:    64px;
  --header-total:         100px;    /* topbar + nav */
  --header-height-mobile: 56px;

  /* Secciones */
  --section-padding-y-mobile:  3rem;
  --section-padding-y-tablet:  4rem;
  --section-padding-y-desktop: 6rem;

  /* ── TOUCH TARGETS ── */

  --touch-target-min:   44px;    /* Apple HIG mínimo */
  --cta-height-primary: 48px;    /* CTA principal */
  --cta-height-secondary: 44px;  /* CTA secundario */

  /* ── OPACIDADES ── */

  --opacity-disabled: 0.5;
  --opacity-muted:    0.6;
  --opacity-subtle:   0.08;
}