/* =====================================================================
   PRESSKIT TOKENS

   Block 1 is a MIRROR of homepage/public/tokens.css (the :root block,
   values verbatim, taken 2026-09-20). Do not edit it here: change the
   homepage file and copy. tests/test_ui_assets.py reads both files and
   fails on drift whenever the homepage repo sits next to this one.
   Not mirrored from the setmaster app: its copy has already drifted
   (docs/reuse/design-ecosystem.md 1.1).

   Block 2 is presskit's own. The accent is ONE variable: every tint,
   hover and focus colour below is derived from --accent.
   ===================================================================== */

/* ---- Block 1: mirror of homepage/public/tokens.css ---- */
:root {
  --bg:        #0a0a0a;
  --bg2:       #111111;
  --bg3:       #1a1a1a;
  --rule:      #222222;
  --dim:       #8a8a8a;
  --mid:       #9e9e9e;
  --light:     #d0d0d0;
  --white:     #f0ede8;
  --warm:      #d8d2c8;
  --hi:        rgba(240,237,232,0.04);   /* subtle highlight bg */
  --hi-border: rgba(240,237,232,0.12);   /* highlight border */
}

/* ---- Block 2: presskit ---- */
:root {
  color-scheme: dark;

  /* The product colour. Change it here and nowhere else.
     #9b8cff, a blacklight violet: 7.15:1 on --bg, 6.82 on --bg2, 6.29 on
     --bg3, and the same 7.15:1 for --bg text on an accent surface.
     Amber and the SetMaster green are 6.5 dE2000 apart for a deuteranope
     (measured, Machado 2009): this hue stays 51 or more from both for
     protan and deutan viewers, 23 or more for tritan.
     tests/test_ui_assets.py recomputes the contrast from this line, so a
     new value that fails AA fails the suite. */
  --accent:     #9b8cff;
  --on-accent:  var(--bg);

  /* Derived. The plain fallbacks keep a browser without color-mix()
     usable: same colour on hover instead of an invalid, transparent one. */
  --accent-hover: var(--accent);
  --accent-tint:  var(--hi);
  --accent-line:  var(--accent);

  /* Status. Values from homepage/public/supporter.html:28-29. */
  --danger: #e05a5a;
  --ok:     #5aad6a;

  /* The edge of a form field. --rule is 1.24:1 on --bg, fine for a divider,
     too faint for the only thing that says "type here". This is 3.45:1
     (WCAG 1.4.11 asks 3:1 for the boundary of a control). */
  --field-border: #666666;

  /* Stacks from homepage/public/header-footer.css:32-34. */
  --font-display: 'Bebas Neue', Impact, 'Arial Narrow Bold', sans-serif;
  --font-body:    'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --font-mono:    'DM Mono', ui-monospace, Menlo, monospace;

  /* Type scale. Nothing below 12px: the homepage's 8 to 10px labels are
     a desktop decision (homepage#81), this is read on a phone. */
  --fs-label: 0.75rem;     /* 12  mono labels */
  --fs-meta:  0.8125rem;   /* 13  mono meta, buttons */
  --fs-tag:   0.875rem;    /* 14  mono that is read, not scanned: genres, years */
  --fs-small: 1rem;        /* 16 */
  --fs-body:  1.125rem;    /* 18 */
  --fs-lead:  1.3125rem;   /* 21 */
  --fs-h3:    1.5rem;      /* 24 */
  --fs-h2:    2.25rem;     /* 36 */
  --fs-h1:    3.5rem;      /* 56 */

  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;    --s-7: 3rem;     --s-8: 4.5rem;

  /* Angular, as everywhere in the ecosystem (3 to 4px is the convention). */
  --radius:    3px;
  --radius-lg: 4px;

  --gutter:      1.25rem;
  --wrap-narrow: 36rem;   /* link-in-bio, forms */
  --wrap-wide:   72rem;   /* booking view on a laptop, admin */
  --tap:         3rem;    /* minimum touch target */
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --accent-hover: color-mix(in srgb, var(--accent) 80%, var(--white));
    --accent-tint:  color-mix(in srgb, var(--accent) 13%, transparent);
    --accent-line:  color-mix(in srgb, var(--accent) 50%, transparent);
  }
}

/* The grain of the homepage (tokens.css:31-37), same tile and strength,
   with one deliberate difference: there it lies ABOVE the content, here
   it lies on the ground BELOW it. A presskit shows a DJ's press photos,
   and noise over someone else's photo is not ours to add. base.css lifts
   body's children above it. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat; background-size: 128px 128px;
  opacity: 0.07;
}