/* Starling design tokens and font faces.

   Naming is load-bearing: web/tests/test_templates.py computes WCAG contrast for
   every --text-* colour against every --bg-* colour (>= 4.5:1), every --ui-*
   colour against every --bg-* colour (>= 3:1), and every --NAME-fg / --NAME-bg
   pair (>= 4.5:1). Keep these tokens as 6-digit hex values.

   The palette is the original Starling landing page's: black ground, warm cream
   ink, cool greys, hairline borders. Two of its greys were too dark for text, so
   they are split here: --text-faint is the lightened, AA-safe version, and
   --deco-faint keeps the original value for decoration only. */

/* ---------- font faces ----------
   Self-hosted WOFF2 files in ../fonts/ (../fonts/README.md lists them, their source and the
   licence texts that ship with them). The URLs are relative to this file, so they do not pass
   through the template helper. Every file is a Latin subset: a character outside the range
   below (the four-point star used as the Starling mark, for one) is drawn by the next family
   in the stack. IBM Plex Sans is one variable file that covers weights 400 to 600. */
@font-face {
  font-family: "Chakra Petch";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/chakra-petch-500.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: "Chakra Petch";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/chakra-petch-600.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: "Chakra Petch";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/chakra-petch-700.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: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-variable.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: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400.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: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500.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;
}

:root {
  color-scheme: dark;

  /* backgrounds */
  --bg-page: #000000;
  --bg-surface: #050505;
  --bg-raised: #0c0c0d;
  --bg-input: #070707;
  --bg-warning: #171307;
  --bg-error: #1e0d0e;
  --bg-success: #0a1710;

  /* text */
  --text-primary: #faf8f3;
  --text-secondary: #dad7cf;
  --text-muted: #9a9d9f;
  --text-faint: #7b7f84;
  --text-link: #dad7cf;
  --text-error: #ff8f8f;
  --text-success: #7ee2a8;
  --text-warning: #ffd166;

  /* paired foreground / background */
  --button-bg: #faf8f3;
  --button-fg: #000000;
  --danger-bg: #ff8f8f;
  --danger-fg: #000000;
  --mark-bg: #ffd166;
  --mark-fg: #000000;
  --badge-bg: #faf8f3;
  --badge-fg: #000000;
  --meter-bg: #faf8f3;
  --meter-fg: #000000;

  /* non-text UI (3:1) */
  --ui-focus: #faf8f3;
  --ui-border-strong: #62666b;
  --ui-meter-fill: #faf8f3;

  /* decoration only: never the sole carrier of information, never body text */
  --line: #212428;
  --line-soft: #1a1c1f;
  --deco-faint: #5d6166;
  --soft: rgba(255, 255, 255, .04);
  --glow: rgba(250, 248, 243, .18);

  /* type: the three Starling families, then the closest system faces */
  --font-display: "Chakra Petch", "Bahnschrift", "DIN Alternate", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, "Noto Sans", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.375rem;
  --step-3: clamp(1.5rem, 1.25rem + 1vw, 1.9rem);
  --step-4: clamp(1.9rem, 1.3rem + 2.4vw, 2.6rem);
  --step-5: clamp(2.1rem, 1.2rem + 3.8vw, 3.8rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 18px;
  --touch: 44px;
  --measure: 68ch;
  --wrap: 1160px;
  --header-h: 77px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}