/* ==========================================================================
   Black Marker — Design Tokens
   Style direction derived from popcorn.space: achromatic, editorial serif
   display, tight tracking, pill geometry, hairline borders, whisper shadows.
   Black Marker'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. Black Marker'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 -------------------------------------------------------------
     Two families, same as the reference. Newsreader stands in for Untitled
     Serif; Inter for Messina Sans. Both are free and variable, so the
     client's team can self-host without a licence conversation.          */

  /* Noto Serif, chosen in Figma on 2026-09-05. Variable, so the display
     weight below is a real axis position rather than a synthesised bold.
     Change here, nowhere else. */
  --font-display: "Noto Serif", Georgia, "Times New Roman", serif;

  /* Headings sit at Medium. The old face was used at 400; Noto Serif needs
     the extra weight to hold the same presence at display sizes. */
  /* Noto Serif is a variable face and the Figma frame does not run it at its
     defaults. Every heading there carries a width axis of 84 (condensed), and
     the large sizes drop to weight 300. Pull quotes are the deliberate
     exception: normal width, Regular — set for reading, not for impact. */
  --display-width:    84%;   /* wdth axis, via font-stretch */
  --display-weight:   300;   /* 48px and up */
  --display-weight-s: 400;   /* 32px and below: 300 goes too fine here */
  --quote-weight:     400;
  --quote-width:      100%;
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* Display sizes. Line-height locks to 1.0 at large sizes and opens up as
     the type gets smaller. Tracking is -0.025em everywhere, which is the
     single most copied detail from the reference.                        */
  --display-xl:   clamp(3rem, 7vw, 5.5rem);      /*  48 →  88px */
  --display-l:    clamp(2.5rem, 5vw, 4rem);      /*  40 →  64px */
  --display-m:    clamp(2rem, 3.6vw, 3rem);      /*  32 →  48px */
  --display-s:    clamp(1.5rem, 2.4vw, 2rem);    /*  24 →  32px */
  --display-xs:   1.375rem;                      /*        22px */

  --text-lead:    1.25rem;   /* 20px */
  --text-base:    1rem;      /* 16px */
  --text-sm:      0.875rem;  /* 14px */
  --text-xs:      0.8125rem; /* 13px */

  /* Noto Serif has no optical-size axis, so nothing to pin. */

  /* Noto Serif needs far less negative tracking than the old face: -1% across
     every heading size, set 2026-09-05. Body and UI keep --track-tight. */
  --track-display: -0.01em;
  --track-tight:   -0.025em;
  --track-caps:     0.08em;

  --leading-flat:  1.0;
  --leading-tight: 1.08;
  --leading-snug:  1.18;   /* display-s and display-xs */
  --leading-quote: 1.36;   /* pull quotes run looser than headings */
  --leading-body:  1.5;

  --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 ----------------------------------------------------------- */
  /* One radius for every outer surface — card, panel, sheet, FAQ row, framed
     graphic. A surface nested inside another steps down, which keeps the two
     curves concentric instead of fighting each other. */
  --radius-outer: 20px;
  --radius-inner: 12px;
  --radius-sm:     8px;   /* Fields and small controls */
  --radius-pill: 999px;

  /* ---- Elevation --------------------------------------------------------
     One shadow, used sparingly. Large blur, heavy negative spread, so it
     reads as a lift rather than a drop shadow.                           */
  --shadow:      0 12px 30px -20px rgba(15, 30, 60, 0.16);
  --shadow-lift: 0 18px 40px -22px rgba(15, 30, 60, 0.24);

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur:      240ms;
  --dur-slow: 420ms;
}

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