/*
  Design tokens, ported from the app so the site and the UI rebuilt on it
  share one source of colour and type.

  Source of truth: benjisg/rework
    Sources/UI/DesignSystem/Assets.xcassets/*.colorset   (surfaces, ink, hues)
    Sources/UI/DesignSystem/Theme.swift                   (type scale, spacing)
    docs/specs/design-system.md                           (roles and usage)

  When the app changes a token, change it here too.
*/

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin-opsz-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin-opsz-italic.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-italic.woff2") format("woff2-variations");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
}

:root {
  /* The app's three faces. On a Mac the system faces win, so visitors see
     New York, SF Pro, and SF Mono exactly as the app draws them. Elsewhere
     the self-hosted fallbacks stand in; nothing is fetched from a font CDN. */
  --font-serif: ui-serif, "New York", "Newsreader", Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Brand ramp, from the logo, always in this order. */
  --ramp-blue: #2563eb;
  --ramp-indigo: #6347eb;
  --ramp-purple: #963cdc;
  --ramp-magenta: #db2777;
  --ramp-coral-red: #ff6b4a;
  --ramp-amber: #f59e0b;
  --coral: #ff7452;
  --ink-teal: #0a404c;
  --mint: #5fe0c8;

  /* Surfaces and ink (Light). */
  --paper: #fbfbf8;
  /* History and the Today panel draw on ContentFill, a shade lighter than
     the window background in Dark. */
  --content-fill: #fbfbf8;
  --card: #ffffff;
  --hairline: #e6e7e4;
  --ink: #2b2b2b;
  --muted-ink: #7d7d79;
  --faint-ink: rgba(43, 43, 43, 0.42);
  --selection: #117bc8;
  --selection-deep: #065ba3;
  --selection-soft: #dff1ff;
  --shadow: rgba(36, 54, 64, 0.13);
  --fill-5: rgba(43, 43, 43, 0.05);
  --fill-10: rgba(43, 43, 43, 0.1);

  /* Hues (Light). */
  --blue: #2563eb;
  --indigo: #6347eb;
  --purple: #963cdc;
  --magenta: #db2777;
  --green: #046474;
  --red: #c94932;
  --orange: #c94f33;
  --yellow: #996000;
  --lime: #4d7c0f;

  /* Work types: Golden Hour Meadow. Fill is one tone in both appearances;
     Mark is the deeper shade in Light, the fill tone in Dark. */
  --wt-apricot: #e9b089;      --wt-apricot-mark: #a36232;
  --wt-dusk-slate: #86bdcb;   --wt-dusk-slate-mark: #376c79;
  --wt-evening-blue: #95b2e1; --wt-evening-blue-mark: #44649b;
  --wt-heather: #bfa9db;      --wt-heather-mark: #72588f;
  --wt-honey: #e5c283;        --wt-honey-mark: #906e2a;
  --wt-lagoon: #54d4d4;       --wt-lagoon-mark: #067f80;
  --wt-meadow: #b5c68d;       --wt-meadow-mark: #68783d;
  --wt-poppy: #e99c8f;        --wt-poppy-mark: #a95346;
  --wt-sage: #90c5ad;         --wt-sage-mark: #427560;
  --wt-warm-gray: #cfc8be;    --wt-warm-gray-mark: #6b645b;
  --wt-wheat: #b9a983;        --wt-wheat-mark: #7f6f48;
  --wt-wild-rose: #e29fb8;    --wt-wild-rose-mark: #9c4e6f;

  /* WORK summary tool-category blues. */
  --tone-navy: #173a7a;
  --tone-cobalt: #2159c4;
  --tone-cerulean: #0a76a6;
  --tone-periwinkle: #6b7bd9;
  --tone-azure: #4a94e6;

  /* Spacing, 4pt base. */
  --sp-micro: 2px;
  --sp-tight: 4px;
  --sp-related: 8px;
  --sp-element: 12px;
  --sp-card: 16px;
  --sp-group: 20px;
  --sp-section: 24px;
  --sp-terminal: 32px;

  /* Radii. */
  --r-card: 16px;
  --r-control: 10px;
  --r-dialog: 22px;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #071216;
    --content-fill: #0b171c;
    --card: #102128;
    --hairline: #29424b;
    --ink: #eaf2f4;
    --muted-ink: #aeb8ba;
    --faint-ink: rgba(234, 242, 244, 0.42);
    --selection: #56c2ff;
    --selection-deep: #56c2ff;
    --selection-soft: rgba(86, 194, 255, 0.16);
    --shadow: rgba(0, 0, 0, 0.42);
    --fill-5: rgba(234, 242, 244, 0.05);
    --fill-10: rgba(234, 242, 244, 0.1);

    --blue: #739bff;
    --indigo: #9a8cff;
    --purple: #c486ff;
    --magenta: #ff78b5;
    --green: #5fe0c8;
    --red: #ff6b4a;
    --orange: #ff947c;
    --yellow: #ffc65a;
    --lime: #a3e635;

    --wt-apricot-mark: #e9b089;
    --wt-dusk-slate-mark: #86bdcb;
    --wt-evening-blue-mark: #95b2e1;
    --wt-heather-mark: #bfa9db;
    --wt-honey-mark: #e5c283;
    --wt-lagoon-mark: #54d4d4;
    --wt-meadow-mark: #b5c68d;
    --wt-poppy-mark: #e99c8f;
    --wt-sage-mark: #90c5ad;
    --wt-warm-gray-mark: #cfc8be;
    --wt-wheat-mark: #b9a983;
    --wt-wild-rose-mark: #e29fb8;

    --tone-navy: #3a72d2;
    --tone-cobalt: #c5deff;
    --tone-cerulean: #4fb3ec;
    --tone-periwinkle: #a1b3ff;
    --tone-azure: #4f86c6;
  }
}

/* Forcing an appearance (used by the screenshot capture script) mirrors the
   dark block above. Keep the two in step. */
:root[data-theme="dark"] {
  --paper: #071216;
  --content-fill: #0b171c;
  --card: #102128;
  --hairline: #29424b;
  --ink: #eaf2f4;
  --muted-ink: #aeb8ba;
  --faint-ink: rgba(234, 242, 244, 0.42);
  --selection: #56c2ff;
  --selection-deep: #56c2ff;
  --selection-soft: rgba(86, 194, 255, 0.16);
  --shadow: rgba(0, 0, 0, 0.42);
  --fill-5: rgba(234, 242, 244, 0.05);
  --fill-10: rgba(234, 242, 244, 0.1);
  --blue: #739bff;
  --indigo: #9a8cff;
  --purple: #c486ff;
  --magenta: #ff78b5;
  --green: #5fe0c8;
  --red: #ff6b4a;
  --orange: #ff947c;
  --yellow: #ffc65a;
  --lime: #a3e635;
  --wt-apricot-mark: #e9b089;
  --wt-dusk-slate-mark: #86bdcb;
  --wt-evening-blue-mark: #95b2e1;
  --wt-heather-mark: #bfa9db;
  --wt-honey-mark: #e5c283;
  --wt-lagoon-mark: #54d4d4;
  --wt-meadow-mark: #b5c68d;
  --wt-poppy-mark: #e99c8f;
  --wt-sage-mark: #90c5ad;
  --wt-warm-gray-mark: #cfc8be;
  --wt-wheat-mark: #b9a983;
  --wt-wild-rose-mark: #e29fb8;
  --tone-navy: #3a72d2;
  --tone-cobalt: #c5deff;
  --tone-cerulean: #4fb3ec;
  --tone-periwinkle: #a1b3ff;
  --tone-azure: #4f86c6;
}