/* Tabcat tokens, in two layers. Names match the Tabcat design system's tokens.json.
   Brand: the page itself, drawn from the logo (paper, ink, one ginger accent).
   App (--app-*): the pictures of the app on the page. They keep the colours the
   strip really draws inside Claude, so a depiction looks like the app, not the brand.
   Colours follow the visitor's light or dark setting; data-theme on any element
   pins that element and its children to one theme (used to show a dark app). */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-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;
}

:root,
[data-theme="light"] {
  color-scheme: light;

  /* Brand. Ginger is the only accent: the cat tab, the current place, links.
     --ginger is for shapes and large type (3.3:1 on paper); text uses --ginger-text (4.7:1). */
  --paper: #faf7f2;
  --paper-raised: #fffdf9;
  --paper-sunken: #f1ece4;
  --ink: #1b1a21;
  --ink-muted: #5b5664;
  --hairline: rgba(27, 26, 33, 0.1);
  --hairline-strong: rgba(27, 26, 33, 0.18);
  --ginger: #d46a22;
  --ginger-text: #b4521a;
  --shadow-raised: 0 1px 2px rgba(27, 26, 33, 0.06), 0 8px 24px rgba(27, 26, 33, 0.06);

  /* App */
  --app-surface: #fbfbfb;
  --app-surface-raised: #ffffff;
  --app-surface-sunken: #efefee;
  --app-fill-quiet: #0000000f;
  --app-fill-strong: #0000001f;
  --app-ink: #1d1d1f;
  --app-ink-muted: #5e5e63;
  --app-hairline: #0000001a;
  --app-hairline-strong: #0000002e;
  --app-control-border: #8a8a8e;
  --app-accent: #0a64d6;
  --app-on-accent: #ffffff;
  --app-unread: #d70015;
  --app-on-unread: #ffffff;
  --app-asks: #b54708;
  --app-asks-fill: #fff1e0;
  --app-hud: #1e1e20eb;
  --app-on-hud: #f5f5f7;
  --app-on-hud-muted: #a1a1a6;
  --app-on-account: #1d1d1f;
  --app-account-amber: #ffaf00;
  --app-account-sky: #5fafff;
  --app-account-green: #00d75f;
  --app-account-orchid: #d75fd7;
  --app-account-coral: #ff5f5f;
  --app-account-blue: #0087ff;
  --app-account-gold: #ffd700;
  --app-account-lavender: #af87ff;
  --app-account-cyan: #5fd7ff;
  --app-account-salmon: #ff875f;
  --app-account-none: #bcbcbc;
  --app-shadow-window: 0 12px 30px rgba(0, 0, 0, 0.26), 0 0 2px rgba(0, 0, 0, 0.22);
  --app-shadow-window-inactive: 0 12px 30px rgba(0, 0, 0, 0.13), 0 0 2px rgba(0, 0, 0, 0.11);
  --app-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.18);
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-tab: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radius-key: 4px;
  --radius-cell: 6px;
  --radius-tile: 10px;
  --radius-panel: 12px;
  --radius-window: 16px;
  --radius-hud: 18px;
  --radius-card: 20px;
  --radius-pill: 999px;
  --strip-width: 56px;
  --tile-size: 40px;
  --accent-edge: 3px;
  /* Brand type: Plus Jakarta Sans, as in the wordmark. The app depictions keep the
     Mac's own type, because that is what the app draws. */
  --font-brand: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #1b1a21;
    --paper-raised: #25242c;
    --paper-sunken: #15141a;
    --ink: #faf7f2;
    --ink-muted: #ada8b4;
    --hairline: rgba(250, 247, 242, 0.1);
    --hairline-strong: rgba(250, 247, 242, 0.18);
    --ginger: #e8823c;
    --ginger-text: #e8823c;
    --shadow-raised: 0 0 0 1px rgba(250, 247, 242, 0.06), 0 8px 24px rgba(0, 0, 0, 0.3);
    --app-surface: #222222;
    --app-surface-raised: #2c2c2e;
    --app-surface-sunken: #1a1a1a;
    --app-fill-quiet: #ffffff14;
    --app-fill-strong: #ffffff29;
    --app-ink: #f5f5f7;
    --app-ink-muted: #a1a1a6;
    --app-hairline: #ffffff1a;
    --app-hairline-strong: #ffffff2e;
    --app-control-border: #7c7c80;
    --app-accent: #4c9eff;
    --app-on-accent: #1d1d1f;
    --app-unread: #ff6961;
    --app-on-unread: #1d1d1f;
    --app-asks: #ffb45c;
    --app-asks-fill: #3a2a14;
    --app-shadow-window: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
    --app-shadow-window-inactive: 0 12px 30px rgba(0, 0, 0, 0.25), 0 0 2px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --paper: #1b1a21;
  --paper-raised: #25242c;
  --paper-sunken: #15141a;
  --ink: #faf7f2;
  --ink-muted: #ada8b4;
  --hairline: rgba(250, 247, 242, 0.1);
  --hairline-strong: rgba(250, 247, 242, 0.18);
  --ginger: #e8823c;
  --ginger-text: #e8823c;
  --shadow-raised: 0 0 0 1px rgba(250, 247, 242, 0.06), 0 8px 24px rgba(0, 0, 0, 0.3);
  --app-surface: #222222;
  --app-surface-raised: #2c2c2e;
  --app-surface-sunken: #1a1a1a;
  --app-fill-quiet: #ffffff14;
  --app-fill-strong: #ffffff29;
  --app-ink: #f5f5f7;
  --app-ink-muted: #a1a1a6;
  --app-hairline: #ffffff1a;
  --app-hairline-strong: #ffffff2e;
  --app-control-border: #7c7c80;
  --app-accent: #4c9eff;
  --app-on-accent: #1d1d1f;
  --app-unread: #ff6961;
  --app-on-unread: #1d1d1f;
  --app-asks: #ffb45c;
  --app-asks-fill: #3a2a14;
  --app-shadow-window: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --app-shadow-window-inactive: 0 12px 30px rgba(0, 0, 0, 0.25), 0 0 2px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05);
}