/* ============================================================
   ClipGrid design tokens · V1.0
   Two rooms, one grammar: Suite (dark, default) / Daylight.
   Roles never change between modes — only values do.
   ============================================================ */

:root {
  /* faces */
  --cg-font-display: "Panchang", "Arial Narrow", sans-serif;   /* headlines, ≤ 8 words */
  --cg-font-body: "Supreme", "Segoe UI", sans-serif;           /* everything that reads */
  --cg-font-mono: "Spline Sans Mono", "Consolas", monospace;   /* everything that measures */

  /* motion — frames at 24 fps, one easing */
  --cg-d-3f: 125ms;   /* hovers, toggles, chips */
  --cg-d-5f: 208ms;   /* cards, panels, reveals */
  --cg-d-8f: 333ms;   /* scene changes. The ceiling. */
  --cg-ease-cut: cubic-bezier(0.2, 0.9, 0.25, 1);

  /* space — cells, 1 cell = 8px, whole cells only */
  --cg-cell: 8px;

  /* radii — chips and panels; a third radius is a bug */
  --cg-r-chip: 4px;
  --cg-r-panel: 10px;
}

/* ---------- Suite (default) ---------- */
[data-mode="suite"] {
  --cg-bg: #0C1114;         /* Suite 900 */
  --cg-bg-raised: #141B20;  /* Suite 800 */
  --cg-bg-inset: #1C262D;   /* Suite 700 */
  --cg-line: #26333B;
  --cg-line-strong: #37474F;
  --cg-text: #E8F0F3;
  --cg-text-muted: #93A8B1; /* Suite 300 */
  --cg-text-faint: #5F757F;

  --cg-sky: #8FD9F2;        /* the note — links, focus, markers */
  --cg-sky-strong: #4FC3EC;
  --cg-sky-ink: #8FD9F2;    /* sky used as text, contrast-safe */
  --cg-tally: #FF5A47;      /* changes requested, destructive */
  --cg-lock: #63D99C;       /* picture lock, approvals only */
}

/* ---------- Daylight ---------- */
[data-mode="daylight"] {
  --cg-bg: #EFF4F5;         /* Suite 050 */
  --cg-bg-raised: #FFFFFF;
  --cg-bg-inset: #E2EAEC;
  --cg-line: #D2DEE1;
  --cg-line-strong: #B7C8CD;
  --cg-text: #13232B;
  --cg-text-muted: #52707C;
  --cg-text-faint: #7E969F;

  --cg-sky: #8FD9F2;        /* the marker itself never changes hue */
  --cg-sky-strong: #0A6E92;
  --cg-sky-ink: #085E7E;
  --cg-tally: #C0331F;
  --cg-lock: #157A4C;
}