/* ══════════════════════════════════════════════════════════════════════
   HUNGER · sistema
   Paleta medida de sus propias fotos y de su logo. Ver brief.md §3.
   ══════════════════════════════════════════════════════════════════════ */

@layer base, componentes, utilidades;

@layer base {

  :root {
    /* ── tinta y superficies (medidas del salón: L4–L15) ── */
    --tinta:        #13140A;
    --tinta-honda:  #0C0D06;
    --elevado:      #1E1C11;
    --elevado-alto: #2E2310;
    --linea:        #3A3120;
    --linea-tenue:  #262117;

    /* ── marca ── */
    --oro:          #C6AE60;   /* medido del logo — 7.99:1 sobre tinta */
    --oro-tenue:    #8E7C44;
    --laton:        #D1B586;   /* la luz de vela del salón */
    --hueso:        #E8E2D6;
    --hueso-medio:  #A79E8C;

    /* ── la llama: medida de la lumbre de su Josper ── */
    --llama:        #FC8213;
    --brasa:        #CE5A0F;

    /* ── acentos del local ── */
    --terracota:    #883F34;
    --rosa-polvo:   #9A6A5E;
    --botella:      #1C2A17;

    /* ── tipografía ── */
    --display: 'Bodoni Moda', 'Bodoni MT', Didot, Georgia, serif;
    /* la propia: para el nombre y los titulares de sección */
    --marca:   'Bodoni Moda', 'Bodoni MT', Didot, Georgia, serif;
    /* la segunda voz: escritura formal para los rotulos y las florituras.
       Se eligio mirando seis candidatas en oro sobre la tinta: es la unica
       con cuerpo suficiente para no deshilacharse sobre negro. */
    --floritura: 'Petit Formal Script', 'Snell Roundhand', 'Apple Chancery', cursive;
    /* el sistema de la propuesta B: la Bodoni manda y la Jost se lee */
    --texto:   'Jost', 'Futura', 'Century Gothic', system-ui, -apple-system, sans-serif;
    --neutra:  'Jost', 'Futura', 'Century Gothic', system-ui, -apple-system, sans-serif;

    /* escala: salto titular→cuerpo ≈ 5.5× */
    --t-mega:  clamp(3.25rem, 11vw, 8.75rem);   /* 52 → 140 px */
    --t-gran:  clamp(2.25rem, 6.2vw, 4.5rem);   /* 36 →  72 px */
    --t-med:   clamp(1.5rem, 3vw, 2.125rem);    /* 24 →  34 px */
    --t-sub:   1.1875rem;                        /* 19 px */
    --t-base:  1rem;                             /* 16 px */
    --t-min:   0.8125rem;                        /* 13 px */
    --t-rotulo:0.75rem;                          /* 12 px — el piso legible */
    /* siete tamaños en todo el sitio, y ni uno más. */

    /* ── ritmo ── */
    --aire:      clamp(4.5rem, 9vw, 9rem);
    --aire-poco: clamp(2.75rem, 5vw, 4.5rem);
    --medida:    38.75rem;   /* 620px de medida de lectura */
    --marco:     clamp(1.25rem, 4.5vw, 4.5rem);
    --tope:      88rem;

    --curva: cubic-bezier(.22, 1, .36, 1);
  }

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

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    background: var(--tinta);
    color: var(--hueso);
    font-family: var(--texto);
    font-size: var(--t-base);
    line-height: 1.68;
    font-weight: 380;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  h1, h2, h3 {
    font-family: var(--display);
    font-weight: 500;          /* nunca 400: sobre negro las astas finas se deshilachan */
    /* y nunca con el eje optico automatico: a cuerpos grandes el navegador
       le pone opsz 96 y la didona se queda en puros pelos. */
    font-optical-sizing: none;
    font-variation-settings: 'opsz' 20, 'wght' 500;
    line-height: 0.98;
    letter-spacing: -0.015em;
    margin: 0;
    text-wrap: balance;
  }

  p { margin: 0; }

  img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  a { color: inherit; text-decoration: none; }

  ul { margin: 0; padding: 0; list-style: none; }

  /* ningun texto por debajo de 12px, tampoco los small heredados */
  small { font-size: max(0.75rem, 0.85em); }

  :focus-visible {
    outline: 2px solid var(--llama);
    outline-offset: 3px;
    border-radius: 2px;
  }

  ::selection { background: var(--oro); color: var(--tinta); }
}

@layer utilidades {

  /* ── el rótulo: versalitas espaciadas, la voz menor del sitio ── */
  .rotulo {
    font-size: var(--t-rotulo);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
    /* por variable, no por valor: la capa utilidades gana a componentes y un
       color puesto desde el componente se perdia sin dar error. */
    color: var(--rotulo-tinta, var(--oro-tenue));
    font-feature-settings: "tnum";
  }

  .medida { max-width: var(--medida); }

  .seccion {
    padding-block: var(--aire);
    padding-inline: var(--marco);
  }

  .tope {
    max-width: var(--tope);
    margin-inline: auto;
  }

  /* ── aparecer: ligado al scroll, en CSS nativo ──
     El contenido NUNCA depende de JS: sin soporte, se ve entero.
     (lección: los reveals con opacity:0 + clase por JS borraron un sitio) */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .surge {
        animation: surgir linear both;
        animation-timeline: view();
        animation-range: entry 8% cover 26%;
      }
      @keyframes surgir {
        from { opacity: 0; translate: 0 1.75rem; }
        to   { opacity: 1; translate: 0 0; }
      }
    }
  }
}