/* ==========================================================================
   Inmobiliaria Felix — Design tokens
   Archivo de SOLO variables. No contiene selectores de componentes.
   Prefijo: --cc-
   Depende de: nada. Debe cargarse antes de app.css.
   Sin fuentes, imágenes ni recursos externos.

   Marca: navy muestreado del logotipo (#102040), acento azul medio,
   superficies claras (#F4F7FB / blanco) y texto navy oscuro.
   Todos los pares texto/fondo usados en UI cumplen WCAG AA (>= 4.5:1).
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     1. Color — marca navy + acento azul
     --------------------------------------------------------------------- */

  /* Navy de marca (del logotipo) */
  --cc-navy-950: #081426;
  --cc-navy-900: #102040;   /* marca base, footer, hero */
  --cc-navy-850: #132949;
  --cc-navy-800: #17325A;
  --cc-navy-700: #1D3D6B;
  --cc-navy-600: #264C80;
  --cc-navy-500: #335E96;
  --cc-navy-400: #4E7BAF;
  --cc-navy-300: #7C9CC4;
  --cc-navy-200: #B4C6DE;
  --cc-navy-100: #DCE6F2;
  --cc-navy-050: #EDF2F9;

  /* Neutros fríos (tinta) */
  --cc-ink-900: #0B1B33;   /* máximo contraste */
  --cc-ink-800: #13253F;   /* texto principal */
  --cc-ink-700: #1E3450;   /* títulos suaves */
  --cc-ink-600: #35506D;   /* texto fuerte secundario */
  --cc-ink-500: #4C657F;   /* párrafos largos (5.62:1 sobre papel) */
  --cc-ink-400: #556D85;   /* texto secundario AA (4.68:1 sobre arena, 5.00:1 sobre papel) */
  --cc-ink-300: #8198AD;   /* SOLO decorativo / placeholder */
  --cc-ink-200: #AFC0D1;   /* iconos deshabilitados, texto sobre navy */
  --cc-ink-100: #D6E0EA;   /* bordes fuertes, divisores */
  --cc-ink-050: #E9EFF6;

  /* Superficies claras */
  --cc-paper: #F4F7FB;          /* fondo global */
  --cc-paper-raised: #FFFFFF;   /* tarjetas, inputs */
  --cc-sand: #EAF0F7;           /* bandas alternas, fondos suaves */
  --cc-sand-deep: #DDE7F1;      /* chips, thumbs inactivos, hover */
  --cc-line: #DCE5EF;           /* borde estándar */
  --cc-line-soft: #E9F0F7;      /* hairline interno */
  --cc-line-strong: #B9C9D9;    /* borde de control */

  /* Acento azul medio (CTA, enlaces, foco) */
  --cc-accent-800: #123C6E;
  --cc-accent-700: #174A85;
  --cc-accent-600: #1B5496;
  --cc-accent-500: #1F5FA8;     /* base: 6.44:1 sobre blanco */
  --cc-accent-400: #3C7BC0;
  --cc-accent-300: #8FB8E8;     /* acento sobre navy */
  --cc-accent-200: #C5DCF4;
  --cc-accent-100: #E4EFFB;
  --cc-accent-050: #F1F7FD;

  /* Semánticos */
  --cc-success-700: #14603F;
  --cc-success-600: #1B7A55;
  --cc-success-surface: #E8F5EE;
  --cc-success-border: #B9DECB;
  --cc-warning-700: #6E480E;
  --cc-warning-600: #8A5A12;
  --cc-warning-surface: #FBF1DF;
  --cc-warning-border: #E8CFA0;
  --cc-danger-700: #7F1F1F;
  --cc-danger-600: #A32B2B;
  --cc-danger-500: #BC3A3A;
  --cc-danger-surface: #FBEAE8;
  --cc-danger-border: #E8C2BC;
  --cc-info-700: #1B4571;
  --cc-info-600: #2A5A8C;
  --cc-info-surface: #E8F0F9;
  --cc-info-border: #C5D8EC;

  /* Alias semánticos de uso directo en componentes */
  --cc-text: var(--cc-ink-800);
  --cc-text-strong: var(--cc-ink-900);
  --cc-text-muted: var(--cc-ink-400);
  --cc-text-inverse: #FFFFFF;
  --cc-text-inverse-muted: #C9D7E8;  /* 11.74:1 sobre --cc-navy-950 */
  --cc-text-link: var(--cc-accent-500);
  --cc-text-link-hover: var(--cc-accent-700);
  --cc-text-disabled: var(--cc-ink-300);
  --cc-surface: var(--cc-paper);
  --cc-surface-raised: var(--cc-paper-raised);
  --cc-surface-sunken: var(--cc-sand);
  --cc-surface-inverse: var(--cc-navy-900);
  --cc-surface-hover: var(--cc-sand);
  --cc-surface-active: var(--cc-sand-deep);
  --cc-border: var(--cc-line);
  --cc-border-strong: var(--cc-line-strong);
  --cc-border-inverse: rgba(255, 255, 255, 0.16);
  --cc-accent: var(--cc-accent-500);
  --cc-accent-hover: var(--cc-accent-700);
  --cc-accent-active: var(--cc-accent-800);
  --cc-accent-soft: var(--cc-accent-100);
  --cc-secondary: var(--cc-navy-800);
  --cc-secondary-hover: var(--cc-navy-700);
  --cc-on-accent: #FFFFFF;
  --cc-on-secondary: #FFFFFF;
  --cc-overlay: rgba(8, 20, 38, 0.74);
  --cc-overlay-soft: rgba(8, 20, 38, 0.48);
  --cc-scrim-photo: linear-gradient(
    180deg,
    rgba(8, 20, 38, 0) 38%,
    rgba(8, 20, 38, 0.16) 64%,
    rgba(8, 20, 38, 0.72) 100%
  );

  /* Degradados de marca (sin fotografía decorativa; cero recursos) */
  --cc-gradient-hero: linear-gradient(
      118deg,
      rgba(8, 20, 38, 0.92) 0%,
      rgba(16, 32, 64, 0.84) 46%,
      rgba(31, 95, 168, 0.42) 100%
    ),
    linear-gradient(160deg, #081426 0%, #102040 54%, #17325A 100%);
  --cc-gradient-navy: linear-gradient(152deg, #081426 0%, #102040 56%, #17325A 100%);
  --cc-gradient-soft: linear-gradient(180deg, #EDF2F9 0%, #F4F7FB 100%);
  --cc-gradient-accent: linear-gradient(135deg, #1B5496 0%, #1F5FA8 58%, #3C7BC0 100%);
  --cc-pattern-dots: radial-gradient(
      circle at 1px 1px,
      rgba(16, 32, 64, 0.055) 1px,
      transparent 0
    )
    0 0 / 5px 5px;
  --cc-pattern-grid: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px)
      0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 /
      44px 44px;

  /* ---------------------------------------------------------------------
     2. Tipografía — pilas del sistema, sin descargas externas
     Display/UI: sans geométrica-humanista del sistema.
     Datos: mono para referencias, contadores y cifras tabulares.
     --------------------------------------------------------------------- */
  --cc-font-display: "Avenir Next", "Segoe UI", system-ui, -apple-system,
    BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --cc-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --cc-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Escala tipográfica (base 16px) */
  --cc-text-2xs: 0.6875rem;   /* 11px — etiquetas sobre mayúsculas */
  --cc-text-xs: 0.75rem;      /* 12px — eyebrow, meta, badges */
  --cc-text-sm: 0.875rem;     /* 14px — ayudas, tabla, chips */
  --cc-text-base: 1rem;       /* 16px — UI base */
  --cc-text-md: 1.0625rem;    /* 17px — cuerpo de lectura */
  --cc-text-lg: clamp(1.1875rem, 1.09rem + 0.35vw, 1.375rem);
  --cc-text-xl: clamp(1.5rem, 1.3rem + 0.85vw, 1.875rem);
  --cc-text-2xl: clamp(1.75rem, 1.38rem + 1.6vw, 2.375rem);
  --cc-text-3xl: clamp(2.125rem, 1.5rem + 2.6vw, 3rem);
  --cc-text-display: clamp(2.5rem, 1.55rem + 4.4vw, 4.25rem);
  --cc-text-display-xl: clamp(2.875rem, 1.5rem + 6.2vw, 5.5rem);

  /* Interlineado */
  --cc-leading-tight: 1.05;
  --cc-leading-snug: 1.2;
  --cc-leading-normal: 1.48;
  --cc-leading-relaxed: 1.7;

  /* Tracking */
  --cc-tracking-tight: -0.026em;
  --cc-tracking-snug: -0.014em;
  --cc-tracking-normal: 0;
  --cc-tracking-wide: 0.045em;
  --cc-tracking-eyebrow: 0.14em;

  /* Pesos */
  --cc-weight-regular: 400;
  --cc-weight-medium: 500;
  --cc-weight-semibold: 600;
  --cc-weight-bold: 700;

  /* Medidas de lectura */
  --cc-measure: 68ch;
  --cc-measure-narrow: 46ch;

  /* ---------------------------------------------------------------------
     3. Espaciado — base 4px, ritmo de 8
     --------------------------------------------------------------------- */
  --cc-space-0: 0;
  --cc-space-1: 0.25rem;
  --cc-space-2: 0.5rem;
  --cc-space-3: 0.75rem;
  --cc-space-4: 1rem;
  --cc-space-5: 1.25rem;
  --cc-space-6: 1.5rem;
  --cc-space-7: 2rem;
  --cc-space-8: 2.5rem;
  --cc-space-9: 3rem;
  --cc-space-10: 4rem;
  --cc-space-11: 5rem;
  --cc-space-12: 6rem;
  --cc-space-13: 8rem;

  /* Espaciado semántico de secciones */
  --cc-section-y: clamp(3rem, 2rem + 5vw, 6rem);
  --cc-section-y-tight: clamp(2rem, 1.5rem + 3vw, 3.5rem);

  /* ---------------------------------------------------------------------
     4. Radios — modernos y contenidos
     --------------------------------------------------------------------- */
  --cc-radius-none: 0;
  --cc-radius-xs: 3px;
  --cc-radius-sm: 6px;
  --cc-radius-md: 9px;
  --cc-radius-lg: 14px;
  --cc-radius-xl: 20px;
  --cc-radius-2xl: 28px;
  --cc-radius-pill: 999px;
  --cc-radius-circle: 50%;

  /* ---------------------------------------------------------------------
     5. Bordes y líneas
     --------------------------------------------------------------------- */
  --cc-border-width: 1px;
  --cc-border-width-strong: 2px;
  --cc-border-width-accent: 3px;
  --cc-rule-editorial: 1px solid var(--cc-line);

  /* ---------------------------------------------------------------------
     6. Sombras — navy muy suave
     --------------------------------------------------------------------- */
  --cc-shadow-none: none;
  --cc-shadow-xs: 0 1px 2px rgba(16, 32, 64, 0.05);
  --cc-shadow-sm: 0 1px 2px rgba(16, 32, 64, 0.06),
    0 3px 10px -4px rgba(16, 32, 64, 0.10);
  --cc-shadow-md: 0 2px 4px rgba(16, 32, 64, 0.05),
    0 14px 28px -16px rgba(16, 32, 64, 0.24);
  --cc-shadow-lg: 0 4px 10px rgba(16, 32, 64, 0.06),
    0 30px 52px -24px rgba(16, 32, 64, 0.30);
  --cc-shadow-xl: 0 8px 18px rgba(16, 32, 64, 0.08),
    0 50px 84px -34px rgba(16, 32, 64, 0.36);
  --cc-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --cc-shadow-card-hover: 0 4px 10px rgba(16, 32, 64, 0.07),
    0 22px 40px -22px rgba(16, 32, 64, 0.28);

  /* Foco: doble anillo blanco + azul, visible sobre claro y navy */
  --cc-focus-ring-color: var(--cc-accent-500);
  --cc-focus-ring-inner: #FFFFFF;
  --cc-focus-ring-width: 2px;
  --cc-focus-ring-gap: 2px;
  --cc-focus-shadow: 0 0 0 var(--cc-focus-ring-width) var(--cc-focus-ring-inner),
    0 0 0 calc(var(--cc-focus-ring-width) + var(--cc-focus-ring-gap))
      var(--cc-focus-ring-color);
  --cc-focus-shadow-inverse: 0 0 0 2px var(--cc-navy-950),
    0 0 0 4px var(--cc-accent-300);

  /* ---------------------------------------------------------------------
     7. Layout — contenedor, rejilla, gutters, alturas
     --------------------------------------------------------------------- */
  --cc-container-max: 1240px;
  --cc-container-wide: 1440px;
  --cc-container-narrow: 760px;
  --cc-container-form: 900px;
  --cc-container-auth: 440px;
  --cc-gutter: clamp(1rem, 0.55rem + 2.4vw, 2.5rem);
  --cc-gutter-tight: clamp(0.75rem, 0.55rem + 1.4vw, 1.5rem);

  --cc-grid-columns: 12;
  --cc-grid-gap: var(--cc-space-6);
  --cc-grid-gap-sm: var(--cc-space-3);

  --cc-header-h: 66px;
  --cc-header-h-lg: 80px;
  --cc-footer-y: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  --cc-tap-min: 44px;
  --cc-control-h: 48px;
  --cc-control-h-sm: 40px;
  --cc-textarea-min: 180px;
  --cc-sidebar-w: 330px;
  --cc-sidebar-gap: var(--cc-space-10);
  --cc-thumb-size: 76px;
  --cc-avatar: 40px;

  /* ---------------------------------------------------------------------
     8. Proporciones de medios
     --------------------------------------------------------------------- */
  --cc-aspect-card: 4 / 3;
  --cc-aspect-gallery: 3 / 2;
  --cc-aspect-hero: 21 / 9;
  --cc-aspect-thumb: 1 / 1;
  --cc-aspect-portrait: 3 / 4;
  --cc-logo-aspect: 640 / 240;

  /* ---------------------------------------------------------------------
     9. Movimiento
     app.css anula duraciones bajo prefers-reduced-motion
     usando --cc-duration-reduced.
     --------------------------------------------------------------------- */
  --cc-duration-instant: 0ms;
  --cc-duration-fast: 120ms;
  --cc-duration-base: 180ms;
  --cc-duration-slow: 260ms;
  --cc-duration-slower: 420ms;
  --cc-duration-reduced: 1ms;
  --cc-ease-standard: cubic-bezier(0.2, 0.65, 0.3, 1);
  --cc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --cc-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Atajos de transición */
  --cc-transition-colors: color var(--cc-duration-base) var(--cc-ease-standard),
    background-color var(--cc-duration-base) var(--cc-ease-standard),
    border-color var(--cc-duration-base) var(--cc-ease-standard);
  --cc-transition-control: color var(--cc-duration-base) var(--cc-ease-standard),
    background-color var(--cc-duration-base) var(--cc-ease-standard),
    border-color var(--cc-duration-base) var(--cc-ease-standard),
    box-shadow var(--cc-duration-base) var(--cc-ease-standard);
  --cc-transition-lift: transform var(--cc-duration-slow) var(--cc-ease-out),
    box-shadow var(--cc-duration-slow) var(--cc-ease-out);
  --cc-transition-media: transform var(--cc-duration-slower) var(--cc-ease-out);

  /* Transformaciones de interacción */
  --cc-lift-card: -4px;
  --cc-lift-button: -1px;
  --cc-scale-media: 1.04;
  --cc-scale-press: 0.985;

  /* ---------------------------------------------------------------------
     10. Capas
     --------------------------------------------------------------------- */
  --cc-z-base: 0;
  --cc-z-raised: 10;
  --cc-z-sticky: 100;
  --cc-z-header: 200;
  --cc-z-overlay: 300;
  --cc-z-sheet: 400;
  --cc-z-toast: 500;
  --cc-z-skip: 600;
}