/*
 * able@softwareio — 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 {
  /* ────────────────────────────────────────────────
     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: 56px;
}

/* ────────────────────────────────────────────────
   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"] {
  --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. */

/* ═══════════════════════════════════════════════════════════════════════
   ablesoftware.io brand layer (migration 2026-06-10)
   Faithful port of the live site's design system (src/index.css +
   tailwind.config.ts): green-first brand (#21c45d / #16a249), cool slate
   ink, near-white surfaces, 12px radius, soft layered shadows. The live
   site uses the system font stack; the parent's self-hosted Inter is the
   platform equivalent (CLS-0 fallback included).
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* Brand → canonical tokens */
  --accent:        #21c45d;   /* hsl(142 71% 45%) — logo green */
  --accent-hover:  #16a249;   /* hsl(142 76% 36%) */
  --accent-active: #12873d;
  --accent-soft:   #dcfce7;
  --on-accent:     #ffffff;
  --ring:          #21c45d;

  --surface-base:   #ffffff;
  --surface-card:   #ffffff;
  --surface-subtle: #f4f4f6;  /* hsl(220 10% 96%) — secondary/muted */
  --surface-hover:  #eceef1;

  --text-primary:   #2b303b;  /* hsl(220 15% 20%) — foreground */
  --text-secondary: #393e46;  /* hsl(220 10% 25%) — muted-foreground (dark variant) */
  --text-muted:     #5f6672;

  --border-default: #e2e4e9;  /* hsl(220 13% 90%) */
  --border-subtle:  #eef0f3;

  --radius-md: 10px;
  --radius-lg: 12px;          /* --radius: .75rem */
  --radius-xl: 16px;

  /* Site-specific extensions */
  --asio-ink-deep:      #363d49;                       /* dark accent hsl(220 15% 25%) */
  --asio-gradient-hero: linear-gradient(135deg, #12873d 0%, #21c45d 50%, #25da67 100%);
  --asio-shadow-soft:   0 4px 6px -1px hsl(220 13% 10% / 0.05), 0 2px 4px -1px hsl(220 13% 10% / 0.03);
  --asio-shadow-medium: 0 10px 15px -3px hsl(220 13% 10% / 0.08), 0 4px 6px -2px hsl(220 13% 10% / 0.04);
  --asio-shadow-large:  0 20px 25px -5px hsl(220 13% 10% / 0.1), 0 10px 10px -5px hsl(220 13% 10% / 0.04);
}

/* The marketing site is light-only (the live site ships no dark mode).
   Pin the semantic tokens in dark mode so a platform-level data-theme
   toggle can't invert the public pages. */
:root[data-theme="dark"] {
  --accent: #21c45d; --accent-hover: #16a249; --accent-active: #12873d;
  --accent-soft: #dcfce7; --on-accent: #ffffff;
  --surface-base: #ffffff; --surface-card: #ffffff; --surface-subtle: #f4f4f6; --surface-hover: #eceef1;
  --text-primary: #2b303b; --text-secondary: #393e46; --text-muted: #5f6672;
  --border-default: #e2e4e9; --border-subtle: #eef0f3;
}

/* ── Marketing primitives shared across every public page ───────────── */
.asio-container { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: var(--space-4); }
@media (min-width: 640px)  { .asio-container { padding-inline: var(--space-6); } }
@media (min-width: 1024px) { .asio-container { padding-inline: var(--space-8); } }

.asio-h1 { font-weight: 700; letter-spacing: -0.025em; line-height: 1.1;
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem); text-wrap: balance; color: var(--text-primary); }
.asio-h2 { font-weight: 700; letter-spacing: -0.025em; line-height: 1.15;
  font-size: clamp(1.875rem, 1.5rem + 1.4vw, 2.25rem); color: var(--text-primary); }
.asio-h3 { font-weight: 700; letter-spacing: -0.02em; font-size: 1.25rem; color: var(--text-primary); }
.asio-lead { font-size: clamp(1rem, 0.95rem + 0.35vw, 1.125rem); line-height: 1.65; color: var(--text-secondary); }
.asio-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }

.asio-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-weight: 600; font-size: 0.875rem; line-height: 1; border-radius: var(--radius-md);
  padding: 0 var(--space-4); min-height: var(--tap-target, 44px); cursor: pointer; text-decoration: none;
  border: 2px solid transparent; transition: background-color var(--transition-fast, 160ms), color var(--transition-fast, 160ms), box-shadow var(--transition-fast, 160ms); }
.asio-btn--hero { background: var(--accent); color: var(--on-accent); box-shadow: var(--asio-shadow-soft); font-size: 1rem; }
.asio-btn--outline { border-color: var(--accent); color: var(--accent); background: var(--surface-base); }
.asio-btn--ghost { color: var(--text-secondary); }
.asio-btn--lg { min-height: 48px; padding: 0 var(--space-6); font-size: 1rem; }
.asio-btn--block { width: 100%; }
.asio-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .asio-btn--hero:hover { background: var(--accent-hover); box-shadow: var(--asio-shadow-medium); }
  .asio-btn--outline:hover { background: var(--accent); color: var(--on-accent); }
  .asio-btn--ghost:hover { color: var(--accent); }
}

.asio-card { background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: var(--space-8); }
.asio-stat { background: var(--surface-subtle); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: var(--space-6); text-align: center; }
.asio-stat-value { font-size: 1.875rem; font-weight: 700; color: var(--accent); }
.asio-stat-label { margin-top: var(--space-1); font-size: 0.875rem; color: var(--text-secondary); }

.asio-label { display: block; margin-bottom: var(--space-2); font-size: 0.875rem; font-weight: 600; color: var(--text-primary); }
.asio-input, .asio-textarea { width: 100%; font-family: var(--font-sans); font-size: max(16px, 1rem);
  color: var(--text-primary); background: var(--surface-base); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: var(--space-3); }
.asio-input { height: 48px; }
.asio-textarea { resize: none; line-height: 1.5; }
.asio-input:focus-visible, .asio-textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.asio-input::placeholder, .asio-textarea::placeholder { color: var(--text-muted); }

/* Brand logo lockup (SVG mark emitted inline by shell/pages) */
.asio-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.asio-logo-text { display: inline-flex; align-items: baseline; gap: 4px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); text-decoration: none; }
.asio-logo-text .product { font-weight: 500; color: #21c45d; }
.asio-logo-text sup { font-size: 0.45em; color: var(--text-muted); }

/* Shared marketing hero backdrop (used by home, how-it-works, capabilities, …) */
.asio-hero-grid { pointer-events: none; position: absolute; inset: 0;
  background-image: linear-gradient(hsl(220 15% 20% / 0.03) 1px, transparent 1px),
                    linear-gradient(90deg, hsl(220 15% 20% / 0.03) 1px, transparent 1px);
  background-size: 48px 48px; }
.asio-hero-glow { pointer-events: none; position: absolute; left: 50%; top: 60%;
  width: 800px; height: 600px; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(ellipse, hsl(142 71% 45% / 0.06), transparent 70%); }
.asio-arrow-li { display: flex; gap: var(--space-2); }
.asio-arrow-li svg { margin-top: 2px; flex-shrink: 0; color: var(--accent); }