/* ==========================================================================
   ROB ON THE JOB — DESIGN TOKENS
   The one place for color, type and spacing.

   Identity in one line: creating space. Opposing corners give structure,
   modular squares stand for clutter removed and order restored, and the
   room left between them is the point. Be generous with it.

   Color system: forest green, warm ivory, sage. Everything else on this
   page is a tint or shade of those three.
   ========================================================================== */

:root {
  /* Brand (exact values from the identity sheet) */
  --forest: #293B32;
  --ivory: #F1EEE6;
  --sage: #B3C6A4;

  /* Tints + shades of the brand colors */
  --forest-deep: #1F2D26;
  --forest-lift: #34493E;
  --forest-haze: #3F564A;
  --ivory-soft: #F8F6F0;
  --ivory-deep: #E5E1D5;
  --sage-soft: #D2DDC8;
  --moss: #54695A;            /* quiet text on ivory (5:1) */
  --mist: #C3CEBD;            /* quiet text on forest (7:1) */

  /* Type: Archivo, the same family as the wordmark's voice, set light and
     wide. The heavy cut belongs to the logo alone. */
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --wide: 122%;
  --semi-wide: 112%;

  /* Layout */
  --gutter: clamp(1.25rem, 4.4vw, 4.5rem);
  --gap: clamp(1rem, 1.8vw, 1.75rem);
  --section: clamp(5rem, 11vw, 11rem);
  --notch: clamp(3rem, 8.333vw, 9rem);   /* one column: the unit of negative space */
  --max: 1560px;

  /* Motion: slow, settled, no bounce */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --fast: .25s;
  --slow: .8s;
}

/* Surfaces. Put one on any section; everything inside inherits its colors.
   Texture comes from small tiles: grain on the darks, paper on the ivories. */
.s-forest, .s-deep {
  --bg: var(--forest);
  --ink: var(--ivory);
  --muted: var(--mist);
  --line: rgba(241, 238, 230, .2);
  --accent: var(--sage);
  --mark-accent: var(--sage);
  --plan-accent: var(--sage);
  --tint: var(--forest-lift);
  --panel: var(--forest-lift);
  background: var(--forest) url("/assets/img/grain-light.png");
  color: var(--ink);
}
.s-deep {
  --bg: var(--forest-deep);
  --tint: var(--forest);
  --panel: var(--forest);
  background-color: var(--forest-deep);
}
.s-ivory {
  --bg: var(--ivory);
  --ink: var(--forest);
  --muted: var(--moss);
  --line: rgba(41, 59, 50, .18);
  --accent: var(--forest);
  --mark-accent: var(--sage);
  --plan-accent: var(--sage);
  --tint: var(--ivory-deep);
  --panel: var(--ivory-soft);
  background: var(--ivory) url("/assets/img/paper.png");
  color: var(--ink);
}
.s-soft {
  --bg: var(--ivory-soft);
  --ink: var(--forest);
  --muted: var(--moss);
  --line: rgba(41, 59, 50, .16);
  --accent: var(--forest);
  --mark-accent: var(--sage);
  --plan-accent: var(--sage);
  --tint: var(--ivory-deep);
  --panel: #FFFEFB;
  background: var(--ivory-soft) url("/assets/img/paper.png");
  color: var(--ink);
}
.s-sage {
  --bg: var(--sage);
  --ink: var(--forest);
  --muted: #3A4E42;
  --line: rgba(41, 59, 50, .28);
  --accent: var(--forest);
  --mark-accent: var(--forest);
  --plan-accent: var(--forest);
  --tint: var(--sage-soft);
  --panel: var(--sage-soft);
  background: var(--sage) url("/assets/img/grain-dark.png");
  color: var(--ink);
}