/*
 * PhoneAgents Design System Tokens
 * Canonical Dialect B palette mapped to Dialect A structure
 */
:root {
  /* ── Surface Colors ── */
  /* Kit layer: every leaf indirects through --kit-* (set by kits.css [data-kit]
     or by kit-bridge.js). The fallback literals are the default kit
     (phoneagents-emerald), so no data-kit == byte-identical computed values.
     Telegram --tg-theme-* stays the OUTER fallback: inside the Mini App the
     platform theme still wins over any kit. */
  --surface-base: var(--tg-theme-bg-color, var(--kit-surface-base, #07100d));
  --surface-raised: var(--tg-theme-secondary-bg-color, var(--kit-surface-raised, #0d1a15));
  --surface-overlay: var(--kit-surface-overlay, #12231d);
  --surface-sunken: var(--kit-surface-sunken, #06100c);
  /* Doctrine "raised": nested cards, fields, metric chips (one step above overlay). */
  --surface-raised-2: var(--kit-surface-raised-2, #172d25);

  /* ── Border Colors ── */
  --border-subtle: var(--kit-border-subtle, rgba(159, 178, 168, 0.18));
  --border-default: var(--kit-border-default, #254237);
  --border-strong: var(--kit-border-strong, rgba(62, 207, 142, 0.65));

  /* ── Text Colors ── */
  --text-primary: var(--tg-theme-text-color, var(--kit-text-primary, #f3f6ef));
  --text-secondary: var(--tg-theme-hint-color, var(--kit-text-secondary, #9fb2a8));
  --text-muted: var(--kit-text-muted, #6f8b7e);
  --text-inverse: var(--kit-text-inverse, #03130d);

  /* ── Accent Colors ── */
  --accent-primary: var(--tg-theme-button-color, var(--kit-accent-primary, #3ecf8e));
  --accent-primary-hover: var(--kit-accent-primary-hover, #5ee3a8);
  --accent-primary-muted: var(--kit-accent-primary-muted, rgba(62, 207, 142, 0.08));
  --accent-text: var(--tg-theme-button-text-color, var(--kit-accent-text, #03130d));
  --link-color: var(--tg-theme-link-color, var(--kit-link-color, #3ecf8e));

  /* ── Status Colors ── */
  --status-success: var(--kit-status-success, #4ade80);
  --status-success-muted: var(--kit-status-success-muted, rgba(74, 222, 128, 0.08));
  --status-warning: var(--kit-status-warning, #f59e0b);
  --status-warning-muted: var(--kit-status-warning-muted, rgba(245, 158, 11, 0.08));
  --status-error: var(--kit-status-error, #f43f5e);
  --status-error-muted: var(--kit-status-error-muted, rgba(244, 63, 94, 0.08));
  --status-info: var(--kit-status-info, #7dd3fc);
  --status-info-muted: var(--kit-status-info-muted, rgba(125, 211, 252, 0.08));

  /* ── Typography ── */
  --font-sans: var(--kit-font-sans, 'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
  --font-mono: var(--kit-font-mono, 'JetBrains Mono', 'Geist Mono', 'SF Mono', ui-monospace, monospace);
  /* Doctrine: mono display face for headings, labels, badges, IDs, metrics. */
  --font-display: var(--kit-font-display, 'JetBrains Mono', 'IBM Plex Mono', 'Geist Mono', 'SF Mono', ui-monospace, monospace);
  --font-regular: var(--kit-font-regular, 400);
  --font-medium: var(--kit-font-medium, 500);
  --font-semibold: var(--kit-font-semibold, 600);
  --font-bold: var(--kit-font-bold, 700);
  /* Doctrine display weights: h1/h2/card-title = 760, metrics = 780. */
  --font-weight-display: var(--kit-font-weight-display, 760);
  --font-weight-metric: var(--kit-font-weight-metric, 780);

  /* Type scale */
  --text-hero: var(--kit-text-hero, 32px);
  --text-h1: var(--kit-text-h1, 24px);
  --text-h2: var(--kit-text-h2, 20px);
  --text-h3: var(--kit-text-h3, 16px);
  --text-body: var(--kit-text-body, 14px);
  --text-sm: var(--kit-text-sm, 13px);
  --text-xs: var(--kit-text-xs, 12px);
  --text-xxs: var(--kit-text-xxs, 10px);

  /* ── Spacing Scale (4px base) ── */
  --sp-1: var(--kit-sp-1, 4px);
  --sp-2: var(--kit-sp-2, 8px);
  --sp-3: var(--kit-sp-3, 12px);
  --sp-4: var(--kit-sp-4, 16px);
  --sp-5: var(--kit-sp-5, 20px);
  --sp-6: var(--kit-sp-6, 24px);
  --sp-8: var(--kit-sp-8, 32px);
  --sp-10: var(--kit-sp-10, 40px);
  --sp-12: var(--kit-sp-12, 48px);
  --sp-16: var(--kit-sp-16, 64px);

  /* ── Border Radius ── */
  --radius-sm: var(--kit-radius-sm, 6px);
  --radius-md: var(--kit-radius-md, 8px);
  --radius-lg: var(--kit-radius-lg, 12px);
  --radius-xl: var(--kit-radius-xl, 18px);
  /* Doctrine: bottom sheets get 28px top corners. */
  --radius-sheet: var(--kit-radius-sheet, 28px);
  --radius-full: var(--kit-radius-full, 9999px);

  /* ── Shadows ── */
  --shadow-subtle: var(--kit-shadow-subtle, 0 1px 2px rgba(0, 0, 0, 0.3));
  --shadow-medium: var(--kit-shadow-medium, 0 4px 12px rgba(0, 0, 0, 0.4));
  --shadow-prominent: var(--kit-shadow-prominent, 0 18px 50px rgba(0, 0, 0, 0.45));
  /* Doctrine: subtle mint emphasis glow — never neon overload. */
  --glow-primary: var(--kit-glow-primary, 0 0 16px rgba(62, 207, 142, 0.26));

  /* ── Motion ── */
  /* Doctrine: subtle 150-260ms transitions, no bouncy motion. */
  --motion-dur: var(--kit-motion-dur, 200ms);
  --motion-ease: var(--kit-motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1));

  /* ── Touch Targets ── */
  /* Doctrine: 44px minimum; primary actions and bottom tabs 52-56px. */
  --touch-min: var(--kit-touch-min, 44px);
  --touch-lg: var(--kit-touch-lg, 56px);

  /* ── Provider Marks ── */
  /* Brand colors for model/provider pills and integration rows. */
  --provider-claude: var(--kit-provider-claude, #d97745);
  --provider-openai: var(--kit-provider-openai, #e5ece8);
  --provider-google: var(--kit-provider-google, #8ab4f8);
  --provider-cloudflare: var(--kit-provider-cloudflare, #f48120);

  /* ── Kit-contract 1.1.0 base fallbacks (WDOS D1) ──
   * The 41 declarations above (font weights, type scale, spacing, radius,
   * shadows, motion pair, touch minima, provider marks) are literal-only no
   * more: each indirects through --kit-<name> with this file's shipped
   * literal as the fallback, per the emission table in pinned
   * axels-vault contracts/kit-groups.v2.md §2.1. Omission is the only
   * default: a kit that sets none of the eight optional groups computes
   * byte-identical values, a partial group leaves every unset key on its
   * literal, and nothing is derived by rule. A kit cannot delete a token,
   * only override one. None of these 41 is Telegram-underlaid, so the
   * var(--tg-theme-*, …) outer chain on the 14 platform-backed tokens is
   * untouched. Emission side: tools/gen-kits-css.mjs; mirrors verify
   * against kits/SOURCE-PIN.json. */
}

/* Light mode is opt-in. Static marketing pages default to the dark emerald palette. */
html.light {
  /* ── Surface Colors ── */
  --surface-base: var(--tg-theme-bg-color, var(--kit-surface-base, #f8fafc));
  --surface-raised: var(--tg-theme-secondary-bg-color, var(--kit-surface-raised, #ffffff));
  --surface-overlay: var(--kit-surface-overlay, #ffffff);
  --surface-sunken: var(--kit-surface-sunken, #f1f5f9);
  --surface-raised-2: var(--kit-surface-raised-2, #eef2f7);

  /* ── Border Colors ── */
  --border-subtle: var(--kit-border-subtle, #e2e8f0);
  --border-default: var(--kit-border-default, #cbd5e1);
  --border-strong: var(--kit-border-strong, #94a3b8);

  /* ── Text Colors ── */
  --text-primary: var(--tg-theme-text-color, var(--kit-text-primary, #0f172a));
  --text-secondary: var(--tg-theme-hint-color, var(--kit-text-secondary, #475569));
  --text-muted: var(--kit-text-muted, #94a3b8);
  --text-inverse: var(--kit-text-inverse, #ffffff);

  /* ── Accent Colors ── */
  --accent-primary: var(--tg-theme-button-color, var(--kit-accent-primary, #0d9f62));
  --accent-primary-hover: var(--kit-accent-primary-hover, #087a4b);
  --accent-primary-muted: var(--kit-accent-primary-muted, rgba(13, 159, 98, 0.07));
  --accent-text: var(--tg-theme-button-text-color, var(--kit-accent-text, #ffffff));
  --link-color: var(--tg-theme-link-color, var(--kit-link-color, #0d9f62));

  /* ── Status Colors ── */
  --status-success: var(--kit-status-success, #059669);
  --status-success-muted: var(--kit-status-success-muted, rgba(5, 150, 105, 0.07));
  --status-warning: var(--kit-status-warning, #d97706);
  --status-warning-muted: var(--kit-status-warning-muted, rgba(217, 119, 6, 0.07));
  --status-error: var(--kit-status-error, #dc2626);
  --status-error-muted: var(--kit-status-error-muted, rgba(220, 38, 38, 0.07));
  --status-info: var(--kit-status-info, #0e9488);
  --status-info-muted: var(--kit-status-info-muted, rgba(14, 148, 136, 0.07));

  /* ── Effects ── */
  --glow-primary: var(--kit-glow-primary, 0 0 16px rgba(13, 159, 98, 0.18));
}

/*
 * ─────────────────────────────────────────────────────────────
 * Component compatibility aliases (C-3)
 * ─────────────────────────────────────────────────────────────
 * `components/**` consumes a `--color-*` dialect that no source
 * defined after the 282c46d extraction: neither this file nor the
 * `theme.css` @theme bridge (which emits `--color-surface-base`-style
 * names) matched them, so 17 tokens resolved to nothing.
 *
 * These aliases resolve them against the canonical unprefixed dialect
 * with zero component edits. They inherit light mode automatically:
 * the light-mode block above targets the same element as `:root`, and
 * custom-property substitution is lazy, so each alias picks up the
 * cascaded value rather than the dark default.
 *
 * Do NOT add new `--color-*` names here — new work uses the
 * unprefixed dialect (`--text-primary`, `--surface-raised`, …).
 */
:root {
  /* Text */
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-tertiary: var(--text-muted);

  /* Surfaces */
  --color-bg-primary: var(--surface-base);
  --color-bg-secondary: var(--surface-raised);
  --color-bg-tertiary: var(--surface-overlay);

  /* Borders */
  --color-border: var(--border-subtle);

  /* Accent */
  --color-accent: var(--accent-primary);
  --color-accent-text: var(--accent-text);
  --color-accent-subtle: var(--accent-primary-muted);

  /* Status */
  --color-success: var(--status-success);
  --color-warning: var(--status-warning);
  --color-warning-bg: var(--status-warning-muted);
  --color-danger: var(--status-error);
  --color-danger-subtle: var(--status-error-muted);
  --color-error: var(--status-error);
  --color-info: var(--status-info);
}

/*
 * Same class of orphan, unprefixed dialect. `components/**` also reads
 * three names this file never defined. Doctrine mapping:
 *  - `--accent-secondary` is used by CrossProjectSummaryBar for the
 *    blocked-stream counter, whose own comments read "Amber when > 0" —
 *    i.e. human-action-required, so it resolves to the warning amber,
 *    not the cyan secondary. (Cyan remains available as --status-info.)
 */
:root {
  --accent-secondary: var(--status-warning);
  --surface-elevated: var(--surface-raised);
  --surface-muted: var(--surface-sunken);
}