/* ==========================================================================
   Publicis de Alba — design tokens
   Source: DESIGN-PLAN.md §1.4 (type), §2.1 (color), §3.2 (grid/spacing), §6 (motion)
   Breakpoints can't be custom properties; they are fixed by convention:
     --bp-sm  30em  (480px)  body hyphenation off above this
     --bp-md  48em  (768px)  body size step, multi-column layouts
     --bp-nav 60em  (960px)  full desktop nav
   ========================================================================== */

:root {
  /* ---- Color: locked palette ---- */
  --navy:  #1c3742;
  --teal:  #009692;
  --gold:  #f9b800;
  --white: #ffffff;

  /* ---- Color: approved derived tints (§2.1) ---- */
  --tint-teal:  #edf8f7; /* 7% teal on white — alternating section bg */
  --navy-muted: #4e636c; /* 78% navy on white — secondary text, captions */

  /* Navy at low alpha — hairlines only, never text */
  --rule:        rgb(28 55 66 / 0.15); /* section / row rules */
  --rule-header: rgb(28 55 66 / 0.12); /* header bottom border */

  /* ---- Color: roles ----
     Teal = graphics + text ≥ 24px regular / 18.66px bold only (3.63:1).
     Gold = inside navy areas only (7.1:1); never text on white (1.77:1). */
  --color-bg:        var(--white);
  --color-bg-alt:    var(--tint-teal);
  --color-text:      var(--navy);
  --color-text-soft: var(--navy-muted);
  --color-link-line: var(--teal);
  --color-focus:     var(--navy);

  /* ---- Type: families (§1.1) ---- */
  --font-display: "Archivo", Arial, sans-serif;
  --font-body:    "Public Sans", Arial, sans-serif;

  /* Archivo width axis, via font-stretch (maps to wdth) */
  --stretch-heading: 87.5%;
  --stretch-ui:      100%;

  /* ---- Type: scale (§1.4) ---- */
  --fs-h1:    clamp(2.125rem, 1.4rem + 3vw, 4rem);          /* floor 34px: fits "representatividad" at 320px */
  --fs-h2:    clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  --fs-h3:    clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-lede:  clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --fs-body:  1.0625rem;                                     /* → 1.125rem ≥ 768px, see base.css */
  --fs-small: 0.9375rem;
  --fs-ui:    1rem;

  --lh-h1:   1.15; /* floor ≥ 1.12: accent (0.874em) + descender (0.192em) = 1.066em */
  --lh-h2:   1.12;
  --lh-h3:   1.2;
  --lh-lede: 1.5;
  --lh-body: 1.6;
  --lh-small: 1.5;
  --lh-ui:   1.2;

  --fw-body:     400;
  --fw-strong:   600;
  --fw-ui:       550;
  --fw-button:   600;
  --fw-h3:       650;
  --fw-heading:  700;

  /* Measure: ch = width of "0" (11.02px @18px) > avg Spanish char (8.66px) */
  --measure:      58ch; /* ≈ 74 Spanish characters */
  --measure-lede: 48ch;

  /* ---- Spacing: 4px base ---- */
  --space-1:  0.25rem; /*   4px */
  --space-2:  0.5rem;  /*   8px */
  --space-3:  0.75rem; /*  12px */
  --space-4:  1rem;    /*  16px */
  --space-5:  1.5rem;  /*  24px */
  --space-6:  2rem;    /*  32px */
  --space-7:  3rem;    /*  48px */
  --space-8:  4rem;    /*  64px */
  --space-9:  6rem;    /*  96px */
  --space-10: 8rem;    /* 128px */

  /* ---- Layout (§3.2) ---- */
  --container:   1200px;
  --gutter:      clamp(16px, 4vw, 48px);
  --col-gap:     var(--space-5);
  --section-pad: clamp(64px, 8vw, 128px);

  /* ---- Chrome (§5) ---- */
  --header-h:      68px;
  --header-logo-h: 48px;
  /* Rendered header height (min-height + 1px bottom border). Follows --header-h
     at the 60em switch below. Use it for any offset under the sticky header. */
  --header-offset: calc(var(--header-h) + 1px);

  /* ---- Components ---- */
  --radius:        4px;
  --tap-min:       44px;
  --button-min-h:  48px;
  --link-line:     2px;
  --link-line-hover: 3px;
  --focus-width:   3px;
  --focus-offset:  3px;

  /* ---- Motion (§6) ---- */
  --dur-state: 120ms; /* ordinary hover/state changes — not a "moment" */
  --dur-menu:  180ms; /* 6.1 Menú */
  --dur-marco: 200ms; /* 6.2 Marco activo */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (min-width: 48em) {
  :root {
    --fs-body: 1.125rem;
  }
}

@media (min-width: 60em) {
  :root {
    --header-h:      88px;
    --header-logo-h: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-state: 0ms;
    --dur-menu:  0ms;
    --dur-marco: 0ms;
  }
}