/* tokens.css — adriagarciafont.com
   Font única de veritat de tots els valors visuals.
   Es deriva de brandbook.md. Cap component pot hardcodejar un valor.
   Si cal un valor nou: primer s'afegeix aquí, després s'usa. */

:root {
  /* ---------- Color ---------- */
  /* Base os. Sense mode fosc, per decisió. Vegeu brandbook.md > Color. */
  --color-paper: #efebe1;
  --color-paper-sunk: #e7e2d6;
  --color-paper-raised: #f6f3ec;

  --color-ink: #1b1917;
  --color-ink-muted: #5c574e;
  --color-ink-faint: #6b6456;

  --color-rule: #c6bca6;
  --color-rule-strong: #a79b82;

  --color-accent: #2e5339;
  --color-accent-strong: #24422d;
  --color-on-accent: #efebe1;
  --color-accent-pale: #e0e5dd;

  /* Marcador. Una sola feina: assenyalar una afirmació dins de text corregut.
     Mai enllaços, mai etiquetes, mai fons, mai vores. Si fa res més, sobra. */
  --color-marker: #ebcf7a;

  /* Superfície invertida. Una secció de la pàgina, no dues. */
  --color-invert-bg: #2e5339;
  --color-invert-ink: #efebe1;
  --color-invert-muted: #dce5dd;
  --color-invert-faint: #a9c4af;

  --color-focus: #2e5339;

  /* ---------- Tipografia: famílies ---------- */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-sans: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* ---------- Tipografia: escala ---------- */
  /* Fluida entre 380px i 1280px de viewport. */
  --text-2xs: 0.6875rem;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: clamp(1.25rem, 0.9rem + 1vw, 1.5rem);
  --text-xl: clamp(1.625rem, 1.1rem + 2vw, 2.125rem);
  --text-display: clamp(2rem, 1.2rem + 3.4vw, 3.25rem);
  --text-figure: clamp(2.5rem, 1.4rem + 4.6vw, 4rem);

  /* ---------- Tipografia: pes ---------- */
  --weight-regular: 400;
  --weight-medium: 500;

  /* ---------- Tipografia: interlineat ---------- */
  --leading-tight: 1.15;
  --leading-snug: 1.28;
  --leading-normal: 1.6;
  --leading-loose: 1.75;

  /* ---------- Tipografia: espaiat entre lletres ---------- */
  --tracking-display: -0.015em;
  --tracking-normal: 0;
  --tracking-label: 0.08em;

  /* ---------- Espai ---------- */
  /* Escala de 4px. No inventar valors intermedis. */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;
  --space-4xl: 10rem;

  /* ---------- Layout ---------- */
  --measure: 34rem;
  --measure-wide: 44rem;   /* blocs que conviuen amb graelles a tot ample */
  --container: 68rem;
  --container-narrow: 46rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Amplades mínimes de columna. Usar-les a minmax(), mai un rem solt. */
  --col-figure: 13rem;
  --col-quote: 15rem;
  --col-doing: 19rem;
  --col-media: 11rem;
  --col-portrait: 16rem;
  --col-outlet: 9rem;
  --col-clipping: 21rem;

  /* Altura base dels logos de mitjans. Cada logo la corregeix amb el seu
     --logo-scale perquè s'igualin a ull, no per caixa. */
  --logo-h: 1.375rem;
  --logo-h-bar: 0.6875rem;

  /* Punt de ruptura. Les media queries no accepten custom properties,
     així que el valor es repeteix al @media i aquest token és la referència. */
  --bp-sm: 40rem;

  /* ---------- Filets ---------- */
  --rule-width: 1px;
  --rule-default: var(--rule-width) solid var(--color-rule);
  --rule-emphasis: var(--rule-width) solid var(--color-rule-strong);

  /* ---------- Radis ---------- */
  /* Per defecte 0. Vegeu brandbook.md > Filets, radis i elevació. */
  --radius-none: 0;
  --radius-input: 2px;

  /* ---------- Elevació ---------- */
  /* No existeix. Token present per bloquejar la temptació. */
  --shadow-none: none;

  /* ---------- Moviment ---------- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);

  /* ---------- Focus ---------- */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* ---------- Imatges ---------- */
  --img-filter: grayscale(1) contrast(1.35) brightness(1.05);
  --img-tint: var(--color-paper);
  --img-tint-opacity: 0.14;
  --img-blend: screen;
  --ratio-portrait: 4 / 5;
  --ratio-landscape: 3 / 2;
  --ratio-wide: 21 / 8;

  /* ---------- Trama ---------- */
  /* Duotò tramat per a fotos reals. Textura, no decoració:
     el patró substitueix el gris continu, no s'hi superposa. */
  --texture-size: 4px;
  --texture-dot: 34%;
  --texture-halftone: radial-gradient(
    circle at center,
    var(--color-paper) 0 var(--texture-dot),
    transparent calc(var(--texture-dot) + 1%)
  );
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
  }
}