/*
 * Imobilem Theme — Design Tokens
 *
 * Single source of truth for all visual values.
 * Derived from Figma Atomos frame (node 115-348).
 * Components reference these via var(--token-name).
 */

/* ── Self-hosted fonts ── */

@font-face {
  font-family: 'Inter';
  src: url('../assets/Cormorant_Infant,Inter/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/Cormorant_Infant,Inter/Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Infant';
  src: url('../assets/Cormorant_Infant,Inter/Cormorant_Infant/CormorantInfant-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Infant';
  src: url('../assets/Cormorant_Infant,Inter/Cormorant_Infant/CormorantInfant-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── Colors: Imobilem ── */
  --c-black: #000000;
  --c-white: #FFFFFF;
  --c-accent: #F81111;
  --c-brand: #D2FA64;

  /* Grays (Figma Gris 1–4) */
  --c-gris-1: #F3F3F3;
  --c-gris-2: #DDDDDD;
  --c-gris-3: #626262;
  --c-gris-4: #939393;

  --c-gris-5: #373737;

  /* Panels on dark backgrounds (Figma: D_Portafolio container) */
  --c-panel-dark: #434343;

  /* Category dot colors (Figma: D_Portafolio tab indicators) */
  --c-cat-departamentos: #5980DD;
  --c-cat-terrenos: #697763;
  --c-cat-industrial: #BC7A7A;

  /* Convenience aliases */
  --c-gray: var(--c-gris-1);

  /* ── Colors: Amaralda / Verdalba ── */
  --c-amaralda-01: #AD8E62;
  --c-amaralda-02: #F06D2A;
  --c-amaralda-03: #EC9064;
  --c-amaralda-04: #7ECED0;
  --c-amaralda-05: #F1EFEE;
  --c-amaralda-06: #1B1E28;
  --c-amaralda-07: #102A34;
  --c-amaralda-08: #8F7058;  /* Figma: D_C_Imobilem text color */
  --c-amaralda-09: #B99053;  /* Figma: D_C_Imobilem CTA gold */

  /* Named aliases for readability */
  --c-tan: var(--c-amaralda-01);
  --c-charcoal: var(--c-amaralda-06);
  --c-near-black: #0D0D0D;

  /* ── Colors: Tags / Etiquetas de Estatus ── */
  --c-tag-entrega: #C6FFCA;      /* Figma: Tag_Entrega Inmediata — green */
  --c-tag-vendido: #FFDDD9;      /* Figma: Tag_100%Vendido — pink */
  --c-tag-proximo: #FDFFA3;      /* Figma: Tag_Próximo a entregar — yellow */
  --c-tag-preventa: #E1E1E1;     /* Figma: Tag_Preventa — gray */
  --c-tag-desarrollo: #FFE0B9;   /* Figma: Tag_En Desarrollo — orange */
  --c-tag-renta: #E1D6F8;        /* Figma: Tag_Renta y Venta — purple */
  --c-tag-venta: #FFC9C9;        /* Figma: Tag_Venta — light red */

  /* ── Semantic colors ── */
  --c-text: var(--c-charcoal);
  --c-text-muted: var(--c-gris-3);
  --c-text-subtle: var(--c-gris-4);
  --c-border: var(--c-gris-2);
  --c-border-dark: #2A2A2A;

  /* ── Typography: Families ── */
  --font-body: 'Inter', sans-serif;
  --font-display: 'Cormorant Infant', serif;

  /* ── Typography: Sizes (Figma scale) ── */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 20px;
  --text-3xl: 24px;
  --text-4xl: 30px;
  --text-5xl: 50px;
  --text-6xl: 70px;
  --text-7xl: 100px;

  /* ── Typography: Display sizes (Figma exact) ── */
  --display-1-size: 70px;
  --display-1-lh: 72px;
  --display-1-alt-size: 100px;
  --display-1-alt-lh: 70px;
  --display-2-size: 50px;
  --display-2-lh: 54px;
  --display-2-alt-size: 70px;
  --display-2-alt-lh: 60px;
  --display-3-size: 30px;
  --display-3-lh: 36px;

  /* ── Typography: Weights ── */
  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ── Typography: Line heights ── */
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  /* ── Typography: Letter spacing (Figma %) ── */
  /* Display */
  --tracking-display-1: -3.5px;   /* 70px × -5% */
  --tracking-display-1-alt: -3.0px;
  --tracking-display-2: -1.5px;   /* 50px × -3% */
  --tracking-display-2-alt: -2.1px;
  --tracking-display-3: -0.9px;   /* 30px × -3% */
  /* Subtítulos */
  --tracking-subtitle-1: -1.2px;  /* 24px × -5% */
  --tracking-subtitle-2: -0.6px;  /* 20px × -3% */
  --tracking-subtitle-3: -0.54px; /* 18px × -3% */
  /* Párrafos & UI */
  --tracking-paragraph-1: -0.54px; /* 18px × -3% */
  --tracking-paragraph-2: -0.48px; /* 16px × -3% */
  --tracking-paragraph-3: -0.42px; /* 14px × -3% */
  --tracking-disclaimer: -0.36px;  /* 12px × -3% */
  --tracking-wordmark: 0.02em;     /* Figma: brand wordmark */
  /* Aliases for backward compat */
  --tracking-paragraph: var(--tracking-paragraph-1);
  --tracking-small: var(--tracking-paragraph-2);
  --tracking-caption: var(--tracking-paragraph-3);

  /* ── Layout ── */
  --max-width: 1440px;
  --content-width: 1200px;
  --grid-gap: 32px;
  --header-height: 76px;

  /* ── Spacing (4px base) ── */
  --sp-0-5: 2px;
  --sp-1: 4px;
  --sp-1-5: 6px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-15: 60px;
  --sp-16: 64px;
  --sp-18: 72px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ── Borders & Radius (Figma) ── */
  --radius-none: 0;
  --radius-sm: 5px;
  --radius-xs: 6px;
  --radius: 8px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 30px;
  --radius-btn: 40px;

  /* ── Overlays ── */
  --c-overlay-30: rgba(0, 0, 0, 0.3);          /* Hero/media dark overlay */
  --c-overlay-white-10: rgba(255, 255, 255, 0.1); /* Subtle white on dark bg */
  --c-amaralda-01-light: rgba(173, 142, 98, 0.06); /* Amaralda hover highlight */

  /* ── Shadows ── */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-side: -2px 0 8px rgba(0, 0, 0, 0.06); /* Tab active indicator */

  /* ── Transitions ── */
  --ease: 0.2s ease;
  --ease-slow: 0.4s ease;
}

@media (max-width: 767px) {
  :root {
    --header-height: 64px;
  }
}