/* hundred — design tokens (brand board: hundred — brand concept) */

/*
  FONTS — Helvetica Now Display Bold + Helvetica Now Text are the brand faces, but
  they are a licensed Monotype family and a desktop license does not cover serving
  the files from a public site. They are deliberately NOT deployed here; the stacks
  below fall back to Helvetica Neue / Helvetica / Arial, which is the same lineage
  and renders near-identically on Apple devices.

  To switch the real faces on once webfont licensing is confirmed:
    1. copy the .otf files into assets/fonts/
    2. restore the @font-face blocks (see git history / ~/casa-template/css/tokens.css)
*/



:root {
  /* color */
  --ink: #141513;
  --paper: #fcfcfa;
  --off-white: #f6f6f2;
  --cream: #f2f3ef;
  --muted: #6f746e; /* brand grey */
  --line: #e4e6e1; /* brand hairline */
  --olive: #111210; /* dark ground (name kept for continuity) */
  --olive-text: #989e97; /* grey on dark ground */
  --dark: #0c0d0b;
  --chip-gold: #eceee8;
  --chip-gold-ink: #141513;
  --chip-peach: #eceee8;
  --chip-peach-ink: #6f746e;
  --chip-lemon: #eceee8;
  --chip-lemon-ink: #6f746e;
  --glass: rgba(255, 255, 255, 0.2);
  --green: #00a857; /* brand accent: touches numbers and nothing else */
  --green-screen: #00ff84; /* the same green, cut for dark grounds */

  /* type */
  --font-display: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans: "Helvetica Now Text", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* radius */
  --r-card: 40px;
  --r-card-sm: 24px;
  --r-tile: 16px;
  --r-pill: 999px;

  /* space */
  --space-section: 120px;
  --space-statement: 200px;
  --container-max: 1224px;
  --gutter: 24px;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur-med: 500ms;

  /* elevation */
  --shadow-card: 0 2px 6px rgba(24, 24, 20, 0.06), 0 12px 32px rgba(24, 24, 20, 0.1);
  --shadow-soft: 0 1px 3px rgba(24, 24, 20, 0.05), 0 8px 24px rgba(24, 24, 20, 0.07);
}

@media (min-width: 768px) {
  :root {
    --gutter: 40px;
  }
}