/*
  Design tokens. This is the one file to restyle for each client.
  Pull colors from the client's real logo, sign, trucks or shop, not from a trend.
  Check text contrast after changing them (4.5:1 for body text, 3:1 for large text).

  G-Race, custom plan (from tier-1500, Oct 30, 2026). The palette comes from the land: warm paper, near-black
  ink, pine, one deep clay accent that sits next to the logo's clay plate. The headline face follows the logo
  ("Bench cut"): heavy, condensed capitals with a cut-steel feel. Premium here is restraint: few colors, one
  radius, space instead of boxes.
*/

:root {
  /* Surfaces */
  --color-paper: #f5f2ec;        /* page */
  --color-white: #ffffff;        /* form card */
  --color-sand: #e7decf;         /* the one quiet alternate background */

  /* Text and dark surfaces */
  --color-ink: #1d211e;          /* text and primary buttons. 14.6:1 on paper, white on it 16.3:1 */
  --color-muted: #5c605a;        /* secondary text. 5.7:1 on paper, 4.8:1 on sand */
  --color-pine: #24332b;         /* footer. Paper on it 11.9:1 */

  /* The single accent */
  --color-clay: #8a3a20;         /* text links, small rules, active states. 6.9:1 on paper, 7.8:1 on white */

  /* Lines */
  --color-line: #d9d1c4;         /* hairlines only */
  --color-field-line: #8e918b;   /* form field and checkbox borders. 3.2:1 on white */

  --color-on-dark: #f5f2ec;
  --color-on-dark-muted: #c9cfc8;

  /* Feedback */
  --color-error: #b42318;
  --color-success: #1a7f37;

  /* Type. Big Shoulders Display 800 for headlines, set tight: it shares the logo's heavy, condensed build.
     Public Sans for reading and UI. Two families, four weights. Load them in src/theme.mjs. */
  --font-display: "Big Shoulders Display", "League Gothic", Impact, "Arial Narrow", sans-serif;
  --font-body: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --body-size: 1.125rem;

  /* Shape and space. One radius for buttons, inputs and the form card; photos are square-cornered. */
  --radius: 4px;
  --wrap: 78rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-space: clamp(4.5rem, 11vw, 8rem); /* at least 72px on phones, 128px on desktop */
  --header-height: 80px;

  /* Texture: fine paper grain laid over the flat colors (see Texture in main.css). */
  --grain: url("/img/grain.svg");

  /* Motion: felt, not seen. One curve, no overshoot. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal: 600ms;

  /* Only the template's video hero uses this. */
  --hero-scrim: linear-gradient(to top, rgb(29 33 30 / 0.85) 0%, rgb(29 33 30 / 0.35) 50%, rgb(29 33 30 / 0.45) 100%);
}