/* ==========================================================================
   Design tokens — George Tudor Painting Services
   Direction: clean & bright minimal, deep pine-teal accent, paint-chip motif.
   Change a value here and it changes everywhere. Do not hard-code colour
   or type values anywhere else in the CSS.
   ========================================================================== */

:root {
  /* This site is deliberately light-only — there is no dark theme, and the
     palette below is the whole palette. Declaring color-scheme says so out
     loud: it keeps native form controls, scrollbars and the <select> dropdown
     light and consistent, and it opts the page out of the algorithmic
     "force dark" some mobile browsers apply to pages that don't declare one.
     If a dark theme is ever added, this becomes `light dark` and every token
     below needs a counterpart. */
  color-scheme: light;

  /* --- Paint-chip scale: the brand accent, five steps ------------------- */
  --pine-900: #0B3B35;
  --pine-700: #12564D;   /* primary accent */
  --pine-500: #2E8375;
  --pine-300: #7FB8AD;
  --pine-100: #C3DCD6;
  --pine-050: #E3EEEB;

  /* --- Neutrals: biased very slightly green so they sit with the accent -- */
  --ink:      #131D1B;
  --ink-2:    #3D4B48;
  --muted:    #667773;
  --line:     #D8E0DD;
  --line-2:   #E6ECEA;
  --ground:   #F4F6F5;
  --paper:    #FFFFFF;

  /* --- Support ---------------------------------------------------------- */
  --sand:     #EFE9DE;   /* warm break tone for alternating bands */
  --focus:    #2E8375;

  /* --- Semantic aliases: use THESE in component CSS --------------------- */
  --c-bg:            var(--ground);
  --c-surface:       var(--paper);
  --c-surface-alt:   var(--sand);
  --c-text:          var(--ink);
  --c-text-soft:     var(--ink-2);
  --c-text-mute:     var(--muted);
  --c-accent:        var(--pine-700);
  --c-accent-hover:  var(--pine-900);
  --c-accent-wash:   var(--pine-050);
  --c-on-accent:     #FFFFFF;
  --c-rule:          var(--line);
  --c-rule-soft:     var(--line-2);

  /* --- Type ------------------------------------------------------------- */
  /* Archivo for display, Inter for body — matches the reference site the
     client supplied (vintantile.com). Both are workhorse grotesques chosen
     for legibility rather than character. */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.90rem);
  --step-0:  clamp(1.0625rem, 1.02rem + 0.20vw, 1.15rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.42rem);
  --step-2:  clamp(1.44rem, 1.29rem + 0.75vw, 1.85rem);
  --step-3:  clamp(1.73rem, 1.47rem + 1.30vw, 2.40rem);
  --step-4:  clamp(2.07rem, 1.65rem + 2.10vw, 3.13rem);
  --step-5:  clamp(2.49rem, 1.82rem + 3.35vw, 4.07rem);

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-body:  1.65;
  --measure:  65ch;

  /* --- Space: 4px base -------------------------------------------------- */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;

  /* --- Layout ----------------------------------------------------------- */
  --wrap:      1180px;
  --wrap-text: 760px;
  --gutter:    clamp(1.25rem, 5vw, 2.5rem);

  /* --- Detail ----------------------------------------------------------- */
  --radius:    4px;
  --radius-lg: 8px;
  --shadow-1:  0 1px 2px rgba(19,29,27,.05), 0 8px 28px -18px rgba(19,29,27,.35);
  --shadow-2:  0 2px 6px rgba(19,29,27,.07), 0 20px 48px -24px rgba(19,29,27,.4);
  --ease:      cubic-bezier(.2,.6,.3,1);
  /* Slight overshoot at the end of the curve — this is the "bloop". */
  --ease-pop:  cubic-bezier(.34,1.56,.64,1);
}