/* tokens.css — every color, font, and spacing decision for the Backbone
   Construction site lives here. Restyling the whole site = editing this file.
   The layout file (site.css) only ever refers to these names.

   The look comes from JD's logo: black background, chrome and silver artwork.
   Chrome is the one accent. There is no other color on the site. */

:root {
  /* Colors */
  --iron:      #0A0A0A;   /* page background: black iron */
  --plate:     #141414;   /* bands and cards: a steel plate one step up */
  --plate-2:   #1A1A1A;   /* icon tiles, hover fills */
  --ink:       #F2F2F2;   /* body text */
  --muted:     #A9ADB3;   /* captions, secondary text (AA on iron and plate) */
  --line:      rgba(255, 255, 255, 0.10);   /* hairline borders */
  --line-strong: rgba(255, 255, 255, 0.22); /* outlined buttons, field borders */

  /* Chrome: the logo's brushed-metal gradient, light on top, dark below. */
  --chrome-hi:  #FFFFFF;
  --chrome-mid: #B9BDC3;
  --chrome-lo:  #6E7278;
  --chrome: linear-gradient(180deg, var(--chrome-hi) 0%, var(--chrome-mid) 55%, var(--chrome-lo) 100%);
  --chrome-solid: #C4C8CD;  /* flat silver for thin lines, checks, icons */
  --on-chrome: #0A0A0A;     /* text that sits ON a chrome fill */

  --good: #7FDCA4;   /* form success (later) */
  --bad:  #FF7B70;   /* form errors (later) */

  /* Type */
  --font-display: "Cinzel", "Times New Roman", Georgia, serif;             /* engraved caps, like BACKBONE on the logo */
  --font-condensed: "Barlow Condensed", "Arial Narrow", Impact, sans-serif; /* eyebrows, buttons, menu */
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --size-1: clamp(2.1rem, 6.5vw, 4.4rem);   /* hero headline */
  --size-2: clamp(1.6rem, 3.6vw, 2.5rem);   /* section headline */
  --size-3: 1.35rem;                        /* card title */
  --size-body: 1.0625rem;                   /* 17px body */
  --size-small: 0.9rem;
  --size-eyebrow: 0.95rem;
  --leading-body: 1.6;
  --measure: 62ch;                          /* max line length for prose */

  /* Spacing */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6.5rem;
  --gutter: 1rem;                            /* side padding on phones */
  --gutter-wide: 3rem;                       /* side padding on desktop */
  --content-max: 1180px;

  /* Shapes */
  --radius: 6px;                             /* one radius for cards and fields */
  --radius-small: 3px;                       /* buttons, tiles, numbers */
  --rail-gap: 5px;                           /* the gap between the twin rails */
  --call-bar-height: 60px;                   /* the sticky phone call bar */
  --logo-hero-max: 520px;                    /* the logo's width in the hero */
  --logo-header: 64px;                       /* the logo's height in the header */
}