/* Copied by lomnes-portal/tools/sync-brand.py from newco brand/ds/styles.css.
   Do not hand-edit here: fix the token in newco and re-sync. */

/* Stephen Lomnes Consulting. Generated from brand/tokens.json by
   brand/tools/build-ds-styles.py. Do not hand-edit: fix the token. */

@font-face {
  font-family: "Literata";
  src: url("fonts/Literata.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Italic.woff2") format("woff2");
  font-weight: 100 800;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Palette. Bind to a role below where one exists. */
  --color-brand-accent:         #F3B3A6;
  --color-brand-deep:           #153131;
  --color-brand-primary:        #016FB9;
  --color-brand-primary-dark:   #014E82;
  --color-brand-tint:           #A2D6F9;
  --color-brand-warm:           #563635;
  --color-chart-series1:        #016FB9;
  --color-chart-series2:        #153131;
  --color-chart-series3:        #F3B3A6;
  --color-chart-series4:        #563635;
  --color-chart-series5:        #A2D6F9;
  --color-ink-default:          #153131;
  --color-ink-inverse:          #FFFFFF;
  --color-ink-muted:            #4A6363;
  --color-ink-on-tint:          #153131;
  --color-signal-caution:       #B4611F;
  --color-signal-negative:      #A8392B;
  --color-signal-positive:      #1F6F5C;
  --color-surface-alt:          #F2F8FD;
  --color-surface-border:       #D6E4F0;
  --color-surface-default:      #FFFFFF;
  --color-surface-inverse:      #153131;

  /* Roles, light. The page default. */
  --page-surface:               var(--color-surface-default);
  --page-ink:                   var(--color-ink-default);
  --page-ink-muted:             var(--color-ink-muted);
  --page-link:                  var(--color-brand-primary);
  --page-link-hover:            var(--color-brand-primary-dark);
  --page-focus:                 var(--color-brand-primary);

  /* Type */
  --font-heading:               "Literata", "Georgia", serif;
  --font-body:                  "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:                  "JetBrains Mono", ui-monospace, monospace;
  --weight-regular:             400;
  --weight-medium:              500;
  --weight-semibold:            600;
  --weight-bold:                700;
  --text-xs:                    0.75rem;
  --text-sm:                    0.875rem;
  --text-base:                  1rem;
  --text-lg:                    1.125rem;
  --text-xl:                    1.375rem;
  --text-2xl:                   1.75rem;
  --text-3xl:                   2.25rem;
  --text-4xl:                   3rem;
  --leading-tight:              1.15;
  --leading-snug:               1.35;
  --leading-normal:             1.6;
  --space-1:                    4px;
  --space-2:                    8px;
  --space-3:                    12px;
  --space-4:                    16px;
  --space-6:                    24px;
  --space-8:                    32px;
  --space-12:                   48px;
  --space-16:                   64px;
  --space-24:                   96px;
  --radius-sm:                  2px;
  --radius-md:                  4px;
  --radius-lg:                  8px;
  --shadow-card:                0 1px 2px rgba(21,49,49,0.06), 0 4px 12px rgba(21,49,49,0.05);
  --measure:                    68ch;
}

/* The deep ground. Put data-scheme="dark" on any section to flip its roles.
   There is no muted tier here: --page-ink-muted resolves to white on purpose. */
[data-scheme="dark"] {
  color-scheme: dark;
  --page-surface:               var(--color-surface-inverse);
  --page-ink:                   var(--color-ink-inverse);
  --page-ink-muted:             var(--color-ink-inverse);
  --page-link:                  var(--color-brand-tint);
  --page-link-hover:            var(--color-ink-inverse);
  --page-focus:                 var(--color-brand-tint);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page-surface);
  color: var(--page-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
[data-scheme="dark"] { background: var(--page-surface); color: var(--page-ink); }

h1, h2, h3 { font-family: var(--font-heading); margin: 0 0 var(--space-4); }
h1 { font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: -0.01em; }
h2 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
h3 { font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
p { max-width: var(--measure); margin: 0 0 var(--space-4); }
small, .caption { font-size: var(--text-sm); color: var(--page-ink-muted); }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.875em; }

a { color: var(--page-link); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { color: var(--page-link-hover); }
:focus-visible { outline: 2px solid var(--page-focus); outline-offset: 2px; }

table { border-collapse: collapse; width: 100%; }
th, td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-surface-border); text-align: left; }
th { font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.04em; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Buttons. Two styles and no third. On the deep ground use .btn-secondary. */
.btn-primary, .btn-secondary {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid var(--page-link);
  text-decoration: none;
  cursor: pointer;
}
.btn-primary { background: var(--color-brand-primary); border-color: var(--color-brand-primary); color: var(--color-ink-inverse); }
.btn-primary:hover { background: var(--color-brand-primary-dark); border-color: var(--color-brand-primary-dark); color: var(--color-ink-inverse); }
.btn-secondary { background: transparent; color: var(--page-link); }
.btn-secondary:hover { color: var(--page-link-hover); border-color: var(--page-link-hover); }