/* ============================================================
   PhilsMill — MASTER CONTROL BLOCK
   Change any value here, once, and it updates everywhere.
   ============================================================ */
:root{
  color-scheme:light;

  /* --- COLOURS --- */
  --c-ink:#0E1116;
  --c-steel:#4A5464;
  --c-mist:#AEB6C2;
  --c-paper:#EDEFF2;
  --c-sheet:#F7F8FA;
  --c-edge:#D3D8DF;
  --c-cut:#1B6FD4;
  --c-cut-dark:#155BB0;
  --c-white:#FFFFFF;
  --c-footer-bg:#0E1116;
  --c-footer-ink:#AEB6C2;
  --c-line:rgba(27,111,212,.35);
  --c-scrim:rgba(14,17,22,.94);
  --c-veil:rgba(14,17,22,.86);
  --c-header:rgba(247,248,250,.92);
  --c-margin:#E4E7EB;          /* space outside the page box on wide screens */
  /* messaging app brand colours */
  --c-wa:#25D366;              /* WhatsApp green */
  --c-viber:#7360F2;           /* Viber purple */
  --c-signal:#3A76F0;          /* Signal blue */

  --c-error:#C0392B;           /* invalid form field */
  --c-error-bg:#FFF6F5;
  --c-ok:#4E9C4E;              /* "NEWEST" build badge */

  /* translucent layers — derived, so one ink/accent change updates all */
  --a-ink-55:rgba(14,17,22,.55);
  --a-cut-10:rgba(27,111,212,.10);
  --a-cut-18:rgba(27,111,212,.18);
  --a-cut-20:rgba(27,111,212,.20);
  --a-cut-45:rgba(27,111,212,.45);
  --a-cut-50:rgba(27,111,212,.50);
  --a-white-04:rgba(255,255,255,.04);
  --a-white-25:rgba(255,255,255,.25);
  --a-white-45:rgba(255,255,255,.45);
  --a-white-80:rgba(255,255,255,.80);
  --shadow-menu:0 10px 30px rgba(14,17,22,.14);
  --shadow-nav:0 2px 12px rgba(0,0,0,.6);

  /* ---- BREAKPOINTS ----------------------------------------
     CSS cannot use a custom property inside @media, so these are
     documented here and hardcoded once each in main.css.
     Change one -> update the matching @media block.
        420px  strapline drops
        520px  burger label drops, slideshow dots hide
        620px  gallery 2 -> 3 columns
        760px  wide-screen page box begins
        860px  card grids collapse to one column
        900px  hero stacks
        980px  gallery 3 -> 4 columns
     -------------------------------------------------------- */

  /* --- LAYOUT (single source) --- */
  --max-width:1180px;          /* content cap on desktop */
  --pad:12px;                  /* side margin, all content (Orijent parity) */
  /* wide-screen breakpoint is 900px — CSS cannot use a var in @media,
     so if you change it, change the two @media rules in main.css too */
  --pagebox-color:var(--c-edge);
  --pagebox-width:1px;
  --footnav-cols:4;            /* footer pill columns on desktop */
  --gallery-w:100%;
  --gal-gap:10px;
  --tap-min:44px;              /* minimum touch target, applied site-wide */
  --dot-size:7px;              /* slideshow indicator dot */              /* minimum touch target, applied site-wide */
  --narrow-w:620px;            /* single-column blocks e.g. shop-data table */
  --term-min:300px;            /* terms card min column width */
  --mach-min:260px;
  --mach-shot-ratio:4/3;       /* machine photo frame */            /* machine card min column width */
  --ds-ratio:3/4;              /* design slideshow frame — portrait, most parts are tall */
  --des-fig-max:420px;         /* in-house product shot on narrow screens */            /* single-column blocks e.g. shop-data table */              /* masonry column + row gap */

  /* --- HEADER --- */
  --header-h:64px;
  --logo-size:19px;
  --logo-sub:9px;              /* strapline under the wordmark — decorative,
                                  hidden below 420px, not body copy */

  /* --- HERO CTA PAIR --- */
  --cta-max:440px;             /* cap on wide screens; full width below it */
  --cta-h:48px;                /* equal tap target for both buttons */

  /* --- TYPE --- */
  --f-display:'Archivo',system-ui,-apple-system,sans-serif;
  --f-body:'Archivo',system-ui,-apple-system,sans-serif;
  --f-mono:'Spline Sans Mono',ui-monospace,monospace;
  --fs-meta:12px;              /* build stamp — technical metadata */
  --fs-2xs:12px;  --fs-xs:12px;   /* 12px is the readable floor */  --fs-sm:13px;  --fs-base:15px;  --fs-md:16px;  --fs-lg:19px;
  --fs-xl:clamp(26px,3.2vw,34px);
  --fs-hero:clamp(38px,5.4vw,66px);
  --fw-normal:400; --fw-mid:600; --fw-bold:800;
  --lh-tight:1.02; --lh-snug:1.25; --lh-body:1.6;
  --ls-tight:-.035em; --ls-snug:-.02em; --ls-mono:.14em;

  /* --- SPACE --- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:22px;
  --sp-6:28px; --sp-7:40px; --sp-8:56px; --sp-9:76px;

  /* --- LANGUAGE / CURRENCY CONTROL --- */
  --pref-radius:4px;
  --pref-w:230px;

  /* --- TALLY (countable figures: sites, people) --- */
  --tally-glyph:22px;          /* one countable mark */
  --tally-gap:7px;             /* space between marks */
  --tally-num:clamp(30px,7.5vw,46px);   /* the dimension figure */
  --tally-row-gap:var(--sp-5); /* between the two tally rows */
  --dim-cap:9px;               /* extension-line cap height */
  --tally-stagger:45ms;        /* delay between marks appearing */
  --tally-rise:7px;            /* how far a mark travels in */
  --tally-dur:420ms;           /* one mark's reveal */
  --tally-count-dur:900ms;     /* figure roll-up */

  /* --- CARD ICONS --- */
  --icon-size:30px;

  /* --- CHIPS (spec strip) --- */
  --chip-pad-y:6px;
  --chip-pad-x:11px;
  --chip-radius:20px;

  /* --- PILLS (footer nav) --- */
  --pill-pad-y:11px;          /* 44px min tap target */
  --pill-pad-x:14px;
  --pill-radius:20px;

  /* --- FOOTER BUTTONS --- */
  --fbtn-h:44px;              /* 44px min tap target */
  --fbtn-radius:7px;

  /* --- PREV/NEXT BOXES --- */
  --next-radius:8px;
  --next-pad-y:12px;
  --next-pad-x:16px;
  --navarr-size:20px;
  --navarr-stroke:2;
  --navarr-gap:10px;

  /* --- FOOTER META --- */
  --rights-mt:4px;
  --ver-mt:10px;

  /* --- HERO REVEAL (per-line values are set by app.js at runtime) --- */
  --cut-delay:0s;              /* stagger per headline line */
  --cut-span:100%;             /* distance the tool line travels */
  --cut-spark:1s;              /* when the accent word registers */

  /* --- MISC --- */
  --hair:1px;
  --radius:0;
  --t-fast:.15s; --t-med:.2s; --t-slow:.4s; --ease:ease;
  --z-hdr:50; --z-lb:100;
}