/* ============================================================
   KTR · Kerscher's Top Rent — Design Tokens
   Colores muestreados del logotipo original (2005).
   Rojo #E11A21 · Oro #FCB712 · Negro #272526
   ============================================================ */

:root {
  /* ---- Marca (invariantes: no cambian con el tema) ---- */
  --brand-red:      #E11A21;
  --brand-red-deep: #B4141A;
  --brand-gold:     #FCB712;
  --brand-black:    #272526;
  --brand-silver:   #C8CBCE;

  /* ---- Superficies ---- */
  --bg:            #FAF8F5;   /* crema cálido, no blanco clínico */
  --bg-alt:        #F2EEE8;
  --surface:       #FFFFFF;
  --surface-2:     #F7F4EF;
  --surface-inset: #EFEAE2;

  /* ---- Texto ---- */
  --text:      #14161A;
  --text-soft: #5A6068;
  --text-mute: #666B73;
  --text-on-brand: #FFFFFF;

  /* ---- Líneas ---- */
  --line:        #E5E0D9;
  --line-strong: #D3CCC1;

  /* ---- Acento semántico (deriva del tema) ---- */
  --accent:        var(--brand-red);
  --accent-hover:  var(--brand-red-deep);
  --accent-text:   #C4161C;   /* rojo legible como texto sobre crema */
  --accent-weak:   rgba(225, 26, 33, .08);
  --accent-ring:   rgba(225, 26, 33, .35);

  --whatsapp: #25D366;

  /* ---- Elevación ---- */
  --shadow-sm: 0 1px 2px rgba(20,22,26,.06), 0 1px 3px rgba(20,22,26,.05);
  --shadow-md: 0 4px 12px rgba(20,22,26,.07), 0 2px 4px rgba(20,22,26,.05);
  --shadow-lg: 0 18px 40px rgba(20,22,26,.12), 0 4px 12px rgba(20,22,26,.07);
  --shadow-xl: 0 32px 64px rgba(20,22,26,.16), 0 8px 20px rgba(20,22,26,.08);

  /* ---- Cristal (header / sheet) ---- */
  --glass:        rgba(250,248,245,.82);
  --glass-solid:  rgba(250,248,245,.97);
  --scrim:        rgba(20,22,26,.55);

  /* ---- Tipografía ---- */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-3xs: .6875rem;   /* 11 */
  --fs-2xs: .75rem;     /* 12 */
  --fs-xs:  .8125rem;   /* 13 */
  --fs-sm:  .9375rem;   /* 15 */
  --fs-md:  1rem;       /* 16 */
  --fs-lg:  clamp(1.0625rem, .98rem + .38vw, 1.1875rem);
  --fs-xl:  clamp(1.25rem, 1.13rem + .55vw, 1.5rem);
  --fs-2xl: clamp(1.5rem, 1.28rem + 1.05vw, 2.125rem);
  --fs-3xl: clamp(1.875rem, 1.5rem + 1.75vw, 2.875rem);
  --fs-4xl: clamp(2.375rem, 1.7rem + 3.1vw, 4.25rem);
  --fs-5xl: clamp(2.375rem, 1.55rem + 3.5vw, 4.25rem);

  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-base:  1.62;

  --track-tight: -.028em;
  --track-flat:  -.012em;
  --track-wide:  .14em;

  /* ---- Espaciado (escala de 4) ---- */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem;  --s-8: 2rem;    --s-10: 2.5rem;
  --s-12: 3rem;   --s-16: 4rem;   --s-20: 5rem;   --s-24: 6rem;

  --section-y: clamp(4.5rem, 3rem + 7vw, 8rem);
  --gutter:    clamp(1.25rem, .7rem + 2.4vw, 2.5rem);
  --maxw:      78rem;   /* 1248 */
  --maxw-text: 46rem;

  /* ---- Forma ---- */
  --r-xs: 6px;  --r-sm: 10px; --r-md: 16px;
  --r-lg: 22px; --r-xl: 30px; --r-full: 999px;

  /* ---- Movimiento ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .16s;
  --t-base: .28s;
  --t-slow: .5s;

  /* ---- Cromo móvil ---- */
  --tabbar-h: 4.875rem;
  --header-h: 4.5rem;

  --z-header: 100;
  --z-fab: 90;
  --z-tabbar: 110;
  --z-sheet: 120;
  --z-modal: 130;

  color-scheme: light;
}

/* ============================================================
   TEMA OSCURO
   Se aplica por preferencia de sistema o por data-theme explícito.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0E1013;
    --bg-alt:        #131619;
    --surface:       #16191E;
    --surface-2:     #1C2026;
    --surface-inset: #22262D;

    --text:      #E9E6E1;
    --text-soft: #9BA1A9;
    --text-mute: #828892;

    --line:        #252A31;
    --line-strong: #333941;

    --accent-text: #FF5C60;
    --accent-weak: rgba(255, 92, 96, .12);
    --accent-ring: rgba(255, 92, 96, .4);

    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --shadow-md: 0 4px 12px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3);
    --shadow-lg: 0 18px 40px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.35);
    --shadow-xl: 0 32px 64px rgba(0,0,0,.6), 0 8px 20px rgba(0,0,0,.4);

    --glass:       rgba(14,16,19,.82);
    --glass-solid: rgba(14,16,19,.97);
    --scrim:       rgba(0,0,0,.7);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:            #0E1013;
  --bg-alt:        #131619;
  --surface:       #16191E;
  --surface-2:     #1C2026;
  --surface-inset: #22262D;

  --text:      #E9E6E1;
  --text-soft: #9BA1A9;
  --text-mute: #828892;

  --line:        #252A31;
  --line-strong: #333941;

  --accent-text: #FF5C60;
  --accent-weak: rgba(255, 92, 96, .12);
  --accent-ring: rgba(255, 92, 96, .4);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 4px 12px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3);
  --shadow-lg: 0 18px 40px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.35);
  --shadow-xl: 0 32px 64px rgba(0,0,0,.6), 0 8px 20px rgba(0,0,0,.4);

  --glass:       rgba(14,16,19,.82);
  --glass-solid: rgba(14,16,19,.97);
  --scrim:       rgba(0,0,0,.7);

  color-scheme: dark;
}