/* ============================================================
   Relay 2.0 — Whiteboard layer
   The brand identity is a warm, hand-drawn whiteboard: a clean
   cream board, marker headlines, sketchy ink boxes, and colored
   post-it notes. Brand/creative surfaces opt into `.relay-board`
   and the sketch utilities; product/application UI stays on the
   disciplined white-surface, color=signal rules (see CLAUDE.md).
   ============================================================ */

:root {
  /* ---- Board surfaces ---- */
  --board-paper:   #fdf8ee;   /* the whiteboard cream (brightened) */
  --board-paper-2: #fffdf6;   /* card / sticky white */
  --board-dot:     #e6dcc7;   /* dot-grid mark */
  --board-line:    #e9e0cd;   /* ruled-line mark */
  --marker-ink:    #241f1a;   /* warm near-black marker */

  /* ---- Post-it palette (creative fills) ---- */
  --note-yellow:   #ffd84d;  --note-yellow-2: #ffe89a;
  --note-coral:    #ffb0a3;  --note-coral-2:  #ffd0c8;
  --note-mint:     #bfe6c9;  --note-mint-2:   #d9f0df;
  --note-sky:      #a9d4f0;  --note-sky-2:    #cfe8f7;
  --note-lav:      #d9c4ec;  --note-lav-2:    #e9ddf4;
  --note-white:    #fffdf6;

  /* ---- Marker stroke accents (scribbles, arrows, underlines) ---- */
  --marker-terra:  #e0603a;
  --marker-moss:   #2f7d55;
  --marker-sky:    #2f83b8;
  --marker-plum:   #8a4f6d;
  --marker-gold:   #d99a2f;

  /* ---- Chalkboard (the dark board option) ---- */
  --chalk-board:   #26332b;   /* deep green slate */
  --chalk-board-2: #202b25;
  --chalk-frame:   #6b4f34;   /* wood frame */
  --chalk-ink:     #f2efe4;   /* chalk white */
  --chalk-line:    rgba(242,239,228,.13);
  --chalk-yellow:  #f2e06a;
  --chalk-pink:    #f0a6c2;
  --chalk-blue:    #9fd0f0;
  --chalk-green:   #a9e0b0;
  --chalk-coral:   #f2a07a;

  /* ---- Sketch geometry ---- */
  --sketch-w:       2.5px;                                       /* @kind other */
  --radius-rough:   16px 10px 18px 12px/12px 18px 10px 16px;     /* @kind other */
  --radius-rough-2: 12px 18px 10px 16px/16px 10px 18px 12px;     /* @kind other */
  --radius-rough-3: 14px 12px 16px 10px/10px 16px 12px 14px;     /* @kind other */

  /* ---- Sketch shadows ---- */
  --shadow-sketch:    3px 3px 0 var(--marker-ink);              /* @kind shadow */
  --shadow-sketch-lg: 5px 5px 0 var(--marker-ink);             /* @kind shadow */
  --shadow-note:      4px 7px 16px -5px rgba(40,30,10,.42);     /* @kind shadow */
  --shadow-note-sm:   2px 4px 10px -4px rgba(40,30,10,.40);     /* @kind shadow */

  /* ---- Repoint the page surface to the board ---- */
  --surface-page: var(--board-paper);
}

/* Clean whiteboard surface — the signature brand backdrop. Dots are opt-in. */
.relay-board { background-color: var(--board-paper); }
.relay-board--dots {
  background-image: radial-gradient(var(--board-dot) 1.3px, transparent 1.3px);
  background-size: 26px 26px;
}
.relay-board--lines {
  background-image: linear-gradient(var(--board-line) 1px, transparent 1px);
  background-size: 100% 30px;
}
.relay-board--blank { background-image: none; }

/* Hand-drawn ink box (two wobble variants so repeats don't look identical). */
.relay-rough   { border: var(--sketch-w) solid var(--marker-ink); border-radius: var(--radius-rough); }
.relay-rough-2 { border: var(--sketch-w) solid var(--marker-ink); border-radius: var(--radius-rough-2); }

/* Marker headline + handwriting helpers. */
.relay-marker { font-family: var(--font-marker); font-weight: 700; letter-spacing: -0.01em; color: var(--marker-ink); }
.relay-hand   { font-family: var(--font-hand); }

/* A strip of masking tape. */
.relay-tape {
  display: inline-block; background: rgba(255,255,255,.55);
  border: 1px dashed rgba(40,30,20,.32); padding: 4px 14px;
}