/**
 * YOUR TYPEFACE AND YOUR COLOURS.
 *
 * Separate from site.config.js on purpose. A stylesheet is fetched and applied
 * before the page paints; a config file read by JavaScript is not. Put the font
 * in the config and every visitor gets a flash of the wrong typeface first,
 * which looks worse than not having the font at all.
 *
 * ---------------------------------------------------------------------------
 * WHAT IS SET UP HERE
 *
 * Roslindale, which ships as two related designs and is meant to be used as
 * two:
 *
 *   Roslindale Text — the body face. Four styles, so italics and bold are the
 *   REAL italic and bold drawn by the designer rather than the browser
 *   mechanically slanting and smearing the regular one. That difference is very
 *   visible at small sizes, and it is most of what you paid for.
 *
 *   Roslindale Display Condensed — the headline face. Bold only, which is all a
 *   display face needs. Used for headings and the hero.
 *
 * To use ONE face everywhere instead, delete the --font-display line near the
 * bottom. Headings then fall back to --font automatically.
 *
 * ADDING OR CHANGING A FILE: drop it in fonts/, copy one @font-face block, and
 * match the filename. Nothing else needs touching — the CSP does not need
 * changing because these are served from your own domain.
 * ---------------------------------------------------------------------------
 */

/* ------------------------------ Roslindale Text ------------------------- */
/* woff2 first: same typeface, roughly a third the size. The woff after it is
   for browsers old enough that you will probably never meet one, and costs
   nothing because a browser only downloads the first format it understands. */

@font-face {
  font-family: 'Roslindale Text';
  src: url('/fonts/RoslindaleText-Regular.woff2') format('woff2'),
       url('/fonts/RoslindaleText-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roslindale Text';
  src: url('/fonts/RoslindaleText-Italic.woff2') format('woff2'),
       url('/fonts/RoslindaleText-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Roslindale Text';
  src: url('/fonts/RoslindaleText-Bold.woff2') format('woff2'),
       url('/fonts/RoslindaleText-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roslindale Text';
  src: url('/fonts/RoslindaleText-BoldItalic.woff2') format('woff2'),
       url('/fonts/RoslindaleText-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ------------------- Roslindale Display Condensed ----------------------- */

@font-face {
  font-family: 'Roslindale Display Condensed';
  src: url('/fonts/RoslindaleDisplayCondensed-Bold.woff2') format('woff2'),
       url('/fonts/RoslindaleDisplayCondensed-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roslindale Display Condensed';
  src: url('/fonts/RoslindaleDisplayCondensed-BoldItalic.woff2') format('woff2'),
       url('/fonts/RoslindaleDisplayCondensed-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/*
 * font-display: swap on every one of them, deliberately. Without it the browser
 * hides the text for up to three seconds while the file downloads — and a schedule
 * nobody can read yet is worse than a schedule in the wrong face for half a second.
 * Swap paints the fallback immediately and changes over when the font arrives.
 */

/* ---------------------------------------------------------------------------
 * THREE SLOTS, and which one you set decides where the typeface appears.
 *
 *   --font-brand    the marketing page's prose, and every heading everywhere.
 *   --font-display  h1 only. A display face is drawn for large sizes.
 *   --font          EVERYTHING, including the app's data screens. Not set below,
 *                   deliberately — see the note under it.
 *
 * The fallbacks after each name are not decoration. They are what a visitor sees
 * on the first paint, and what they keep seeing if the font file never arrives.
 * Georgia is the nearest thing to Roslindale already on most machines, so the
 * swap is barely visible when it happens.
 * ------------------------------------------------------------------------- */
:root {
  --font-brand: 'Roslindale Text', Georgia, 'Times New Roman', serif;
  --font-display: 'Roslindale Display Condensed', 'Roslindale Text', Georgia, serif;

  /* UNCOMMENT THIS to use Roslindale for the app's screens as well, and read
     the paragraph first.

     Roslindale's figures have no foot serif on the 1, which is handsome at
     headline size and ambiguous at the 13px a schedule table renders at: 11:00
     starts to read as ll:00, and a coverage count of 1 as a lowercase L. This
     product is almost entirely times and head-counts, so the default keeps the
     app in the system UI face and gives the brand the marketing page and every
     heading. It is a real trade rather than a rule — if the voice matters more
     to you than the last of the legibility, this is the line. */
  /* --font: 'Roslindale Text', Georgia, 'Times New Roman', serif; */
}

/* ===========================================================================
 *  COLOUR
 *
 *  The named palette, and where each colour ended up:
 *
 *    Deep Harbor      #22354A   primary text, and the dark-mode surface
 *    Atlantic Blue    #3D5E7A   primary actions, links, selected states
 *    Sailcloth        #F5F0E6   the light-mode page
 *    Weathered Paper  #E8DFCF   recessed panels, table headers, schedule cells
 *    Chart Gray       #6A6A63   neutral analytics
 *    Coffee Brown     #65503F   warm accent — preferred shifts
 *    Weathered Blue   #6E87A3   data visualisation
 *    Oxblood          #8D3F46   errors and conflicts only
 *
 *  TWO COLOURS ARE NOT USED EXACTLY AS GIVEN, and both times the reason is
 *  measured contrast rather than taste. Every pair the stylesheet can actually
 *  produce was checked against WCAG AA (4.5:1 for body text); the worst pair in
 *  either theme now sits at 4.51.
 *
 *  Chart Gray as secondary text reaches 4.12:1 on Weathered Paper — under the
 *  line, and Weathered Paper is exactly what sits behind table headers and
 *  schedule cells. --ink-3 is therefore #64645D, a six-percent darkening that
 *  measures 4.51 and is not distinguishable from the original by eye. Chart Gray
 *  itself is kept intact as --neutral, for analytics, where it is a fill rather
 *  than a letterform.
 *
 *  Weathered Blue reaches only 3.27:1 on Sailcloth and 2.81 on Weathered Paper.
 *  That is fine for its stated job — a bar or a line in a chart is a shape, and
 *  the bar for AA is 3:1 — and it is why it is --chart and never text.
 *
 *  One colour is added: --surface, #FDFBF6. A page, a card and a recessed panel
 *  are three depths and the palette gives two neutrals. It is Sailcloth lifted a
 *  little, so cards sit above the page rather than dissolving into it.
 * ======================================================================== */

:root {
  --bg: #F5F0E6;              /* Sailcloth */
  --surface: #FDFBF6;         /* Sailcloth, lifted — see the note above */
  --sunk: #E8DFCF;            /* Weathered Paper */

  --ink: #22354A;             /* Deep Harbor */
  --ink-2: #3E5162;           /* Harbor, softened, for secondary text */
  --ink-3: #64645D;           /* Chart Gray, darkened to clear AA */

  --line: #DCD3C2;
  --line-2: #C4B9A5;

  --accent: #3D5E7A;          /* Atlantic Blue */
  --accent-ink: #FFFFFF;      /* 6.82:1 — the text ON the accent */
  --accent-soft: #DDE5EC;

  --warm: #65503F;            /* Coffee Brown */
  --warm-soft: #EDE2D5;
  --chart: #6E87A3;           /* Weathered Blue — fills, never letters */
  --neutral: #6A6A63;         /* Chart Gray, exactly as given */
  --bad: #8D3F46;             /* Oxblood */
}

/*
 * Dark mode, derived from the same palette rather than a second one. Deep
 * Harbor becomes the card and Sailcloth becomes the text, which is the same
 * relationship turned over.
 *
 * The accent has to change: Atlantic Blue on a Deep Harbor card is 1.6:1, near
 * invisible. It lightens along its own hue instead. This is the trap in every
 * hand-picked palette — a colour chosen against white has no obligation to work
 * against anything else, and nothing warns you.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --bg: #16222E;
    --surface: #22354A;       /* Deep Harbor */
    --sunk: #2B4058;

    --ink: #F5F0E6;           /* Sailcloth */
    --ink-2: #C6D0DA;
    --ink-3: #9FADBB;

    --line: #33475E;
    --line-2: #465C74;

    --accent: #93AEC8;        /* Atlantic Blue, lightened to carry on dark */
    --accent-ink: #16222E;
    --accent-soft: #2A4059;

    --warm: #C4A488;          /* Coffee Brown, lightened */
    --warm-soft: #3A2E24;
    --chart: #8FA6BF;
    --neutral: #9C9C93;
    --bad: #D69199;           /* Oxblood, lightened */
  }
}