/*
 * able@tiktokdemo — default theme
 *
 * Inherits canonical tokens from `system-base-theme` (parent in meta.yaml):
 *   - `--surface-{base,card,subtle,raised,inverse,overlay,hover,active}`
 *   - `--text-{primary,secondary,muted,subtle,inverse,on-accent}`
 *   - `--border-{subtle,default,strong,inverse}`
 *   - `--accent`, `--accent-hover`, `--accent-active`, `--accent-soft`, `--on-accent`
 *   - `--success`, `--danger`, `--warning`, `--info` (each with `-soft` + `--on-X`)
 *   - `--grey-0..--grey-1000`
 *   - `--shadow-{sm,md,lg,xl}`, `--radius-{sm,md,lg,xl,2xl,full}`
 *   - `--space-1..--space-12`
 *   - `--font-{sans,mono,serif}` — Inter self-hosted with `Inter Fallback` for CLS=0
 *   - `--z-{base,sticky,dropdown,fixed,overlay,modal,offcanvas,popover,tooltip,toast}`
 *   - `--transition-{fast,base,slow}`, `--ease-{enter,move,drawer}`
 *
 * See `.claude/rules/27-template-styling.md` cascade model +
 *     `.claude/rules/28b-design-catalog.md` §2.0 canonical vocabulary +
 *     `.claude/rules/26b-site-authoring-with-blueprints.md` §4 anti-patterns.
 *
 * BANNED in this file (per 26b §4):
 *   - Aliasing non-existent `--theme_*` parent tokens — they do NOT exist on
 *     `system-base-theme`. Aliases like `--theme_text: var(--theme_color_text)`
 *     resolve to empty string and every page falls through to UA defaults
 *     (Times New Roman body, white-on-white text, etc.).
 *   - `@import url('https://fonts.googleapis.com/...')` — parent self-hosts
 *     Inter with `Inter Fallback` for CLS=0. Re-importing from CDN is
 *     redundant network cost + reintroduces layout shift on slow links.
 *   - Redeclaring `--space-N` / `--radius-*` / `--shadow-*` (parent already
 *     exposes them).
 *
 * Tenants are encouraged to:
 *   1. Edit the brand palette below to match their identity.
 *   2. Re-bind `--accent` to a brand color (defaults to platform navy).
 *   3. Keep the body rule and AbleClaw chrome rules as-is.
 */

:root {
  /* ────────────────────────────────────────────────
     Native form controls follow the SAME switch the tokens do.

     `data-theme` flips every token, but a checkbox, a radio, a
     <video> control bar and a scrollbar are painted by the
     browser, and the browser reads `color-scheme` — which
     defaults to `normal`, i.e. the OS preference. So on a
     machine set to dark, an unchecked checkbox on this page in
     LIGHT mode still painted dark-on-dark and read as ticked.
     On a compliance form whose whole job is showing what is and
     is not switched on, that is not cosmetic.

     Bound here rather than in a page's CSS on purpose: page CSS
     is scoped to [data-cmp="<page>"], so it cannot address
     :root, and this is a theme concern anyway — it belongs
     beside the tokens it has to agree with.
     ──────────────────────────────────────────────── */
  color-scheme: light;

  /* ────────────────────────────────────────────────
     Brand palette — REPLACE with your own scale.
     A 5-step scale (50, 200, 500, 700, 900) is usually enough.
     ──────────────────────────────────────────────── */
  --brand-50:   #eff6ff;
  --brand-200:  #bfdbfe;
  --brand-500:  #2563eb;
  --brand-700:  #1d4ed8;
  --brand-900:  #1e3a8a;

  /* ────────────────────────────────────────────────
     Brand mapping — bind canonical platform tokens to your
     brand palette. Pages compose with canonical names
     (--accent, --surface-base, --text-primary) — they
     resolve to your brand via this layer.
     ──────────────────────────────────────────────── */
  --accent:        var(--brand-500);
  --accent-hover:  var(--brand-700);
  --accent-active: var(--brand-900);
  --accent-soft:   var(--brand-50);
  --on-accent:     #ffffff;

  /* ────────────────────────────────────────────────
     Font-size scale — fluid, clamps each value within a sane range.
     Parent system-base-theme exposes --font-sans/mono/serif but no
     numeric scale. This gives pages a single source for sizing.
     ──────────────────────────────────────────────── */
  --font-xs:   clamp(11px, 0.7rem + 0.1vw, 12px);
  --font-sm:   clamp(13px, 0.8rem + 0.15vw, 14px);
  --font-base: clamp(15px, 0.9rem + 0.2vw, 16px);
  --font-lg:   clamp(17px, 1rem   + 0.3vw, 18px);
  --font-xl:   clamp(20px, 1.2rem + 0.5vw, 24px);
  --font-2xl:  clamp(24px, 1.5rem + 0.8vw, 32px);
  --font-3xl:  clamp(32px, 2rem   + 1.5vw, 48px);

  /* ────────────────────────────────────────────────
     Mobile-first safe-area-inset aliases (iPhone notch + Android nav-bar).
     env() defaults to 0 when no inset; alias makes max() composition cleaner.
     ──────────────────────────────────────────────── */
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);

  /* Accessibility / touch target — iOS HIG says 44px. */
  --tap-target: 44px;

  /* App-header height — referenced by .app-shell-main padding math. */
  --app-header-height: 60px; /* = the real <able-app-header> chrome height (was 56 — clipped full-bleed pages) */
}

/* ────────────────────────────────────────────────
   Body — explicit canonical bindings. Parent system-base-theme
   ships Inter self-hosted with `Inter Fallback` for CLS=0; binding
   --font-sans here means we never fall through to UA serif default.
   ──────────────────────────────────────────────── */
html, body {
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: var(--font-base, 16px);
  background: var(--surface-base);
  color: var(--text-primary);
}

/* ────────────────────────────────────────────────
   AbleClaw on a light surface — the blueprint ships
   dark-only chrome (light text on dark cards). When
   the page sits on a light bg, claw labels render
   white-on-white and become invisible. These rules
   restore contrast for sidebar items, shortcut
   labels, input placeholders, and meta text.

   Specificity tip: claw's blueprint stylesheet uses
   single-class .aclaw-* rules; we beat them with
   double-class via .aclaw-grid .aclaw-shortcut +
   :where() to keep specificity manageable.
   ──────────────────────────────────────────────── */
:where(.aclaw-grid, .aclaw-sidebar, .aclaw-content) {
  color: var(--text-primary);
}
.aclaw-grid .aclaw-shortcut,
.aclaw-grid .aclaw-shortcut-label,
.aclaw-grid .aclaw-shortcut-text {
  color: var(--text-primary);
  font-size: var(--font-sm);
}
/* The blueprint's .aclaw-shortcut-icon span carries its own inline color via
   the colored badge variant; leave it untouched. */
.aclaw-grid .aclaw-shortcut {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
}
.aclaw-grid .aclaw-shortcut:hover {
  background: var(--surface-subtle);
  border-color: var(--accent);
}
.aclaw-grid .aclaw-sidebar-title,
.aclaw-grid .aclaw-sidebar-section {
  color: var(--text-muted);
}
.aclaw-grid .aclaw-conv-empty {
  color: var(--text-subtle);
}
.aclaw-grid .aclaw-search input,
.aclaw-grid .aclaw-input textarea {
  color: var(--text-primary);
  background: var(--surface-card);
}
.aclaw-grid .aclaw-search input::placeholder,
.aclaw-grid .aclaw-input textarea::placeholder {
  color: var(--text-subtle);
}
.aclaw-grid .aclaw-welcome-title,
.aclaw-grid .aclaw-empty-title {
  color: var(--text-primary);
}
.aclaw-grid .aclaw-welcome-subtitle,
.aclaw-grid .aclaw-empty-subtitle,
.aclaw-grid .aclaw-or-text {
  color: var(--text-muted);
}
.aclaw-grid .aclaw-category {
  color: var(--text-muted);
  font-weight: 600;
}

/* On the home page (which IS full-mode claw), hide the global
   launcher pill — having both the page-level claw AND a floating
   pill that opens its own claw is confusing. Launcher stays for
   every other route. */
body:has(.home-claw) > able-claw[mode="launcher"] {
  display: none;
}

/* ────────────────────────────────────────────────
   Dark mode — keys on [data-theme="dark"], NOT on
   @media (prefers-color-scheme: dark).

   Why: the inline SSR script in TemplatePageRenderer
   resolves data-theme synchronously from:
     (1) localStorage('able-platform-theme') stored user choice
     (2) prefers-color-scheme media query

   So [data-theme="dark"] is the SINGLE source of truth — it
   respects OS pref when there's no stored value AND respects
   user toggle (light despite OS=dark, or dark despite OS=light).

   Keying tokens on @media (prefers-color-scheme: dark) would
   defeat the toggle: the body bg would follow OS while the
   header / claw chrome follow the attribute → inconsistent UI.
   ──────────────────────────────────────────────── */
:root[data-theme="dark"] {
  /* The native-control half of dark mode — see the note on :root. */
  color-scheme: dark;

  --surface-base:    #0d1117;
  --surface-card:    #161b22;
  --surface-raised:  #21262d;
  --surface-subtle:  #1c2128;
  --surface-hover:   #21262d;
  --surface-active:  #2d333b;
  --text-primary:    #e6edf3;
  --text-secondary:  #c9d1d9;
  --text-muted:      #8b949e;
  --text-subtle:     #6e7681;
  --border-default:  #30363d;
  --border-subtle:   #21262d;
  --accent-soft:     #1f2937;
}
/* Body bg + text re-resolved automatically via the canonical tokens above. */

/* Full-bleed home (the claw copilot): the shell main's breathing padding would
   push the claw's input bar below the fold — drop it on the home route. */
body:has(.home-claw) .app-shell-main { padding-bottom: 0; }