/*
 * pravar.design design system: tokens.
 *
 * Source of truth: the Figma colour styles and the type spec
 * (Frame 1000006533), captured 2026-09-10. Token names mirror the Figma
 * style names 1:1 ("Black 80" -> --black-80, "Cyan Bright" -> --cyan-bright),
 * so a style can be looked up from either side without a translation table.
 *
 * Nothing on the site imports this file yet. It is standalone on purpose.
 */

:root {
  /* ── Neutrals ─────────────────────────────────────────────
     Figma defines these as #000000 / #FFFFFF at an opacity, so they
     are alpha colours, not greys: they read differently on each ground. */
  --black-100: #000000;
  --black-90: rgb(0 0 0 / 0.9);
  --black-80: rgb(0 0 0 / 0.8);
  --black-20: rgb(0 0 0 / 0.2);
  --black-10: rgb(0 0 0 / 0.1);
  --black-5: rgb(0 0 0 / 0.05);
  --black-0: rgb(0 0 0 / 0);

  --white-100: #ffffff;
  --white-80: rgb(255 255 255 / 0.8);
  --white-20: rgb(255 255 255 / 0.2);
  --white-10: rgb(255 255 255 / 0.1);
  --white-5: rgb(255 255 255 / 0.05);
  --white-0: rgb(255 255 255 / 0);

  /* ── Hues: each one a Light / Dark pair ─────────────────── */
  --green-light: #00ff73;
  --green-dark: #057019;
  --pink-light: #e83b9d;
  --pink-dark: #c21a67;
  --purple-light: #9542e2;
  --purple-dark: #5700a8;
  --orange-light: #e86e03;
  --orange-dark: #a04b00;
  --red-light: #ff473a;
  --red-dark: #ae1f15;
  --yellow-light: #d9e803;
  --yellow-dark: #9ba600;
  --blue-light: #3c9eff;
  --blue-dark: #0055ab;
  --cyan-bright: #4bffe1;
  --cyan-dark: #028e76;

  /* ── Type primitives ──────────────────────────────────── */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --lh-tight: 1.2;  /* headings, labels, anything semibold */
  --lh-body: 1.5;   /* B1, B2, B3 running text */

  --ls-none: 0;
  --ls-caps: 0.08em; /* the "8%" on every all-caps style */

  /* ── Text styles ──────────────────────────────────────────
     One `font` shorthand per Figma text style: the single place a size,
     weight or line height is defined. Use a style either through its
     class below, or as `font: var(--t-h2)` where a layout has to switch
     styles at a breakpoint (H3 on mobile, H2 on desktop). The caps (b)
     styles also need `letter-spacing: var(--ls-caps); text-transform: uppercase`. */
  --t-h1:  var(--fw-regular) 84px/var(--lh-tight) var(--font-sans);
  --t-h2:  var(--fw-regular) 48px/var(--lh-tight) var(--font-sans);
  --t-h3:  var(--fw-medium) 28px/var(--lh-tight) var(--font-sans);
  --t-h4:  var(--fw-medium) 24px/var(--lh-tight) var(--font-sans);

  --t-b1:  var(--fw-regular) 20px/var(--lh-body) var(--font-sans);
  --t-b1a: var(--fw-semibold) 20px/var(--lh-tight) var(--font-sans);
  --t-b1b: var(--fw-semibold) 20px/var(--lh-tight) var(--font-sans);

  --t-b2:  var(--fw-regular) 16px/var(--lh-body) var(--font-sans);
  --t-b2a: var(--fw-semibold) 16px/var(--lh-tight) var(--font-sans);
  --t-b2b: var(--fw-semibold) 16px/var(--lh-tight) var(--font-sans);

  --t-b3:  var(--fw-regular) 14px/var(--lh-body) var(--font-sans);
  --t-b3a: var(--fw-semibold) 14px/var(--lh-tight) var(--font-sans);
  --t-b3b: var(--fw-semibold) 14px/var(--lh-tight) var(--font-sans);
  --t-b3c: var(--fw-regular) 14px/var(--lh-tight) var(--font-mono);
}

/* ── Text style classes ───────────────────────────────────── */

.t-h1  { font: var(--t-h1); letter-spacing: var(--ls-none); }
.t-h2  { font: var(--t-h2); letter-spacing: var(--ls-none); }
.t-h3  { font: var(--t-h3); letter-spacing: var(--ls-none); }
.t-h4  { font: var(--t-h4); letter-spacing: var(--ls-none); }

.t-b1  { font: var(--t-b1); letter-spacing: var(--ls-none); }
.t-b1a { font: var(--t-b1a); letter-spacing: var(--ls-none); }
.t-b1b { font: var(--t-b1b); letter-spacing: var(--ls-caps); text-transform: uppercase; }

.t-b2  { font: var(--t-b2); letter-spacing: var(--ls-none); }
.t-b2a { font: var(--t-b2a); letter-spacing: var(--ls-none); }
.t-b2b { font: var(--t-b2b); letter-spacing: var(--ls-caps); text-transform: uppercase; }

.t-b3  { font: var(--t-b3); letter-spacing: var(--ls-none); }
.t-b3a { font: var(--t-b3a); letter-spacing: var(--ls-none); }
.t-b3b { font: var(--t-b3b); letter-spacing: var(--ls-caps); text-transform: uppercase; }

/* B3c: the spec label says "All caps" but the specimen renders lowercase.
   Following the specimen until that is confirmed. */
.t-b3c { font: var(--t-b3c); letter-spacing: var(--ls-caps); }