/* PLUMB PERFECT PLUMBING - tokens.css
   The only file that changes the look. Everything else consumes these.
   Colors are the client's own three inks plus two derived values for
   contrast. Hex is authoritative here; do not convert by eye. */

@layer tokens {
  :root {
    /* Inks */
    --navy:      #112131;
    --red:       #EC252C;   /* accent. Large text and fills only on navy */
    --red-ink:   #C4171E;   /* small red text on white or steel. 6.0:1 */
    --steel:     #E6E7E8;
    --white:     #FFFFFF;
    --ink-muted: #4A5561;   /* secondary text on white and steel */
    --steel-muted: color-mix(in oklch, var(--steel) 70%, var(--navy));
    --line-on-navy: color-mix(in oklch, var(--steel) 22%, transparent);
    --line-on-white: color-mix(in oklch, var(--navy) 18%, transparent);

    /* Type */
    --font-display: "Halcom", "Archivo", "Archivo Fallback", "Arial Narrow", Arial, sans-serif;
    --font-body:    "Halcom", "Archivo", "Archivo Fallback", Arial, sans-serif;
    --w-display: 800;
    --w-body: 500;
    --stretch-display: 105%;

    --t-1: 15px;
    --t-2: 17px;
    --t-3: 19px;
    --t-4: 22px;
    --t-5: 28px;
    --t-6: 36px;
    --t-h2: clamp(30px, 4.6vw, 56px);
    --t-h1: clamp(40px, 6.4vw, 84px);
    --t-num: clamp(28px, 4vw, 44px);

    --lh-tight: .98;
    --lh-body: 1.55;
    --measure: 62ch;

    /* Space */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
    --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
    --gutter: clamp(20px, 4vw, 48px);
    --section: clamp(48px, 7vw, 96px);

    /* Containers. Everything sits on the center line. */
    --wide: 1120px;
    --mid: 880px;
    --narrow: 720px;

    /* The plumb line and the bob */
    --line-w: 3px;
    --pend-h: clamp(150px, 22vw, 230px);   /* string plus bob, from the header down */
    --bob-h: clamp(64px, 8vw, 96px);

    /* Edges. Zero. The vial is drawn round in SVG, not here. */
    --radius: 0;

    /* Motion. Never the default ease. */
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in:  cubic-bezier(.55, 0, 1, .45);
    --spring:   cubic-bezier(.34, 1.4, .64, 1);
    --t-micro: 90ms;
    --t-std:   220ms;
    --t-open:  200ms;
    --t-close: 150ms;

    /* Chrome */
    --header-h: 72px;
    --callbar-h: 60px;
    --nav-break: 900px;
  }
}