/* ═════════════════════════════════════════════════════════════════════════
   theme.css - THE ONLY PER-CLIENT FILE. Brand primitives only; every other
   stylesheet reads var(--token).

   DIRECTION: "the press sheet." Every token below is sampled from the client's
   OWN lockup or their live site - not chosen. Their logo is
   `assets/img/copymasters-logo.png`; the hexes are its actual pixels.

     ink        #231f20  the black in COPY. Rich black, not #000 - which is what a
                         printer's black actually is, and it is already their mark.
     steel      #7e8a9a  the grey in MASTERS. Their second colour, not an invention.
     silver     #dadbdd  the paper-curl highlight in the lockup.
     accent     #1f4b99  the blue of COPY on the shop's own business card and sign.
                         Jimmy asked for it by name (design review, 2026-09-23):
                         "I'd like to have that blue", red buttons to "this darker
                         blue". Sampled from a webcam photo of the card and pulled
                         back to the printed value - 8.3:1 white-on-blue, so it
                         carries labels. The red (#a71000) it replaces stays in the
                         ink drawer as --ink-red.
     card       #dbe4f1  the pale blue STOCK of their business card (2026-10-06: "use
                         that instead of the white background wherever we can"). The
                         public site's surfaces are card, not white; white is kept
                         for what has a job - form fields and the printed sheet.
     paper      #cfdaea  one step deeper on the same stock, for alternating bands.
     typefaces  Newsreader (serif) for headlines + Satoshi (sans) for body. The
                         classic serif reads professional and echoes the client's own
                         serif-based logo; the client asked for standard, not flashy.
     signature  crop marks (.site-crop): the shop's own artifact rendered as UI.

   Self-hosted woff2, no webfont CDN. Do not add rules here - put shared
   patterns upstream and new tokens in tokens.css.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Faces ────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-var.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi-900.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  /* ── Brand colours - sampled from the client's lockup ─────────────────── */
  --brand-primary:   #231f20;   /* the black in COPY */
  --brand-accent:    #1f4b99;   /* the COPY blue from their card and sign */
  --brand-accent-deep: #163a78; /* hover / pressed */
  --brand-on-accent: #ffffff;

  /* The brighter blue. Hairlines, hover and marks on dark only - white text on
     it is 5:1 but it reads as a link colour, so it never carries a button. */
  --brand-accent-bright: #3a6cc4;

  /* ── The ink drawer ──────────────────────────────────────────────────────
     "Colourful" for a print shop is not a rainbow of UI icons - it is ink. Each
     of these is either the client's own or a real press ink pulled down to the
     value that clears AA on paper, so a service mark can be coloured without
     the palette turning into decoration.

       green   the green in the shop's OWN interior sign (the counter photo)
       cyan    process cyan, darkened until it holds as a line colour
       magenta process magenta, same
       yellow  process yellow is unusable as a mark colour; this is its ochre
       blue    the blue a blueprint line is actually printed in
       violet  the bindery spot ink, for the finishing family
     Blue is --brand-accent above; red is kept here as a press ink. */
  --ink-red:     #a71000;
  --ink-green:   #2c6b4e;
  --ink-cyan:    #0f7fb8;
  --ink-magenta: #b0006b;
  --ink-yellow:  #9a6c00;
  --ink-blue:    #1f4e8c;
  --ink-violet:  #5b3f9e;

  /* The grey in MASTERS, and the paper-curl highlight. */
  --brand-steel:  #7e8a9a;
  --brand-ink-80: #3f4348;
  --brand-ink-20: #cfd2d5;
  --brand-card:   #dbe4f1;   /* their business-card stock */
  --brand-paper:  #cfdaea;
  --brand-paper-2:#c3d0e4;
  --brand-navy:   #132f60;   /* the blue at press density - the hero ground */

  /* ── Fonts ─────────────────────────────────────────────────────────────── */
  --brand-font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --brand-font-body:    'Satoshi', Helvetica, Arial, sans-serif;
  --brand-font-mono:    ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* ── Surfaces ──────────────────────────────────────────────────────────── */
  --bg-sunken: #f4f4f2;         /* portal canvas: paper, cooled for long screens */

  /* ── Logo ──────────────────────────────────────────────────────────────
     The real lockup, on light backgrounds only. There is no reversed version
     yet, so the footer sets the wordmark in TYPE rather than inverting their
     mark - a CSS filter turns the steel grey muddy brown. See assets/img/README.md. */
  --brand-logo: url("../img/copymasters-logo.png");
  --brand-logo-white: none;
  --brand-monogram: "CM";

  /* ── Signature: crop marks ─────────────────────────────────────────────── */
  --rule-crop: 1px solid var(--brand-ink-20);
  --crop-size: 18px;
  --crop-gap: 7px;   /* how far the mark sits OUTSIDE the trim edge */
}