/* Plainly Powered — brand tokens
 * Source: logo files "Final set, 26 October 2026" (README.txt + SVG fills).
 * 27 Oct 2026: the highlighter changed from yellow #FFE03D to orange #FFA046
 * (yellow read too much like the AA). The orange logos are recolours of the
 * yellow originals until the designer exports a final orange set.
 * Values marked DERIVED are not in the logo files: they are calculated from
 * the core colours and can change. Everything else is fixed.
 * Type: Inter Tight (headlines) + Inter (everything else), both SIL OFL,
 * files in assets/fonts/. The logo is drawn in Bricolage Grotesque, but as
 * outlines, so no Bricolage is needed to use it.
 */

@font-face {
  font-family: "Inter Tight";
  src: url("assets/fonts/InterTight-Variable-latin.woff2") format("woff2"),
       url("assets/fonts/InterTight-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-Variable-latin.woff2") format("woff2"),
       url("assets/fonts/Inter-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* ── Colour: core (FIXED) ─────────────────────────────── */
  --pp-ink:         #22201D;  /* text, logo, dark backgrounds */
  --pp-paper:       #FAF8F3;  /* page background, reversed text */
  --pp-highlight:   #FFA046;  /* primary highlighter orange — behind dark text only */
  --pp-highlight-2: #B4F25C;  /* secondary highlighter lime — campaigns / variety only */

  /* ── Colour: swipe detail (FIXED, inside the logo swipe only) ── */
  --pp-highlight-streak:   #FFD191;  /* DERIVED for orange */
  --pp-highlight-shade:    #EB8B24;  /* DERIVED for orange */
  --pp-highlight-2-streak: #D6F8A5;
  --pp-highlight-2-shade:  #9CDF3D;

  /* ── Colour: DERIVED (flexible) ───────────────────────── */
  --pp-ink-muted:    #63615D;                 /* ink at 70% on paper — secondary text, 5.8:1 */
  --pp-hairline:     rgba(34, 32, 29, 0.15);  /* 1px dividers on paper */
  --pp-hairline-rev: rgba(250, 248, 243, 0.2);/* 1px dividers on ink */

  /* ── Roles ────────────────────────────────────────────── */
  --pp-bg:          var(--pp-paper);
  --pp-bg-feature:  var(--pp-ink);
  --pp-text:        var(--pp-ink);
  --pp-text-rev:    var(--pp-paper);
  --pp-accent:      var(--pp-highlight);

  /* ── Type (FIXED families) ────────────────────────────── */
  --pp-font-display: "Inter Tight", "Inter", "Helvetica Neue", Arial, sans-serif; /* headlines, big numbers */
  --pp-font:         "Inter", "Helvetica Neue", Arial, sans-serif;               /* body, labels, buttons */
  --pp-weight-display: 800;  /* headlines — same weight as the wordmark */
  --pp-weight-label:   600;  /* labels: capitals, wide tracking */
  --pp-weight-body:    400;

  /* Type scale (flexible sizes, fixed ratios) — size / line-height / tracking */
  --pp-text-display:   clamp(2.75rem, 6vw, 4.5rem); /* 44–72px */
  --pp-lh-display:     1.0;
  --pp-ls-display:     -0.025em;
  --pp-text-h1:        clamp(2.25rem, 4.5vw, 3.25rem); /* 36–52px */
  --pp-lh-h1:          1.05;
  --pp-ls-h1:          -0.025em;
  --pp-text-h2:        clamp(1.75rem, 3vw, 2.25rem); /* 28–36px */
  --pp-lh-h2:          1.1;
  --pp-ls-h2:          -0.02em;
  --pp-text-h3:        1.375rem;  /* 22px */
  --pp-lh-h3:          1.25;
  --pp-ls-h3:          -0.01em;
  --pp-text-body-lg:   1.25rem;   /* 20px */
  --pp-lh-body-lg:     1.5;
  --pp-text-body:      1.0625rem; /* 17px */
  --pp-lh-body:        1.6;
  --pp-text-small:     0.875rem;  /* 14px */
  --pp-lh-small:       1.5;
  --pp-text-label:     0.75rem;   /* 12px */
  --pp-lh-label:       1.4;
  --pp-ls-label:       0.12em;
  --pp-text-number:    clamp(3rem, 7vw, 5rem); /* 48–80px, 800, tabular */

  /* ── Space (one scale) ────────────────────────────────── */
  --pp-space-1:  4px;
  --pp-space-2:  8px;
  --pp-space-3:  16px;
  --pp-space-4:  24px;
  --pp-space-5:  32px;
  --pp-space-6:  48px;
  --pp-space-7:  64px;
  --pp-space-8:  96px;
  --pp-space-9:  128px;

  /* ── Layout ───────────────────────────────────────────── */
  --pp-max-width:      1200px;
  --pp-measure:        64ch;   /* max line length for body text */
  --pp-gutter:         24px;
  --pp-margin-mobile:  16px;
  --pp-margin-desktop: 48px;
  --pp-columns:        12;

  /* ── Shape ────────────────────────────────────────────── */
  --pp-radius:         0;      /* UI: square corners */
  --pp-radius-tile:    20%;    /* app/avatar tiles only, as drawn in the logo files */
  --pp-border:         1px solid var(--pp-hairline);
  --pp-border-strong:  2px solid var(--pp-ink);
  --pp-shadow:         none;   /* no shadows, ever */

  /* ── Motion ───────────────────────────────────────────── */
  --pp-ease:           cubic-bezier(0.2, 0.8, 0.2, 1); /* quick out, soft landing */
  --pp-ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --pp-dur-fast:       150ms;  /* hovers, small state changes */
  --pp-dur-base:       300ms;  /* text and blocks appearing */
  --pp-dur-swipe:      450ms;  /* the highlighter swipe drawing in */
  --pp-stagger:        60ms;   /* delay between lines/items */
}