/* Graphite & glass: the site's tokens. Every colour, size, radius and curve
   the other stylesheets use is named here, once, by what it is for.

   The palette is the apps' own (Apple's Pro apps at night): near-neutral
   graphite, labels in opacity tiers, and the app icon's blue as the only
   accent beside the status colours. The site follows the visitor's
   appearance setting; both themes are tuned so every text pair passes AA.

   The terminal surface is not themed, here or in the apps: it paints the
   shared Campbell scheme (#0C0C0C) in both themes, so a session looks the
   same on every client. */

/* Inter with its optical-size axis, self-hosted (the CSP is 'self'). Apple
   devices get SF Pro first; everyone else gets Inter Display at large sizes. */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-latin-opsz-normal.woff2") format("woff2-variations"),
    url("fonts/inter-latin-opsz-normal.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: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-latin-ext-opsz-normal.woff2") format("woff2-variations"),
    url("fonts/inter-latin-ext-opsz-normal.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: dark;

  /* ------------------------------------------------------------ colour --- */

  --base: #121315; /* the room: the page itself */
  --well: #0c0d0f; /* sunken: behind pictures, inside fields */
  --surface: #1a1b1e; /* grouped rows and panels */
  --elevated: #232427; /* what floats: sheets, menus, the chosen tier */
  --fill: rgba(118, 118, 128, 0.24); /* a control's own fill */
  --fill-2: rgba(118, 118, 128, 0.16);
  --material: rgba(30, 31, 34, 0.72);
  --material-thick: rgba(26, 27, 30, 0.86);
  --material-blur: blur(24px) saturate(1.6);
  --highlight: inset 0 0.5px 0 rgba(255, 255, 255, 0.08);

  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.14);

  --label: #f5f5f7;
  --label-2: rgba(235, 235, 245, 0.62);
  /* Running text that is read at length: brighter than a secondary label. */
  --label-body: rgba(235, 235, 245, 0.8);
  /* Below AA as text: placeholders, disabled controls and decoration only. */
  --label-3: rgba(235, 235, 245, 0.4);
  --label-4: rgba(235, 235, 245, 0.18);

  --tint: #2e9bff;
  --tint-fill: rgba(46, 155, 255, 0.16);
  --tint-line: rgba(46, 155, 255, 0.42);
  /* A button's fill: deep enough that white on it passes AA. */
  --accent-fill: #0a70e0;
  --accent-fill-hover: #0b74e6;
  --on-accent: #ffffff;

  --green: #5fd6bf;
  --green-ink: #6fdcc6;
  --green-fill: rgba(95, 214, 191, 0.14);
  --green-glow: rgba(95, 214, 191, 0.4);
  --orange: #ff9f0a;
  --orange-fill: rgba(255, 159, 10, 0.14);
  --red: #ff453a;
  --red-fill: rgba(255, 69, 58, 0.14);


  --shadow-float: 0 1px 1px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.32), 0 24px 64px rgba(0, 0, 0, 0.4);
  --shadow-device: 0 1px 1px rgba(0, 0, 0, 0.4), 0 20px 40px -12px rgba(0, 0, 0, 0.6),
    0 60px 120px -40px rgba(0, 0, 0, 0.75);

  --term-bg: #0c0c0c;
  --term-fg: #cccccc;

  /* -------------------------------------------------------------- type --- */

  --font: -apple-system, BlinkMacSystemFont, "Inter Variable", "Inter", "Segoe UI Variable Text", "Segoe UI",
    system-ui, sans-serif;
  --mono: "Cascadia Mono", "Cascadia Code", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Sizes with their tracking, from Inter's dynamic metrics
     (-0.0223em + 0.185em * e^(-0.1745 * px)): tighter as type grows. */
  --display: clamp(2.75rem, 1.55rem + 4.4vw, 5.25rem);
  /* Every page but home opens on this: a step above a section's title. */
  --title-page: clamp(2.5rem, 1.6rem + 2.6vw, 3.5rem);
  --title-1: clamp(2rem, 1.35rem + 2.3vw, 3rem);
  --title-2: 1.75rem;
  --title-3: 1.375rem;
  --headline: 1.0625rem;
  --lede: clamp(1.1875rem, 1rem + 0.5vw, 1.375rem);
  --body: 1.0625rem;
  --callout: 0.9375rem;
  --footnote: 0.8125rem;
  --caption: 0.75rem;
  --track-display: -0.022em;
  --track-title: -0.021em;
  --track-title-3: -0.018em;
  --track-body: -0.013em;
  --track-callout: -0.009em;
  --track-footnote: -0.003em;

  /* ------------------------------------------------------------ layout --- */

  --shell: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --measure: 68ch;
  --masthead: 52px;

  /* Concentric radii: an inner corner is the outer one less its padding. */
  --r-control: 6px;
  --r-button: 10px;
  --r-group: 14px;
  --r-panel: 20px;
  --r-screen: 28px;
  --r-pill: 999px;

  /* ------------------------------------------------------------ motion --- */

  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  /* Where linear() is unknown, the springs fall back to the house curve. */
  --spring-snappy: var(--ease-out-soft);
  --spring-gentle: var(--ease-out-soft);
  --spring-lift: var(--ease-out-soft);
  --lift: 420ms;
  --spring-snappy-ms: 350ms;
  --spring-gentle-ms: 500ms;
  --press-in: 0s;
  --fast: 180ms;
  --slow: 520ms;
}

/* A stiff spring (about 2% overshoot) and a soft one (none), sampled. */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring-snappy: linear(0, 0.0424, 0.1432, 0.2719, 0.4075, 0.5367, 0.6518, 0.7494, 0.8286, 0.8904, 0.9367,
      0.9699, 0.9925, 1.0069, 1.0152, 1.019, 1.0199, 1.0189, 1.0168, 1.0142, 1.0115, 1.0089, 1.0067, 1.0048,
      1.0032, 1.0021, 1.0012, 1.0005, 1);
    --spring-gentle: linear(0, 0.0437, 0.1418, 0.2602, 0.3797, 0.4905, 0.588, 0.6709, 0.7397, 0.7958, 0.841,
      0.8769, 0.9051, 0.9272, 0.9444, 0.9577, 0.9679, 0.9757, 0.9816, 0.9862, 0.9896, 0.9922, 0.9942, 0.9956,
      0.9967, 0.9976, 0.9982, 0.9987, 1);
    /* A spring with 3% overshoot, settled by 420ms (--lift): the hero icon's
       assembly. */
    --spring-lift: linear(0, 0.068, 0.221, 0.401, 0.573, 0.719, 0.834, 0.916, 0.972, 1.005, 1.023, 1.029, 1.029,
      1.026, 1.021, 1.015, 1.01, 1.006, 1.004, 1.002, 1, 1, 0.999, 0.999, 1);
  }
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --base: #f5f5f7;
    --well: #ebebef;
    --surface: #ffffff;
    --elevated: #ffffff;
    --fill: rgba(118, 118, 128, 0.12);
    --fill-2: rgba(118, 118, 128, 0.08);
    --material: rgba(250, 250, 252, 0.72);
    --material-thick: rgba(250, 250, 252, 0.92);
    --highlight: inset 0 0.5px 0 rgba(255, 255, 255, 0.7);

    --hairline: rgba(0, 0, 0, 0.08);
    --hairline-strong: rgba(0, 0, 0, 0.14);

    --label: #1d1d1f;
    --label-2: rgba(60, 60, 67, 0.74);
    --label-body: rgba(29, 29, 31, 0.86);
    --label-3: rgba(60, 60, 67, 0.42);
    --label-4: rgba(60, 60, 67, 0.18);

    --tint: #0066cc;
    --tint-fill: rgba(0, 113, 227, 0.1);
    --tint-line: rgba(0, 113, 227, 0.34);
    --accent-fill: #0071e3;
    --accent-fill-hover: #0062c4;

    --green: #0f9c82;
    --green-ink: #097362;
    --green-fill: rgba(15, 156, 130, 0.1);
    --green-glow: rgba(15, 156, 130, 0.3);
    --orange: #a85a00;
    --orange-fill: rgba(168, 90, 0, 0.1);
    --red: #d1281e;
    --red-fill: rgba(212, 42, 32, 0.08);


    --shadow-float: 0 1px 1px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.08), 0 24px 64px rgba(0, 0, 0, 0.1);
    --shadow-device: 0 1px 1px rgba(0, 0, 0, 0.06), 0 20px 40px -12px rgba(0, 0, 0, 0.18),
      0 60px 120px -40px rgba(0, 0, 0, 0.28);
  }
}