/* Aldorock design tokens. Every value a component uses lives here.
   DESIGN.md explains each token; components.html reads them and nothing else.
   Fonts: Public Sans (SIL OFL 1.1, fonts/OFL.txt), self-hosted from fonts/. */

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/PublicSans-normal-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: "Public Sans";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/PublicSans-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Public Sans";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/PublicSans-italic-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: "Public Sans";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/PublicSans-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---- Colour. Contrast ratios in DESIGN.md §3.1. ---- */
  --page: #FFFFFF;          /* the page */
  --panel: #F1F3F5;         /* a grey band or panel face */
  --panel-2: #E3E7EB;       /* a sunken or disabled face */
  --line: #D9DEE4;          /* hairlines that part rows and cells (no contrast duty) */
  --line-ctl: #5F6B7A;      /* the edge of a control: 5.43 on page, 4.37 on panel-2 */
  --rule: #0F1D2E;          /* the 2 px rule above a section, a table's head rule */

  --ink: #0F1D2E;           /* text; 17.0 on page */
  --ink-2: #46525F;         /* secondary text, fact keys, table heads; 7.98 on page, 6.42 on panel-2 */
  --ink-3: #566270;         /* placeholder and disabled text; 6.22 on page, 5.00 on panel-2 */

  --brand: #0B3D6E;         /* links, the current marker, the focus ring, the active status; white on it 11.0 */
  --brand-hover: #072A4D;   /* a hovered link */
  --on-ink: #FFFFFF;        /* text on the primary button; 17.0 on ink */
  --ink-hover: #243448;     /* a hovered primary button; white on it 12.2 */
  --on-brand: #FFFFFF;      /* text on a brand-filled marker (a checked box) */
  --underline: #8A95A3;     /* the underline of a link in running text (decorative) */

  --ok: #1E6B3A;            /* the marker; white on it 6.52 */
  --ok-text: #1B5E33;       /* the word; 7.79 on page */
  --warn: #B86E00;          /* the marker (3.99 on page, non-text) */
  --warn-text: #7A4A00;     /* the word; 7.48 on page */
  --bad: #B42318;           /* the marker; white on it 6.57 */
  --bad-text: #A11D14;      /* the word; 7.77 on page */
  --neutral: #5F6B7A;       /* the marker for "not started" */

  --focus: #0B3D6E;         /* the focus ring on light grounds */
  --focus-on-ink: #FFFFFF;  /* the focus ring on an ink face */
  --selection: #D6E2F0;     /* text selection and the selected table row (ink on it 13.1) */

  /* ---- Type. One face. ---- */
  --font: "Public Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --fs-display: 48px; --lh-display: 54px;   /* the website's one headline per page */
  --fs-h1: 32px;      --lh-h1: 40px;        /* a page or document title */
  --fs-h2: 24px;      --lh-h2: 32px;        /* a numbered section */
  --fs-h3: 18px;      --lh-h3: 26px;        /* a panel's or table's title */
  --fs-body: 17px;    --lh-body: 26px;      /* website reading text */
  --fs-ui: 15px;      --lh-ui: 22px;        /* product text, tables, fields, buttons */
  --fs-small: 14px;   --lh-small: 20px;     /* fact keys, captions, footer */
  --fs-caption: 13px; --lh-caption: 18px;   /* a source line, a table's note */
  --fs-wordmark: 20px; --lh-wordmark: 24px; /* the wordmark in the band */
  --fw-regular: 400;
  --fw-semibold: 600;                       /* buttons, labels, fact keys, table heads */
  --fw-bold: 700;                           /* a figure that is the point of a screen; not used for headings */
  --ls-display: -0.02em;
  --ls-h1: -0.015em;
  --ls-normal: 0;
  --measure: 68ch;                          /* the longest reading line */

  /* ---- Space on a 4 px base. ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --gutter: 16px;                           /* page gutter below 600 px; 24 and 40 above, see @media below */
  --w-content: 1120px;                      /* the content column */
  --w-label: 200px;                         /* the key column of a full-width fact list */
  --w-label-sm: 120px;                      /* the key column inside a panel */
  --w-narrow: 560px;                        /* a form's or a dialog's width */
  --bp-phone: 600px;                        /* breakpoints; media queries repeat the numbers because CSS cannot read a variable there */
  --bp-tablet: 800px;
  --bp-desktop: 1000px;

  /* ---- Shape and line. ---- */
  --r: 0px;                                 /* every corner */
  --bw-1: 1px;                              /* hairlines, field edges */
  --bw-2: 2px;                              /* section rules, the current item's bar, the focus ring */
  --bw-3: 3px;                              /* the menu's current-row bar */
  --marker: 8px;                            /* a square marker: status, bullet, the wordmark's square */
  --control: 44px;                          /* the height of a button or a field, and the smallest target */
  --band: 64px;                             /* the header line */
  --check: 20px;                            /* a check box or a radio */
  --shadow-float: 0 2px 8px rgba(15, 29, 46, 0.18); /* only a menu or a dialog that floats */

  /* ---- Motion. Transform and opacity only, nothing loops. ---- */
  --dur-1: 100ms;                           /* a state change: hover, press, focus */
  --dur-2: 180ms;                           /* something that enters or leaves */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
}

@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 1000px) { :root { --gutter: 40px; } }
@media (max-width: 599px) {
  :root { --fs-display: 32px; --lh-display: 38px; --fs-h1: 26px; --lh-h1: 32px; --fs-h2: 21px; --lh-h2: 28px; }
}
@media (prefers-reduced-motion: reduce) { :root { --dur-1: 0ms; --dur-2: 0ms; } }