/* =========================================================
   1 · TOKENS
   Único sitio con valores de color. El resto usa variables.
   ========================================================= */
@layer tokens, base, layout, components, sections, motion, utilities;

@layer tokens {
  :root {
    color-scheme: dark;

    /* Marca */
    --pink: #FB01B4;        --pink-rgb: 251 1 180;
    --pink-light: #FF5AD2;
    --pink-strong: #E0009F; /* final del degradado: negro encima ≥ 4.5:1 */
    --pink-deep: #B3007B;   /* rosa como texto sobre blanco (6.6:1) */
    --black: #000000;       --black-rgb: 0 0 0;
    --white: #FFFFFF;       --white-rgb: 255 255 255;

    /* Banderas del selector de idioma (colores oficiales) */
    --flag-us-red: #B31942;  --flag-us-white: #FFFFFF;  --flag-us-blue: #0A3161;
    --flag-es-red: #AA151B;  --flag-es-yellow: #F1BF00;

    /* Texto */
    --text: #F4F4F6;        /* sobre negro · 19:1 */
    --text-2: #A6A6B0;      /* sobre negro · 8.7:1 */
    --ink: #111113;         /* sobre blanco · 18.9:1 */
    --ink-2: #55555E;       /* sobre blanco · 7.4:1 */

    /* Superficies y líneas */
    --surface: #0C0C0E;
    --surface-2: #151518;
    --line: #26262B;
    --line-strong: #5C5C66; /* bordes de controles · 3.2:1 sobre negro */
    --card-line: #E7E5EC;
    --field-border: #8E8C96;/* borde de campos · 3.3:1 sobre blanco */
    --field-border-hover: #55555E;

    /* Estados */
    --error: #C4002E;       /* sobre blanco · 6.2:1 */
    --ok: #0A7A3E;          /* sobre blanco · 5.4:1 */
    --focus: var(--pink);

    /* Tratamiento de fotos: duotono rosa/negro.
       Para verlas a color natural: --photo-filter: none; --photo-blend: normal; */
    --photo-filter: grayscale(1) contrast(1.2) brightness(1.05);
    --photo-blend: multiply;

    --grad-pink: linear-gradient(135deg, var(--pink-light) 0%, var(--pink) 50%, var(--pink-strong) 100%);
    --mark: url("../assets/brand/logo-mark.png");
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    /* Tipografía */
    --font: "Urbanist", "Segoe UI", -apple-system, sans-serif;
    --logo: "Saira", "Arial Narrow", sans-serif;

    /* Espacio y forma */
    --wrap: 1240px;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --section: clamp(5rem, 10vw, 8.5rem);
    --header-h: 76px;
    --r-pill: 999px;
    --r-card: 18px;
    --r-field: 12px;

    /* Movimiento */
    --ease: cubic-bezier(.16, 1, .3, 1);
    --t-fast: .15s;
    --t: .35s;
  }
}