/* ==========================================================================
   TOKENS — fonts and design tokens, shared by every page on the site.

   Split out of style.css so the marketing pages (/, /bates-numbering/, …) and
   the editor draw their palette, type and spacing from ONE file. Duplicating
   the ramps into a second stylesheet guaranteed drift, and the palette is
   still moving — see docs/design-system.md.

   This file lives inside editor/css/ rather than at the site root on purpose.
   The editor is self-contained: every path inside it is relative, which is why
   moving public/app/ to public/editor/ cost nothing. Keeping tokens here
   preserves that — the marketing pages reach IN (../editor/css/tokens.css),
   the editor never reaches out.

   The font `url()`s below resolve against THIS stylesheet, not against the
   linking document, so `../fonts/ui/…` is correct for every consumer whatever
   directory its HTML sits in. Do not "fix" them into absolute paths.

   Load order does not matter: custom properties resolve at computed-value
   time, so style.css may use a token this file declares regardless of which
   <link> comes first.
   ========================================================================== */

/* ==========================================================================
   Fonts — see fonts/ui/README.md
   Aleo (display/headings) + Lato (working layer). Self-hosted, not a CDN link:
   there is no build step here, and an unpinned remote font is the same class of
   risk as an unpinned CDN script.

   Both families ship `latin` and `latin-ext` as separate files. The two share
   identical unicode-ranges, so latin-ext is fetched ONLY when a character in
   that range actually renders — user-typed config names and PDF filenames,
   essentially. A normal session downloads the latin files alone (~83 KB).

   Aleo is one VARIABLE file spanning the whole weight axis, hence the
   `font-weight: 100 900` range rather than a file per weight. This does not
   contradict docs/overlay-engine.md's "no variable fonts" rule — that rule is
   about pdf-lib embedding for stamp fonts, not about CSS.
   ========================================================================== */

@font-face {
  font-family: 'Aleo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/ui/aleo-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Aleo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/ui/aleo-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ui/lato-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ui/lato-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ui/lato-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ui/lato-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Design tokens
   The three ramps are lifted verbatim from the Figma styles page. Ten steps
   each, named by role and interaction state. Do not invent intermediate values
   — if a shade is missing, add it in Figma first.

   The neutrals marked DERIVED are NOT in Figma. Figma defines only three greys
   (#1a1a1a text, #565656 muted, #e9e9e9) which is not enough for borders,
   surfaces and disabled states. Replace these once a grey ramp exists.
   ========================================================================== */

:root {
  --purple-light:        #ede6ff;
  --purple-light-hover:  #e4d9ff;
  --purple-light-active: #c8b0ff;
  --purple:              #4d00ff;
  --purple-hover:        #4500e6;
  --purple-active:       #3e00cc;
  --purple-dark:         #3a00bf;
  --purple-dark-hover:   #2e0099;
  --purple-dark-active:  #230073;
  --purple-darker:       #1b0059;

  --red-light:           #fce6ef;
  --red-light-hover:     #fad9e6;
  --red-light-active:    #f5b0cc;
  --red:                 #e0005a;
  --red-hover:           #ca0051;
  --red-active:          #b30048;
  --red-dark:            #a80044;
  --red-darker:          #4e001f;

  --green-light:         #e6f2f1;
  --green-light-hover:   #d9ece9;
  --green:               #00816f;
  --green-hover:         #007464;
  --green-active:        #006759;
  --green-dark:          #006153;
  --green-darker:        #002d27;

  --fg:                  #1a1a1a;
  --muted:               #565656;
  --neutral:             #e9e9e9;
  --bg:                  #ffffff;

  /* DERIVED — not from Figma. See note above. */
  --surface:             #f7f7f8;
  --surface-sunken:      #eff0f2;
  --border:              #e2e2e4;
  --border-strong:       #cfcfd3;

  /* The border of an INTERACTIVE control, as opposed to a decorative edge.
     WCAG 1.4.11 requires 3:1 for anything needed to identify a UI component,
     and our fields are white on a #f7f7f8 card — a 1.05:1 fill difference — so
     the border is the only thing that says "this is a field". --border-strong
     manages 1.55:1, which fails.
     #8a8a8a is the value here because it is the lightest neutral that clears
     3:1 on BOTH backgrounds a control sits on (white and --surface). It is
     DERIVED like the four above and wants replacing from a real Figma grey
     ramp — but it is a compliance floor, not a taste choice, so a replacement
     has to be at least this dark. */
  --border-control:      #8a8a8a;

  /* Semantic aliases. Components reference these, not the ramps directly, so a
     palette change is a handful of edits here rather than a sweep of the file. */
  --accent:              var(--purple);
  --accent-hover:        var(--purple-hover);
  --accent-active:       var(--purple-active);
  --accent-soft:         var(--purple-light);
  --accent-ink:          var(--purple-dark);
  --danger:              var(--red);
  --danger-soft:         var(--red-light);
  --danger-ink:          var(--red-dark);
  --go:                  var(--green);
  --go-hover:            var(--green-hover);
  --go-soft:             var(--green-light);
  --go-ink:              var(--green-dark);

  --font-display: 'Aleo', Georgia, 'Times New Roman', serif;
  --font-ui: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius: 8px;
  --radius-sm: 6px;

  /* One height for every interactive control, so a button and the input beside
     it always line up. Applied to buttons AND fields; anything deliberately
     smaller (segment carets, zoom pill, table row actions, colour swatches)
     opts down to --control-h-sm or resets to 0. */
  --control-h: 2.2rem;
  --control-h-sm: 1.75rem;
  --shadow-card: 0 1px 2px rgba(27, 0, 89, .06), 0 4px 16px rgba(27, 0, 89, .05);

  /* One spacing scale. Every gap, card padding and stack rhythm in the panel
     comes from these four steps rather than from a per-component guess — which
     is how the sections ended up visibly differently spaced from one another.
     --space-1 is the caption-to-field gap, --space-2 the gap between controls
     on a row, --space-3 card padding and the gap between cards, --space-4 for
     the roomier settings dialog. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;

  /* Breathing room inside any scroll container, so the 4px focus ring
     (2px outline + 2px offset) is not clipped by the container's own edge and
     controls at the end of a row are not flush against the scrollbar. Always
     paired with a matching negative margin — see .tool-panels. */
  --scroll-gutter: 0.5rem;

  /* Fixed-height shell regions, referenced by the layout maths below. */
  --topbar-h: 5rem;
  --footer-h: 2.25rem; /* holds the undo/redo buttons */

  /* The footer's dark band. #1a1a1a is Figma's text grey used as a surface —
     a new pairing rather than a new value, so it stays inside the "no invented
     shades" rule, but the combinations below should be confirmed in Figma.
     Both are far above AAA on this background (white ≈ 17:1, the pale green
     ≈ 15:1), which is why they were chosen over the mid-ramp steps. */
  --surface-dark: #1a1a1a;
  --on-dark: #ffffff;
  --on-dark-muted: #b9b9bd;
  --on-dark-go: var(--green-light);
}