/* =====================================================================
   PARITER · Identity v2 · Monochrome Glass edition
   tokens.css · PAR-001 · TOR / LA · EST. MMXXVI

   Canonical spec: pariter-brandbook-v2.html. tokens.json mirrors this
   file one-to-one. Three colours, one ink ladder, one material.
   No hue anywhere: emphasis is scale, glass depth and the opacity ladder.

   Fonts (Google Fonts):
   https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400&family=Newsreader:ital,opsz,wght@1,6..72,400&family=Geist+Mono:wght@400&display=swap
   ID Grotesk Medium is embedded in the brandbook and used for PARITER only.
   ===================================================================== */

:root {
  /* ── Colour ── */
  --paper: #FFFFFF;                    /* base */
  --haze: #F6F6F7;                     /* bands, flat card fills */
  --ink: #0B0B0C;                      /* text and marks, never pure #000 */
  --ink-rgb: 11, 11, 12;               /* for rgba(var(--ink-rgb), a) */
  --paper-rgb: 255, 255, 255;

  /* ── Text ladder ── */
  --ink-100: rgba(11, 11, 12, 1);      /* headings */
  --ink-64: rgba(11, 11, 12, .64);     /* body */
  --ink-55: rgba(11, 11, 12, .55);     /* secondary */
  --ink-44: rgba(11, 11, 12, .44);     /* captions, meta, eyebrows */
  --ink-30: rgba(11, 11, 12, .30);     /* disabled */

  /* ── Rules ── */
  --hairline: rgba(11, 11, 12, .10);   /* dividers, list rows */
  --rule: rgba(11, 11, 12, .16);       /* strong rules */
  --glass-edge: rgba(11, 11, 12, .08); /* 1px border on every glass object */

  /* ── Radii ── */
  --radius-pane: 26px;
  --radius-pill: 999px;

  /* ── Blur ── */
  --blur-pane: 20px;
  --blur-veil: 24px;
  --blur-chip: 14px;
  --saturate-pane: 1.2;

  /* ── Glass fills ── */
  --fill-pane: rgba(255, 255, 255, .55);
  --fill-veil: rgba(255, 255, 255, .72);
  --fill-chip: linear-gradient(145deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .52));
  --fill-primary: linear-gradient(145deg, #1D1D20, #0B0B0C);   /* the one opaque object */

  /* ── Shadow stacks ── */
  --shadow-pane: inset 0 1px 0 rgba(255, 255, 255, .9), 0 30px 70px rgba(11, 11, 12, .10);
  --shadow-chip: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(11, 11, 12, .06), 0 1px 2px rgba(11, 11, 12, .08), 0 8px 24px rgba(11, 11, 12, .10);
  --shadow-chip-pressed: inset 0 2px 6px rgba(11, 11, 12, .14), inset 0 -1px 0 rgba(255, 255, 255, .6);
  --shadow-primary: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(11, 11, 12, .08), 0 8px 24px rgba(11, 11, 12, .10);

  /* ── Interaction states ── */
  --shadow-chip-hover: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(11, 11, 12, .06), 0 2px 4px rgba(11, 11, 12, .10), 0 14px 32px rgba(11, 11, 12, .14);
  --shadow-primary-hover: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 4px rgba(11, 11, 12, .10), 0 14px 32px rgba(11, 11, 12, .14);
  --shadow-primary-pressed: inset 0 2px 6px rgba(11, 11, 12, .6), inset 0 -1px 0 rgba(255, 255, 255, .08);
  --lift: translateY(-1px);            /* hover: lift */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .18s;

  /* ── Type families ── */
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;  /* display and body */
  --font-serif: "Newsreader", Georgia, serif;                           /* italic only */
  --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;            /* glyphs, eyebrows, files */
  --font-wordmark: "ID Grotesk", "Instrument Sans", sans-serif;         /* PARITER only */
  --weight-sans: 400;                  /* even at display sizes */
  --weight-wordmark: 500;

  /* ── Type scale ── */
  --fs-display: clamp(52px, 9vw, 144px);
  --fs-h1: clamp(40px, 6.6vw, 96px);
  --fs-h2: clamp(34px, 3.9vw, 56px);
  --fs-h3: clamp(24px, 2.2vw, 32px);
  --fs-lead: clamp(18px, 1.45vw, 21px);
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-meta: 14px;                     /* Newsreader italic labels */
  --fs-annotation: 12px;               /* Geist Mono filenames, values */
  --fs-eyebrow: 11px;                  /* Geist Mono, uppercase */
  --lh-display: .95;
  --lh-heading: 1.05;
  --lh-body: 1.55;

  /* ── Tracking ── */
  --track-display: -0.03em;            /* display, h1, h2 */
  --track-h3: -0.02em;
  --track-body: 0em;
  --track-eyebrow: 0.12em;
  --track-wordmark: 0.16em;

  /* ── ASCII texture ── */
  --field-ramp: "· : + * #";           /* Geist Mono, low to high density */
  --field-cell: 14px;
  --field-glyph: 12px;
  --field-under-glass: .06;
  --field-edge: .08;                   /* default edge field */
  --field-max: .10;
  --field-mark-peak: .14;              /* mark fields only */
}

/* Recipes. Glass exists only over texture; with nothing behind it, use a
   flat --haze card. Max two glass elements per composition. The mark is
   never glass, and emboss is for interactive elements only.

   .pane    { background: var(--fill-pane); backdrop-filter: blur(var(--blur-pane)) saturate(var(--saturate-pane));
              border: 1px solid var(--glass-edge); border-radius: var(--radius-pane); box-shadow: var(--shadow-pane); }
   .veil    { background: var(--fill-veil); backdrop-filter: blur(var(--blur-veil)); border-bottom: 1px solid var(--hairline); }
   .chip    { background: var(--fill-chip); backdrop-filter: blur(var(--blur-chip)); border: 1px solid var(--glass-edge);
              border-radius: var(--radius-pill); box-shadow: var(--shadow-chip); }
   .chip:hover  { transform: var(--lift); box-shadow: var(--shadow-chip-hover); }
   .chip:active { transform: none; box-shadow: var(--shadow-chip-pressed); }
   .primary { background: var(--fill-primary); color: var(--paper); border-radius: var(--radius-pill); box-shadow: var(--shadow-primary); }
*/