/* ==========================================================================
   Blackmarker — Design Tokens
   Style direction derived from popcorn.space: achromatic, editorial serif
   display, tight tracking, pill geometry, hairline borders, whisper shadows.
   Blackmarker's own twist: the redaction bar replaces the pill as the
   signature shape. The logo is a redaction mark, so the system is too.
   ========================================================================== */

:root {
  /* ---- Colour -----------------------------------------------------------
     Near-monochrome by design. Blackmarker's product is literally black on
     white, so the palette leans all the way into it. Mint is the one piece
     of existing brand equity we keep, and it is rationed hard.            */

  /* Not a hard black. A very dark blue-green grey reads as ink on paper
     rather than as a screen default, and it keeps the redaction bars from
     looking like holes punched in the page.                              */
  --ink:            #2C3937;  /* Primary text, redaction bars, dark buttons */
  --ink-2:          #2E3735;  /* Dark surfaces, secondary dark              */
  --ink-deep:       #212423;  /* Darker than ink: the footer watermark      */
  --ink-3:          #626C69;  /* Muted body copy                           */
  --ink-4:          #98A19E;  /* Placeholder, disabled                     */

  --paper:          #F6F6F3;
  --wash:           rgba(0, 0, 0, 0.03);  /* Panel background, one treatment */  /* Page background. Warm sliver off neutral. */
  --surface:        #FFFFFF;  /* Cards                                     */
  --surface-2:      #FAFAF8;  /* Recessed panels                           */
  --surface-3:      #EDEEEA;  /* Muted fills, skeletons                    */
  --track:          #E2E2E2;  /* Tab progress track                        */

  --mint:           #74C19F;  /* Retained brand accent. Fills only.        */
  --mint-deep:      #2F7D5C;  /* Text-safe mint. 4.6:1 on white.           */
  --mint-wash:      #EAF5F0;  /* Tinted background                         */

  --signal:         #E1554A;  /* Errors and unredacted warnings only       */
  --highlight:      #FFEFB6;  /* Pre-redaction highlight in demos          */

  --hairline:       rgba(0, 0, 0, 0.06);
  --hairline-2:     rgba(0, 0, 0, 0.12);

  /* ---- Type: automatic optical sizing; no pinned optical-size axis. ---- */
  --font-display: "Newsreader", "Tiempos Headline", Georgia, serif;
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --display-width: 100%;
  --display-weight: 400;
  --display-weight-s: 400;
  --quote-weight: 400;
  --quote-width: 100%;
  --display-xl: clamp(42px, 7.5vw, 96px);
  --display-l: clamp(40px, 5.5vw, 72px);
  --display-m: clamp(34px, 4.2vw, 54px);
  --display-s: 1.75rem;
  --display-xs: var(--display-s);
  --text-lead: 1.3125rem;   /* 21px; 20px at tablet and phone (refinement.css) */
  --text-base: 1rem;
  --text-sm: var(--text-base);
  --text-xs: .75rem;
  --track-display: -.015em;
  --track-tight: 0em;
  --track-caps: .1em;
  --leading-flat: 1;
  --leading-tight: 1.02;
  --leading-snug: 1.15;
  --leading-quote: 1.3;
  --leading-body: 1.55;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semi: 600;
  --weight-bold: 700;

  /* ---- Space ------------------------------------------------------------
     4px base. Section rhythm sticks to 64 / 80 / 96 / 128, matching the
     reference's vertical cadence.                                        */
  --s-1:  0.25rem;  /*   4 */
  --s-2:  0.5rem;   /*   8 */
  --s-3:  0.75rem;  /*  12 */
  --s-4:  1rem;     /*  16 */
  --s-5:  1.25rem;  /*  20 */
  --s-6:  1.5rem;   /*  24 */
  --s-8:  2rem;     /*  32 */
  --s-10: 2.5rem;   /*  40 */
  --s-12: 3rem;     /*  48 */
  --s-14: 3.5rem;   /*  56 */
  --s-16: 4rem;     /*  64 */
  --s-20: 5rem;     /*  80 */
  --s-24: 6rem;     /*  96 */
  --s-32: 8rem;     /* 128 */

  /* ---- Layout ---------------------------------------------------------- */
  --container:      1280px;
  --container-text:    640px;  /* Body copy measure, ~70ch          */
  /* 912, not the frame's 900. The frame's headings are tracked at -2.5%;
     these run at -1% on instruction, which needs about 1.3% more measure.
     Verified: this is the only measure-wide heading it changes, and it
     restores the frame's own two-line break on the problem headline. */
  --container-display: 912px;
  --container-mid:     820px;  /* The centred solution headline             */
  --gutter:  clamp(1.25rem, 4vw, 2.5rem);
  --grid-gap: 1.5rem;        /* 24px, the reference's card gap */

  /* ---- Atmosphere -------------------------------------------------------
     The reference's backgrounds are not flat. They are soft washes of warm
     and cool light over a faint paper grain. Kept far more restrained here,
     because this is compliance software, not a consumer phone plan.      */

  --wash-mint:  rgba(116, 193, 159, 0.30);
  --wash-warm:  rgba(255, 226, 168, 0.46);
  --wash-cool:  rgba(163, 190, 224, 0.36);
  --wash-blur:  70px;

  /* Two texture layers. The coarse one is the watercolour blotch, the fine
     one is paper tooth. Previously a single fine layer at 0.2, which was
     effectively invisible. */
  /* Tuned against a full page, not a swatch. At .55/.42 the fibre read as
     dirt over the whole sheet; these values stay clearly visible without
     competing with the type. */
  /* PAUSED 2026-09-04 at the client's request, pending a direction set in
     Figma. The implementation is intact in graphics.css — restore by putting
     these back to 0.22 / 0.18 and re-adding the atmos / wash-* classes in
     the markup. */
  --mottle-opacity: 0;
  --grain-opacity:  0;

  /* ---- Shape -----------------------------------------------------------
     Paper, not soft UI. Every card, document, panel and frame has a 2px
     corner. Small controls (badges, fields) get 4px, buttons are pills,
     icon chips are circles. Nothing else.                               */
  --radius-outer: 2px;    /* Cards, documents, panels, framed graphics */
  --radius-inner: 2px;    /* A surface nested inside another           */
  --radius-sm:    4px;    /* Badges and form fields                    */
  --radius-pill: 999px;   /* Buttons and progress bars                 */

  /* ---- Elevation ---------------------------------------------------------
     One shadow for every white surface, sitting on a 1px hairline edge.
     Hover never adds height; it is the same shadow.                      */
  --shadow:      0 1px 2px rgba(44, 57, 55, .035), 0 5px 12px rgba(44, 57, 55, .045);
  --shadow-lift: var(--shadow);

  /* ---- Motion ------------------------------------------------------------
     One curve, four speeds. Fast for colour on hover, base for borders and
     small moves, slow for opening and fading, reveal for a redaction bar
     drawing across. Long ambient loops (testimonials) are linear.        */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:   140ms;
  --dur:        240ms;
  --dur-slow:   420ms;
  --dur-reveal: 600ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}