/* ============================================================
   VooReach content templates — tokens.css

   Read off branding/vooreach-theme.md, which in turn follows the published
   brand page at vooreach.com/brand. The brand page wins on any divergence.

   The logo carries two colours only, yellow and ink. Canvas and accent are
   website colours and never go on the mark.
   ============================================================ */

@font-face {
  font-family: "Unbounded";
  src: url("./fonts/Unbounded-Variable.ttf") format("truetype");
  font-weight: 200 900;
  font-display: block;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-display: block;
}

:root {
  /* Brand */
  --yellow:  #FFED02;   /* logo yellow */
  --ink:     #0E121A;   /* logo ink */
  --canvas:  #FEFCEF;   /* page background */
  --accent:  #ECC93D;   /* website UI accent, never on the logo */
  --white:   #FFFFFF;

  /* Website interface tokens */
  --text:        #0F0F0F;
  --accent-ink:  #B45309;
  --good:        #059669;
  --muted:       #6A6964;
  --hair:        rgba(15, 15, 15, .10);
  --hair-dark:   rgba(254, 252, 239, .12);

  /* Poster system additions, derived from the brand colours */
  --skel:        #E7E3D5;   /* skeleton bars inside UI cards */
  --paper-2:     #EDEAE0;   /* the muted "before" card */
  --yellow-soft: #FFF7A6;

  --font-display: "Unbounded", "Inter", system-ui, sans-serif;
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --r-sm: 14px; --r-md: 22px; --r-lg: 30px; --r-xl: 44px; --r-pill: 999px;

  --slide-w: 1080px; --slide-h: 1350px;
  --page-w: 794px;   --page-h: 1123px;
}