/* Sahaj V8 design tokens (one set). Inter is bundled (SIL OFL, docs/licenses/Inter-OFL.txt). */
@font-face {
  font-family: 'Inter Variable';
  src: url('inter-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --sj-bg: #FAFAF8; --sj-surface: #FFFFFF; --sj-raised: #F3F4F1;
  --sj-text: #171A18; --sj-text-2: #68706B; --sj-hairline: #E5E9E5;
  --sj-accent: #1B6E5A; --sj-accent-pressed: #145441; --sj-danger: #B42318;
  --sj-font: 'Inter Variable', Inter, 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sj-r-field: 16px; --sj-r-card: 18px; --sj-r-sheet: 24px; --sj-r-chip: 999px; --sj-r-btn: 14px;
  --sj-pad: 20px;
  --sj-shadow: 0 1px 2px rgba(23,26,24,.06), 0 6px 20px rgba(23,26,24,.06);
  --sj-ease: cubic-bezier(0.2, 0, 0, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sj-bg: #101310; --sj-surface: #1A201C; --sj-raised: #242B26;
    --sj-text: #F4F6F3; --sj-text-2: #ADB8B0; --sj-hairline: #343D36; --sj-accent: #79D5B4;
    --sj-accent-pressed: #5fc19e; --sj-shadow: 0 1px 2px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"] {
  --sj-bg: #101310; --sj-surface: #1A201C; --sj-raised: #242B26;
  --sj-text: #F4F6F3; --sj-text-2: #ADB8B0; --sj-hairline: #343D36; --sj-accent: #79D5B4;
  --sj-accent-pressed: #5fc19e; --sj-shadow: 0 1px 2px rgba(0,0,0,.4);
}

/* ---------- compatibility layer: the legacy variable names used by chrome.css and pages.css
   now resolve to the single V8 token set above. Load this file AFTER chrome.css / pages.css. ---------- */
:root, :root[data-theme] {
  --surface: var(--sj-bg);
  --chrome-glass: var(--sj-bg);
  --surface-raised: var(--sj-surface);
  --surface-hover: var(--sj-raised);
  --ink: var(--sj-text);
  --ink-soft: var(--sj-text-2);
  --ink-faint: var(--sj-text-2);
  --line: var(--sj-hairline);
  --accent: var(--sj-accent);
  --accent-strong: var(--sj-accent-pressed);
  --accent-soft: color-mix(in srgb, var(--sj-accent) 12%, transparent);
  --accent-ink: #ffffff;
  --danger: var(--sj-danger);
  --ok: var(--sj-accent);
  --radius-s: 10px; --radius-m: var(--sj-r-btn); --radius-l: var(--sj-r-card); --radius-xl: var(--sj-r-sheet);
  --shadow-pop: var(--sj-shadow); --shadow-tab: none; --shadow-card: none;
  --font-ui: var(--sj-font); --font-display: var(--sj-font);
  --glow: none;
  --ease: var(--sj-ease); --ease-spring: var(--sj-ease);
  --emb-hi: transparent; --emb-lo: transparent; --emb-top: transparent; --emb-bottom: transparent;
}
:root[data-theme="dark"] { --accent-ink: #101310; }
body { font-family: var(--sj-font); }

/* flat, hairline controls: no emboss, no glass */
.chrome { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--sj-bg); }
@media (max-width: 640px) {
  .mobile-toolbar { background: var(--sj-bg); border-top: 1px solid var(--sj-hairline); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
  .mobile-toolbar-controls .tool-btn, .mobile-toolbar-controls .new-tab, .mobile-toolbar-controls .nav-cluster, .menu-quick-btn {
    background: var(--sj-surface); border: 1px solid var(--sj-hairline); box-shadow: none; filter: none; text-shadow: none;
  }
  .mobile-toolbar-controls .nav-cluster button { background: transparent; border: 0; }
  .mobile-toolbar-controls .tool-btn:active, .mobile-toolbar-controls .new-tab:active, .menu-quick-btn:active { background: var(--sj-raised); box-shadow: none; }
  .mobile-toolbar-controls .tool-btn svg, .mobile-toolbar-controls .nav-cluster svg, .menu-quick-btn svg { filter: none; }
}

/* welcome / empty stage (V8 first screen) */
.welcome { gap: 0; justify-items: start; text-align: left; place-content: center; width: min(560px, 100%); margin: 0 auto; padding: 24px var(--sj-pad); }
.welcome .wordmark { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 24px; }
.welcome h1 { font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 20px; color: var(--sj-text); }
.welcome .wordmark i { font-style: normal; color: var(--sj-accent); }
.welcome-search { width: 100%; height: 56px; border-radius: var(--sj-r-field); box-shadow: none; }
.welcome-search:focus-within { border-color: var(--sj-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sj-accent) 22%, transparent); }
.welcome .hint { margin-top: 8px; font-size: 13px; line-height: 18px; color: var(--sj-text-2); }

/* toolbar position (phone layout setting) */
@media (max-width: 640px) {
  body.bar-top .mobile-toolbar { inset: 0 0 auto; border-top: 0; border-bottom: 1px solid var(--sj-hairline); }
  body.bar-top.mobile-chrome .stage { margin-top: var(--bar-h, 108px); }
}

/* phone: All tabs button (v0.13.1) - iOS-style rounded square with the open-tab count */
.tabs-btn { display: none; }
@media (max-width: 640px) {
  .mobile-toolbar-controls .tabs-btn { display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; border-radius: 12px; background: transparent; border: 0; box-shadow: none; }
  .tabs-btn-box { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--sj-text); color: var(--sj-text); }
  .tabs-btn-box b { font: 700 13px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
  .tabs-btn-box.many b { font-size: 11px; }
  .tabs-btn:active { background: var(--sj-raised); }
  .mobile-toolbar-controls { gap: 2px; }
  .mobile-toolbar-controls .tool-btn, .mobile-toolbar-controls .new-tab { width: 44px; height: 44px; min-width: 44px; }
  .mobile-toolbar-controls .nav-cluster button { width: 40px; height: 40px; }
  .mobile-toolbar { grid-template-rows: 46px 52px; background: var(--sj-bg); }
  body.on-newtab .mobile-toolbar { grid-template-rows: 52px; }
}

.sheet-primary { color: #fff; }
.sheet-primary.danger { color: #fff; }