/* SageArchive — the brand layer, for sagearchive.com.
 *
 * Authored from "The SageArchive design guide", v2, September 2026
 * (design_handoff_sagearchive_redesign/SageArchive Design Guide.pdf).
 *
 * WHY THIS FILE EXISTS, AND WHAT IT IS NOT
 *
 * The guide splits the system in two: brand is fixed, theme is the user's.
 * Brand is the mark, the app icon, sagearchive.com, the App Store listing and
 * every printed PDF — one colour, one ground, everywhere. Theme is the reading
 * surface inside the app window (Slate, Clay, Cobalt, Ivory) and it stops at
 * the window edge.
 *
 * The website is the brand layer ONLY. It never carries a theme, so there is
 * no theme switch here and there must never be one — a visitor is not a user
 * and has nothing to have picked. This file used to be two files copied out of
 * sagearchive-design-system/ (tokens.css + type.css), which carried the whole
 * app: four themes, six speaker colours, sidebar geometry, row heights. That
 * tree was deleted in #72 and the copies went stale in place — they still said
 * Archivo, Literata and viridian while the site said otherwise. That is the
 * bug this file closes. The site's brand is stated here, once, in full.
 *
 * Slate is both: the brand colour is also the default theme's accent, so the
 * window someone opens after downloading is the same colour as the page they
 * downloaded it from.
 */

/* ── Typefaces ──────────────────────────────────────────────────────────────
 * Work Sans carries what the app says. Petrona carries what the user said or
 * wrote. JetBrains Mono carries machine output and nothing a person authored.
 * All three are SIL OFL 1.1.
 *
 * Served from this origin, not from Google. The one claim this whole site is
 * making is that nothing leaves your Mac; fetching the type for that sentence
 * from a third party undercuts the sentence. It also drops two DNS lookups and
 * a render-blocking stylesheet off the critical path. Variable fonts, so one
 * file per family and subset covers the whole weight axis.
 * ───────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(./fonts/work-sans-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: 'Work Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(./fonts/work-sans-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;
}
@font-face {
  font-family: 'Petrona';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(./fonts/petrona-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: 'Petrona';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(./fonts/petrona-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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(./fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(./fonts/jetbrains-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 {
  color-scheme: light;

  --sa-font-ui: 'Work Sans', system-ui, -apple-system, sans-serif;
  --sa-font-display: 'Work Sans', system-ui, -apple-system, sans-serif;
  --sa-font-read: 'Petrona', Georgia, 'Times New Roman', serif;
  --sa-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── The brand palette ────────────────────────────────────────────────────
   * Five colours. That is the whole brand palette. Guide §02.
   * These five names are the guide's own; nothing else on this site is
   * allowed to introduce a sixth colour.
   * ─────────────────────────────────────────────────────────────────────── */

  --sa-brand:         #35528C;  /* Slate    — accent, links, fills. The one interactive colour. */
  --sa-brand-ground:  #161C28;  /* Midnight — icon tile, site hero, site footer, print rules.   */
  --sa-brand-paper:   #FDFDFE;  /* Paper    — reading plane, printed page, the site body.       */
  --sa-brand-chrome:  #EDEFF4;  /* Fog      — chrome and secondary panes.                       */
  --sa-brand-ink:     #14181F;  /* Graphite — body ink at full strength.                        */

  /* ── Surfaces on Paper ────────────────────────────────────────────────────
   * The body of the site is the Slate theme's light plane, so the page a
   * visitor reads and the window they open after downloading are the same
   * surface. Values from the guide's Slate table, §05.
   * ─────────────────────────────────────────────────────────────────────── */

  --sa-bg: var(--sa-brand-paper);   /* #FDFDFE — the page */
  --sa-canvas: var(--sa-brand-chrome); /* #EDEFF4 — secondary panes, closing CTA */
  --sa-surface: #FFFFFF;            /* fields, raised cards */
  --sa-sunken: #F6F7FA;             /* inset wells, the ledger total row */

  /* Borders are decorative and exempt from AA. Deliberately faint. */
  --sa-border: #DFE2EA;
  --sa-border-strong: #CDD2DD;

  /* Text. Ratios are against the surface each one actually sits on. */
  --sa-text-1: var(--sa-brand-ink); /* #14181F — 17.50 on Paper, 15.47 on Fog. Titles, body. */
  --sa-text-2: #4E5563;             /*            7.37 on Paper,  6.51 on Fog. Secondary.     */
  --sa-text-3: #5C6472;             /*            5.87 on Paper,  5.18 on Fog. Captions.      */

  /* The accent has one job: marking what responds to a click. Not emphasis,
     not decoration. If a Slate element does nothing when clicked, that is a
     bug. Guide §02. */
  --sa-accent: var(--sa-brand);     /* 7.55 on Paper, 6.67 on Fog */
  --sa-accent-quiet: #E8EDF7;       /* background only, never text */
  --sa-accent-text: #2B4478;        /* 8.13 on --sa-accent-quiet */
  --sa-accent-on: var(--sa-brand-paper); /* 7.55 on Slate — button label */

  /* ── On Midnight ──────────────────────────────────────────────────────────
   * The hero and footer are Midnight grounds. Slate is never used on Midnight
   * — the accent has too little contrast against that ground (2.22:1). Type on
   * Midnight is Paper at graded opacity, and anything interactive up there is
   * Paper, underlined or filled, never Slate. Guide §02, §03.
   * ─────────────────────────────────────────────────────────────────────── */

  --sa-on-ground-1: var(--sa-brand-paper);        /* 16.78 on Midnight — headings */
  --sa-on-ground-2: rgba(253, 253, 254, .78);     /* 10.60 — body on the hero     */
  --sa-on-ground-3: rgba(253, 253, 254, .62);     /*  7.15 — captions, footer     */
  --sa-on-ground-line: rgba(253, 253, 254, .16);  /* hairlines on Midnight       */

  /* ── Radii ─────────────────────────────────────────────────────────────────
   * 5 / 7 / 11. Guide §11 — was 2 / 6 / 9 under The Index.
   * ─────────────────────────────────────────────────────────────────────── */

  --sa-radius-sm: 5px;
  --sa-radius: 7px;
  --sa-radius-lg: 11px;

  /* ── Space ─────────────────────────────────────────────────────────────── */

  --sa-space-1: 2px;
  --sa-space-2: 4px;
  --sa-space-3: 8px;
  --sa-space-4: 12px;
  --sa-space-5: 16px;
  --sa-space-6: 20px;
  --sa-space-7: 24px;
  --sa-space-8: 32px;
  --sa-space-9: 40px;

  /* ── Motion ───────────────────────────────────────────────────────────────
   * Nothing moves in space. Motion explains state; it never decorates.
   * Guide §09. The site only ever needs the hover duration.
   * ─────────────────────────────────────────────────────────────────────── */

  --sa-dur-hover: 80ms;
  --sa-dur-view: 100ms;
  --sa-ease: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* ── Measure ──────────────────────────────────────────────────────────────
   * 62–66ch on the site. Guide §06. The app's reading measure is 700px; a
   * marketing page is wider-gutted than an app window, so it is set in ch
   * against the reading face rather than in px.
   * ─────────────────────────────────────────────────────────────────────── */

  --sa-measure: 64ch;
  --sa-measure-tight: 62ch;
  --sa-measure-wide: 66ch;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sa-dur-hover: 0ms;
    --sa-dur-view: 0ms;
  }
}