/* Skolo brand tokens — the single source of truth for colour and type.
   Scheme: "The Overlap", clay on cream. The Modern Academic palette
   (navy #003049, sky #669bbc, amber #f7c548) and every Tailwind-stock grey
   are retired. Load this before any component CSS.

   Familjen Grotesk is self-hosted rather than fetched from Google Fonts: it is
   a variable font, so one 19KB file covers 400-600, and it removes a
   render-blocking third-party request on the slow connections our schools use.
*/

@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/familjen-grotesk-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: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/familjen-grotesk-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;
}

:root {
  /* Brand */
  --skolo-clay: #A84B2A;         /* ACTION ONLY: buttons, links, the mark's lens */
  --skolo-clay-hover: #96431F;
  --skolo-clay-pressed: #8E3D21;
  --skolo-clay-light: #D9744A;   /* clay on dark grounds only (contrast) */
  --skolo-clay-wash: rgba(168, 75, 42, 0.06);
  --skolo-ink: #2B2622;          /* body text, rings, rules */
  --skolo-ink-deep: #1C1815;     /* full-bleed dark sections, sidebar */
  --skolo-cream: #F4EFE9;        /* page ground */
  --skolo-surface: #EFE8E0;      /* table headers, inset panels */
  --skolo-text-muted: #6B615A;   /* labels, captions, meta */
  --skolo-hairline: #E0D7CC;     /* dividers, table rules, input borders */

  /* Data states — the only place red, green and amber may appear */
  --skolo-paid: #2F6B4F;
  --skolo-due: #B8791F;
  --skolo-arrears: #A3122B;

  /* ── Extensions ────────────────────────────────────────────────────────
     Not in the handoff. The product needs tiers the brand sheet does not
     define: a card ground distinct from the page, a third text weight, and
     tinted grounds for status badges. Each is derived from a token above and
     stays inside the clay-on-cream family. Do not add more without a reason.  */
  --skolo-card: #FFFFFF;         /* cards sit above the cream ground */
  --skolo-ink-soft: #4A423C;     /* table cells, secondary body */
  --skolo-text-faint: #706459;   /* placeholders, disabled, timestamps */
  --skolo-paid-tint: #DDE8E1;
  --skolo-paid-tint-soft: #EDF3EF;
  --skolo-paid-edge: #A9C7B6;
  --skolo-due-tint: #F7EBD5;
  --skolo-due-ink: #8A5A10;      /* due text on a due tint needs more weight */
  --skolo-arrears-tint: #F2DADE;
  --skolo-arrears-tint-soft: #FAF0F1;
  --skolo-arrears-edge: #D99AA4;

  /* Type */
  --skolo-font: 'Familjen Grotesk', system-ui, sans-serif;
  --skolo-weight-normal: 400;
  --skolo-weight-medium: 500;
  --skolo-weight-semibold: 600;

  /* Radius — one value, everywhere */
  --skolo-radius: 4px;
  --skolo-radius-icon: 26px; /* app icon only */
}

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

body {
  background: var(--skolo-cream);
  color: var(--skolo-ink);
  font-family: var(--skolo-font);
  font-weight: var(--skolo-weight-normal);
  -webkit-font-smoothing: antialiased;
}
input, select, textarea, button { font-family: inherit; }

a { color: var(--skolo-clay); text-underline-offset: 3px; }
a:hover { color: var(--skolo-clay-hover); }

/* Focus is clay, never browser blue. */
:focus-visible { outline: 2px solid var(--skolo-clay); outline-offset: 2px; }
input:focus, select:focus, textarea:focus {
  border-color: var(--skolo-clay) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--skolo-clay-wash);
}

/* Primary action: outlined, not filled. No gradients anywhere in the brand. */
.skolo-btn {
  font: inherit;
  font-weight: var(--skolo-weight-medium);
  color: var(--skolo-clay);
  background: transparent;
  border: 1px solid var(--skolo-clay);
  border-radius: var(--skolo-radius);
  padding: 10px 20px;
  cursor: pointer;
}
.skolo-btn:hover { background: var(--skolo-clay-wash); color: var(--skolo-clay-hover); }
.skolo-btn:active { color: var(--skolo-clay-pressed); border-color: var(--skolo-clay-pressed); }
.skolo-btn:focus-visible { outline: 2px solid var(--skolo-clay); outline-offset: 2px; }

/* Tabular figures wherever money, marks, dates or learner counts appear. */
.skolo-num, table, .amount, .mark, .count { font-variant-numeric: tabular-nums; }

/* Header lockup: mark as SVG, wordmark as real text in the font the page loads. */
.skolo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;              /* clear space: never less than one ring radius */
  text-decoration: none;
}
.skolo-lockup span {
  font-family: var(--skolo-font);
  font-weight: var(--skolo-weight-semibold);
  font-size: 24px;        /* minimum 20px; below that use the mark alone */
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--skolo-ink);
}
.skolo-lockup--reversed span { color: var(--skolo-cream); }