/* ============================================================
   FLORENTI V16 «Nueva planta» · tokens.css
   ADN del sistema: capas, color, tipografía, espacio, movimiento.
   Este archivo es propiedad del orquestador; los demás escriben
   en components.css / motion.css / pages/*.css dentro de su capa.
   ============================================================ */

@layer tokens, base, components, pages, motion;

/* Fraunces variable (OFL), autoalojada. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/fraunces-latin-italic.woff2") format("woff2");
}

/* Fuera de capas a propósito: el registro no participa en la cascada.
   Registradas, estas propiedades son INTERPOLABLES. */
@property --glare-x { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --glare-y { syntax: "<percentage>"; inherits: true; initial-value: 18%; }
@property --sheen { syntax: "<percentage>"; inherits: false; initial-value: -140%; }

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

    /* Color */
    --paper: #fcf8f3;
    --porcelain: #f5ede6;
    --stone: #e6dbd0;
    --ink: #171110;
    --cocoa: #2a211f;
    --muted: #695b55;
    --wine: #8f183f;
    --wine-deep: #3e0b20;
    /* Vértice claro del vino: es el que abre los degradados de CTA.
       Antes estaba escrito a mano (#a22150) dentro de fairytale. */
    --wine-lift: #a92450;
    --brass: #a48357;
    --brass-text: #725539;
    --hairline: color-mix(in srgb, var(--brass) 36%, transparent);
    --focus-ring: var(--wine);

    /* Acabado de superficie: grano de papel, reflejo especular y bisel
       superior. Toda pieza elevada comparte esta misma luz. */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.34'/%3E%3C/svg%3E");
    --specular: linear-gradient(104deg, transparent 40%, rgb(255 255 255 / 46%) 50%, transparent 60%);
    --bevel: inset 0 1px 0 rgb(255 255 255 / 62%);

    /* Tonos de producto: UNA sola verdad por tono. Antes iban a mano en
       tres hojas con hex distintos y el mismo bolso salía de tres colores
       según se viera en tarjeta, filtro o ficha. */
    --tone-beige: #d9c6ab;
    --tone-arena: #c7ae8b;
    --tone-chocolate: #58402f;
    --tone-burdeos: #77203a;
    --tone-natural: #d3c4a7;
    --tone-champagne: #e4d0ab;
    --tone-cuero: #96603a;
    --success: #315b46;
    --warning: #8b5b25;
    --danger: #8d302f;
    --white: #fff;

    /* Tipografía */
    --font-display: "Fraunces", "Bodoni MT", Didot, Georgia, serif;
    --font-sans: system-ui, "Segoe UI", Roboto, -apple-system, sans-serif;
    --text-hero: clamp(56px, 9vw, 148px);
    --text-display: clamp(44px, 6.4vw, 96px);
    --text-title: clamp(30px, 3.6vw, 52px);
    --text-heading: clamp(21px, 1.4vw + 14px, 27px);
    --text-body: 16px;
    --text-small: 13.5px;
    --text-micro: 12.5px;

    /* Espacio */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 14px;
    --space-4: 22px;
    --space-5: 34px;
    --space-6: 54px;
    --space-7: 86px;
    --space-8: 138px;
    --page-pad: clamp(18px, 4vw, 56px);
    --page-max: 1560px;
    --header-h: 74px;

    /* Forma y profundidad */
    --radius-ui: 14px;
    --radius-media: 18px;
    --radius-soft: 22px;
    --radius-pill: 999px;
    /* Tres capas: contacto que ancla al papel, penumbra que da cuerpo y
       difusa que separa del fondo. El contacto la vuelve un objeto. */
    --shadow-ambient:
      0 1px 2px -1px rgb(45 30 20 / 13%),
      0 6px 15px -10px rgb(67 16 31 / 20%),
      0 22px 58px -42px rgb(67 16 31 / 24%);
    --shadow-lifted:
      0 2px 5px -2px rgb(45 30 20 / 16%),
      0 13px 28px -17px rgb(67 16 31 / 26%),
      0 40px 84px -44px rgb(67 16 31 / 40%);
    --shadow-drawer:
      -1px 0 3px -1px rgb(24 20 18 / 12%),
      -28px 0 80px -34px rgb(24 20 18 / 40%);

    /* Movimiento */
    --dur-instant: 90ms;
    --dur-fast: 160ms;
    --dur-ui: 220ms;
    --dur-enter: 480ms;
    --dur-editorial: 760ms;
    --dur-hero: 950ms;
    --dur-sheen: 820ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-emph: cubic-bezier(0.22, 1, 0.36, 1);
    /* `linear()` describe un muelle real, imposible con una bézier sola.
       --ease-back es su versión barata para hovers de un tramo. */
    --ease-spring: linear(0, .1 3%, .38 8%, .74 14%, .98 19%, 1.09 24%, 1.11 30%, 1.05 38%, .99 48%, .997 66%, 1);
    --ease-back: cubic-bezier(.34, 1.5, .64, 1);

    /* Capas apiladas */
    --z-header: 100;
    --z-drawer: 500;
    --z-toast: 700;
    --z-curtain: 900;
  }

  @media (max-width: 719.98px) {
    :root {
      --header-h: 66px;
      --page-pad: 16px;
    }
  }
}

@layer base {
  *,
  *::before,
  *::after { box-sizing: border-box; }

  * { margin: 0; }

  html {
    background: var(--paper);
    scroll-behavior: smooth;
    /* Header fijo: sin colchón los anclajes caen bajo la barra. */
    scroll-padding-top: calc(var(--header-h) + 16px);
    -webkit-text-size-adjust: 100%;
    /* Cada control tiene su propio :active con muelle; el destello gris
       del navegador táctil se le superponía y lo ensuciaba. */
    -webkit-tap-highlight-color: transparent;
  }

  body {
    color: var(--ink);
    background: var(--paper);
    font: 400 var(--text-body) / 1.62 var(--font-sans);
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, blockquote {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-weight: 385;
    letter-spacing: -0.024em;
    line-height: 0.99;
    color: var(--cocoa);
    text-wrap: balance;
    hyphens: none;
  }

  h1 em, h2 em, h3 em, blockquote em {
    font-style: italic;
    font-weight: 335;
    color: var(--wine);
  }

  p { text-wrap: pretty; }

  img, svg, video { display: block; max-width: 100%; }

  button, input, select, textarea { font: inherit; color: inherit; }

  a { color: inherit; }

  ::selection { color: var(--white); background: var(--wine); }

  /* Destino de un anclaje: un pulso de latón lo señala sin mover nada. */
  :target { animation: f-target-glow 1.6s var(--ease-out) 1; }

  @keyframes f-target-glow {
    from { background-color: color-mix(in srgb, var(--brass) 26%, transparent); }
  }

  :focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 4px;
    transition: outline-offset var(--dur-fast) var(--ease-back);
  }

  /* Superficies oscuras: el anillo vino sobre --wine-deep da 1,64:1 y es
     invisible con teclado. Reasignan el token a porcelana (14,9:1) en vez de
     redefinir el anillo en cada página. */
  .p-home__editorial,
  .p-home__lookbook,
  .p-contacto__captcha { --focus-ring: var(--porcelain); }

  main { display: block; }

  main[tabindex="-1"]:focus { outline: 0; }

  [hidden] { display: none !important; }

  [inert] { pointer-events: none; }

  .container {
    width: min(var(--page-max), 100% - var(--page-pad) * 2);
    margin-inline: auto;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: calc(var(--z-curtain) + 1);
    padding: 12px 18px;
    background: var(--wine);
    color: var(--white);
    border-radius: var(--radius-ui);
    font: 600 13px/1 var(--font-sans);
    text-decoration: none;
    translate: 0 -200%;
    transition: translate var(--dur-ui) var(--ease-out);
  }

  .skip-link:focus-visible { translate: 0 0; }

  .eyebrow {
    color: var(--brass-text);
    font: 600 12px/1.3 var(--font-sans);
    letter-spacing: 0.24em;
    text-transform: uppercase;
  }

  /* Packshot fundido en papel: la regla madre de imagen de producto. */
  .blend-img {
    mix-blend-mode: multiply;
    filter: brightness(1.06);
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }

    ::view-transition-group(*),
    ::view-transition-image-pair(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
      animation: none !important;
    }
  }
}