/* Design tokens for STAR Prints by CHA Prints.
 *
 * 🔴 THE ONLY FILE IN THE SITE WITH A HEX COLOR IN IT. Everything else says
 *    var(--navy). checks/check-1a.sh fails the build if a hex appears in any
 *    other stylesheet, because a second copy of a brand color is a color that
 *    drifts.
 *
 * Values come from the design brief, which measured them off the business card.
 * Selectors here are :root and the two media queries below. Nothing else.
 */

:root {
  /* ---- brand, measured from the card ---------------------------------- */
  --midnight: #000101;   /* header bar, top of the stage gradient */
  --navy: #162639;       /* text on white, the main button on white */
  --dusk: #2C4B71;       /* bottom of the gradient, secondary text on white */
  --sky: #82D5F4;        /* accent ON DARK ONLY -- 1.64:1 on white, never text there */
  --white: #FFFFFF;      /* the page */
  --blue: #60A5FA;       /* the logo underline, and nothing else */

  /* ---- derived, each doing a job the card's colors cannot -------------- */
  --ink: #167498;        /* links on white (5.27:1), "PRINTS" in the light logo */
  --mist: #F3F7FB;       /* alternate section, selected-option fill */
  --steel: #768AA3;      /* borders on controls (3.54:1) */
  --hairline: #D9DFE5;   /* decorative dividers only */
  --haze: #C5D3E3;       /* secondary text on dark (5.87:1 on Dusk) */
  --grade-good: #1E7B34;
  --grade-fair: #8F5500;
  --grade-poor: #C0182B;

  /* ---- the monochrome scene (drawn products; used from Slice 1b) ------- */
  --scene-ground: #0B141D;
  --scene-object: #4C6686;

  /* ---- the stage ------------------------------------------------------- */
  --stage: linear-gradient(180deg, #000101 0%, #162639 50%, #2C4B71 100%);

  /* ---- type ------------------------------------------------------------ */
  --font-display: "League Spartan", sans-serif;   /* 700 only */
  --font-body: "Overpass", sans-serif;

  /* Fluid sizes: the phone value at a 375px viewport, the desktop value from
     1120px up, straight-line in between. Each intercept is the desktop-to-phone
     slope solved at 375px, so the phone number is exact and not nearly right. */
  --size-display: clamp(44px, 29.906px + 3.7584vw, 72px);      /* 44 -> 72 */
  --line-display: 1;
  --size-h2: clamp(32px, 23.946125px + 2.1477vw, 48px);        /* 32 -> 48 */
  --line-h2: 1.05;
  --size-h3: clamp(24px, 21.986625px + 0.5369vw, 28px);        /* 24 -> 28 */
  --line-h3: 1.15;
  --size-lede: clamp(19px, 17.993125px + 0.2685vw, 21px);      /* 19 -> 21 */
  --line-lede: 1.45;
  --size-body: 17px;
  --line-body: 1.55;
  --size-small: 14px;
  --line-small: 1.4;
  --size-price: clamp(32px, 27.97325px + 1.0738vw, 40px);      /* 32 -> 40 */
  --line-price: 1.1;

  --measure: 64ch;       /* longest a paragraph may get */

  /* ---- shape ----------------------------------------------------------- */
  --radius-stage: 24px;
  --radius-row: 12px;
  --radius-button: 10px;

  /* ---- space: an 8px grid --------------------------------------------- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --section-gap: 128px;
  --content-max: 1120px;

  /* ---- motion: three moments, nothing else ---------------------------- */
  --dur-resize: 320ms;   /* the product resizes when a size is picked */
  --dur-price: 160ms;    /* the price crossfades when it updates */
  --dur-reveal: 500ms;   /* home page only: a stage fades up once */
  --reveal-distance: 16px;

  /* ---- focus ----------------------------------------------------------- */
  --focus-width: 3px;
}

@media (max-width: 767px) {
  :root {
    --radius-stage: 16px;
    --section-gap: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-resize: 0ms;
    --dur-price: 0ms;
    --dur-reveal: 0ms;
    --reveal-distance: 0px;
  }
}