/*
  Unstamp design tokens
  Source of truth for colour, type, space, shape and motion. See BRAND.md for the reasoning.
  Import this file first, then build components on the tokens only: no raw hex values in component CSS.

  Idea in one line: paper, ink and stamp. Paper is the ground, ink is what stays, stamp red is what goes.
  Every text and background pairing named in BRAND.md meets WCAG 2.2 AA. Ratios are in the comments below, computed with the WCAG formula and rounded down.
*/

/* ===== Fonts: hosted by Unstamp, never called from another service ===== */
/* Both families are SIL Open Font License 1.1. Licence texts sit beside the files in brand/fonts.          */
/* Latin subset, variable. Keep the relative path when the folder moves into static.                        */
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source_serif_4_latin.woff2") format("woff2");
  font-weight: 400 700;      /* variable weight axis */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("fonts/public_sans_latin.woff2") format("woff2");
  font-weight: 400 800;      /* variable weight axis */
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;       /* one theme. See BRAND.md, Colour, for why there is no dark theme. */

  /* ===== Colour: raw palette ===== */
  --cm-paper:        #FFFFFF;  /* the page: plain white, so the document and the ink panel carry the colour */
  --cm-sheet:        #FFFFFF;  /* cards and fields: white, set off by a hairline and a soft shadow */
  --cm-well:         #F3F6FC;  /* recessed areas and quiet bands: a cool tint of the ink */
  --cm-rule:         #D5DAE6;  /* hairlines */
  --cm-edge:         #6B7388;  /* control borders: 4.7 to 1 on white */

  --cm-ink:          #141B2D;  /* blue black. Text and primary buttons: 15.20 on paper, 16.71 on sheet, 13.75 on well */
  --cm-ink-2:        #3A4257;  /* secondary text: 8.87 on paper, 9.76 on sheet, 8.03 on well */
  --cm-ink-3:        #5A6172;  /* captions and meta: 5.49 on paper, 6.04 on sheet, 4.97 on well */
  --cm-ink-hover:    #26304A;  /* hover on ink buttons: sheet text 12.76 */
  --cm-ink-press:    #0B1020;  /* pressed ink buttons: sheet text 18.45 */

  --cm-stamp:        #B4321C;  /* stamp red. The mark, and a refusal: 5.45 on paper, 5.99 on sheet, 4.93 on well */
  --cm-stamp-press:  #8E2414;  /* pressed or hover on solid red: sheet text 8.48 */
  --cm-stamp-tint:   #F7E4DE;  /* wash behind a found mark: stamp red on it 5.01, ink on it 13.97 */

  --cm-blue:         #1F3F99;  /* signature blue. Links, focus, selected, cleared: 8.35 on paper, 9.18 on sheet, 7.55 on well */
  --cm-blue-press:   #17307A;  /* pressed or hover on solid blue: sheet text 11.76 */
  --cm-blue-tint:    #E4E9F5;  /* wash behind a cleared state: blue on it 7.74, ink on it 14.10 */

  --cm-highlight:    #F6E7A6;  /* highlighter. Background for "check this": ink on it 13.80 */
  --cm-highlight-ink:#5C4300;  /* text and icons for "check this": 7.48 on highlight, 8.24 on paper, 9.06 on sheet */

  /* On ink surfaces only (footer band, inverse notices) */
  --cm-on-ink:       #FFFFFF;  /* text on the ink panel */
  --cm-on-ink-2:     #C9D3EE;  /* secondary text on the ink panel: 10 to 1 on ink */
  --cm-stamp-on-ink: #F0876F;  /* stamp red lifted for ink grounds: 6.86 on ink */
  --cm-blue-on-ink:  #9DB4F2;  /* links on ink: 8.36 on ink */

  /* ===== Colour: roles (use these in components) ===== */
  --cm-bg:                 var(--cm-paper);
  --cm-surface:            var(--cm-sheet);
  --cm-surface-sunken:     var(--cm-well);
  --cm-text:               var(--cm-ink);
  --cm-text-secondary:     var(--cm-ink-2);
  --cm-text-meta:          var(--cm-ink-3);
  --cm-link:               var(--cm-blue);
  --cm-focus:              var(--cm-blue);
  --cm-action:             var(--cm-ink);       /* primary button fill */
  --cm-action-text:        var(--cm-sheet);

  --cm-state-mark:         var(--cm-stamp);     /* a watermark that was found */
  --cm-state-mark-bg:      var(--cm-stamp-tint);
  --cm-state-cleared:      var(--cm-blue);      /* done. Blue, not green: see BRAND.md */
  --cm-state-cleared-bg:   var(--cm-blue-tint);
  --cm-state-check:        var(--cm-highlight-ink); /* needs a look, or a fault the customer can fix */
  --cm-state-check-bg:     var(--cm-highlight);
  --cm-state-refused:      var(--cm-sheet);     /* text on a refusal stamp */
  --cm-state-refused-bg:   var(--cm-stamp);     /* a refusal is the only solid red in the interface */

  /* ===== Type: families ===== */
  --cm-font-serif: "Source Serif 4", "Source Serif Pro", Charter, "Bitstream Charter", "Iowan Old Style", Cambria, Georgia, serif;
  --cm-font-sans:  "Public Sans", "Libre Franklin", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  /* No monospace family. Numbers use the sans with tabular figures. */
  --cm-numeric: tabular-nums lining-nums;

  /* ===== Type: weights ===== */
  --cm-weight-regular: 400;
  --cm-weight-medium:  500;
  --cm-weight-semi:    600;
  --cm-weight-bold:    700;
  --cm-weight-stamp:   800;   /* Public Sans only, for stamp lettering */

  /* ===== Type: scale, desktop (641 px and wider) ===== */
  /* size / line height / tracking. Sizes in rem on a 16 px root.  */
  --cm-display-size: 3.25rem;    --cm-display-line: 3.5rem;    --cm-display-track: -0.018em;  /* 52 / 56  serif 600 */
  --cm-h2-size:      2.125rem;   --cm-h2-line:      2.5rem;    --cm-h2-track:      -0.012em;  /* 34 / 40  serif 600 */
  --cm-h3-size:      1.5rem;     --cm-h3-line:      1.875rem;  --cm-h3-track:      -0.006em;  /* 24 / 30  serif 600 */
  --cm-h4-size:      1.125rem;   --cm-h4-line:      1.625rem;  --cm-h4-track:      0;         /* 18 / 26  sans 600  */
  --cm-lede-size:    1.25rem;    --cm-lede-line:    1.875rem;                                 /* 20 / 30  sans 400  */
  --cm-body-size:    1rem;       --cm-body-line:    1.625rem;                                 /* 16 / 26  sans 400  */
  --cm-small-size:   0.875rem;   --cm-small-line:   1.375rem;                                 /* 14 / 22  sans 400  */
  --cm-caption-size: 0.8125rem;  --cm-caption-line: 1.125rem;                                 /* 13 / 18  sans 400  */
  --cm-label-size:   0.75rem;    --cm-label-line:   1rem;      --cm-label-track:   0.08em;    /* 12 / 16  sans 700, capitals */
  --cm-button-size:  0.9375rem;  --cm-button-line:  1.25rem;                                  /* 15 / 20  sans 600  */

  /* Stamp lettering: Public Sans 800, capitals, tracked, inside a frame */
  --cm-stamp-track:   0.08em;
  --cm-stamp-sm-size: 0.75rem;   --cm-stamp-sm-line: 1rem;      /* 12 / 16  status in a file row  */
  --cm-stamp-md-size: 0.875rem;  --cm-stamp-md-line: 1.125rem;  /* 14 / 18  notices               */
  --cm-stamp-lg-size: 1.25rem;   --cm-stamp-lg-line: 1.5rem;    /* 20 / 24  illustrations         */
  --cm-stamp-inline:  0.6em;     /* a stamped word set inside a serif headline, relative to the headline */
  --cm-stamp-tilt:        -10deg; /* illustrations and the symbol */
  --cm-stamp-tilt-inline: -4deg;  /* a stamped word inside running type. Status stamps in file rows sit level. */

  /* ===== Space: 4 px base ===== */
  --cm-space-1: 0.25rem;   /*   4 */
  --cm-space-2: 0.5rem;    /*   8 */
  --cm-space-3: 0.75rem;   /*  12 */
  --cm-space-4: 1rem;      /*  16 */
  --cm-space-5: 1.5rem;    /*  24 */
  --cm-space-6: 2rem;      /*  32 */
  --cm-space-7: 3rem;      /*  48 */
  --cm-space-8: 4rem;      /*  64 */
  --cm-space-9: 6rem;      /*  96 */
  --cm-space-10: 8rem;     /* 128 */

  --cm-page-max: 70rem;    /* 1120 px content width */
  --cm-gutter:   1.5rem;   /* 24 px page margin */
  --cm-measure:  62ch;     /* longest line of running text */
  --cm-tap:      2.75rem;  /* 44 px smallest touch target */

  /* ===== Shape ===== */
  --cm-radius-stamp:   3px;  /* stamps and status frames */
  --cm-radius-sheet:   4px;  /* cards, drop zone, notices: paper has corners */
  --cm-radius-control: 6px;  /* buttons and inputs */
  /* No pill shapes and no radius above 6 px. */

  --cm-line-hair:    1px;
  --cm-line-control: 1.5px;
  --cm-line-stamp:   2px;    /* 1.5px at the small stamp size */

  --cm-border-hair:    var(--cm-line-hair) solid var(--cm-rule);
  --cm-border-control: var(--cm-line-control) solid var(--cm-edge);
  --cm-border-strong:  var(--cm-line-control) solid var(--cm-ink);
  --cm-border-drop:    var(--cm-line-control) dashed var(--cm-edge);   /* the empty frame of the drop zone */

  /* ===== Shadow: paper lying on a desk, nothing more ===== */
  --cm-shadow-sheet: 0 1px 0 rgba(20, 27, 45, 0.05), 0 1px 3px rgba(20, 27, 45, 0.07);
  --cm-shadow-lift:  0 2px 4px rgba(20, 27, 45, 0.06), 0 14px 28px -10px rgba(20, 27, 45, 0.22);
  --cm-focus-ring:   0 0 0 2px var(--cm-paper), 0 0 0 4px var(--cm-focus);

  /* ===== Motion: things lift, nothing bounces ===== */
  --cm-dur-quick:  120ms;   /* hover, press */
  --cm-dur-base:   200ms;   /* reveal, state change */
  --cm-dur-lift:   320ms;   /* a stamp leaving a page, a result arriving */
  --cm-ease-out:   cubic-bezier(0.2, 0, 0, 1);     /* entering, lifting */
  --cm-ease-in:    cubic-bezier(0.4, 0, 1, 1);     /* leaving */
  --cm-ease-move:  cubic-bezier(0.4, 0, 0.2, 1);   /* moving between two places */
  --cm-lift-rise:  6px;     /* how far a lifted thing travels */
}

/* ===== Type: scale, mobile (640 px and narrower) ===== */
@media (max-width: 640px) {
  :root {
    --cm-display-size: 2.25rem;    --cm-display-line: 2.5rem;    --cm-display-track: -0.014em;  /* 36 / 40 */
    --cm-h2-size:      1.75rem;    --cm-h2-line:      2.125rem;  --cm-h2-track:      -0.01em;   /* 28 / 34 */
    --cm-h3-size:      1.3125rem;  --cm-h3-line:      1.75rem;                                  /* 21 / 28 */
    --cm-h4-size:      1.0625rem;  --cm-h4-line:      1.5rem;                                   /* 17 / 24 */
    --cm-lede-size:    1.125rem;   --cm-lede-line:    1.75rem;                                  /* 18 / 28 */
    /* body 16 / 26, small 14 / 22, caption 13 / 18 and label 12 / 16 do not change */
    --cm-button-size:  1rem;       --cm-button-line:  1.5rem;                                   /* 16 / 24 */
    --cm-stamp-lg-size: 1.125rem;  --cm-stamp-lg-line: 1.375rem;                                /* 18 / 22 */
    --cm-gutter: 1rem;             /* 16 px page margin */
  }
}

/* ===== Reduced motion: keep the change, drop the travel ===== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --cm-dur-quick: 1ms;
    --cm-dur-base:  1ms;
    --cm-dur-lift:  1ms;
    --cm-lift-rise: 0px;
  }
}