/* ==========================================================================
   ASHES - design tokens
   Every colour, type step, space step and timing on the site is declared here.
   Nothing in styles.css may hardcode a colour or a font.

   Palette is sampled from the band's own wordmark (images/originals/logo-orig.png):
   peak red in the mark measures #C6262C. Everything else is built around it.
   ========================================================================== */

:root {
  /* ---- ground -------------------------------------------------------- */
  --ink:            #0A0A0A;   /* page canvas. never pure #000 */
  --ink-raise:      #131313;   /* raised block */
  --ink-panel:      #171717;   /* form fields, inset panels */
  --ink-deep:       #050505;   /* footer, under-video scrim */

  /* ---- ink on ground ------------------------------------------------- */
  --bone:           #F2F0EC;   /* primary text        18.4:1 on --ink */
  --bone-2:         #B9B6B1;   /* secondary text       9.9:1 on --ink */
  --bone-3:         #8E8B86;   /* tertiary / captions  5.8:1 on --ink */

  /* ---- brand red ------------------------------------------------------
     --red is the mark colour. It measures 3.5:1 on --ink, which clears the
     WCAG 3:1 bar for large text (>=24px) and for UI components, and does NOT
     clear 4.5:1. Small red text therefore uses --red-hot (5.4:1). */
  --red:            #C6262C;   /* fills, rules, large display, UI edges */
  --red-hot:        #F0464C;   /* red text below 24px, focus rings */
  --red-deep:       #6E1418;   /* pressed state, deep fills */

  /* ---- edges ---------------------------------------------------------- */
  --line:           #232323;   /* decorative hairline (aria-hidden) */
  --line-strong:    #686868;   /* field + UI borders. 3.55:1 on --ink, 3.33:1 on
                                  --ink-raise, 3.22:1 on --ink-panel: clears the
                                  WCAG 1.4.11 3:1 bar on every ground it meets. */

  /* ---- text on brand red ---------------------------------------------- */
  --on-red:         #FFFFFF;   /* 5.7:1 on --red */

  /* ---- type -----------------------------------------------------------
     One family. Weight and the family's own italic carry every emphasis;
     no second face is ever introduced. */
  --font: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* The band's own display face. It has a single weight and no italic, so the
     oblique that used to come from Satoshi Black Italic now comes from the
     face itself, which is already drawn on a slant. */
  --font-display: "Sneakers Pro", var(--font);

  --w-regular: 400;
  --w-medium:  500;
  --w-bold:    700;
  --w-black:   900;

  /* fluid display steps */
  --t-mega:  clamp(2.75rem, 11vw,  9rem);      /* hero / page title */
  --t-xl:    clamp(2.1rem,  6.4vw, 4.5rem);    /* section heading */
  --t-lg:    clamp(1.6rem,  3.6vw, 2.5rem);    /* sub heading */
  --t-md:    clamp(1.15rem, 2.1vw, 1.4rem);    /* lead paragraph */
  --t-base:  1.0625rem;                        /* body 17px */
  --t-sm:    0.9375rem;                        /* small 15px */
  --t-xs:    0.8125rem;                        /* label 13px */

  --lh-display: 0.90;
  --lh-heading: 1.06;
  --lh-body:    1.62;

  --tr-display: -0.022em;   /* tight display tracking */
  --tr-label:    0.16em;    /* wide label tracking */

  /* ---- space (one scale, used everywhere) ------------------------------ */
  --s1: 0.5rem;
  --s2: 0.75rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2rem;
  --s6: 3rem;
  --s7: 4.5rem;
  --s8: 6.5rem;
  --s9: 9rem;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --measure: 62ch;
  --shell: 1500px;

  /* ---- shape ----------------------------------------------------------
     Radius 0 everywhere. This is a poster, not an app. */
  --radius: 0;

  /* ---- the lean -------------------------------------------------------
     The wordmark is an oblique. Every angled element on the site reuses this
     one value so the diagonal reads as a system, not a flourish. */
  --lean: -11deg;

  /* ---- motion ---------------------------------------------------------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 180ms;
  --mid:  380ms;
  --slow: 720ms;

  /* ---- layers ---------------------------------------------------------- */
  --z-base:   1;
  --z-raise:  10;
  --z-header: 100;
  --z-menu:   200;
  --z-skip:   300;
}

/* The site is black by brand identity, not by colour-scheme preference.
   Declaring the scheme keeps form controls, scrollbars and the UA focus ring
   dark instead of flipping to a white default. */
:root { color-scheme: dark; }