/* TreeCalling · Color Tokens (SM67 glass + tree green)
 * Brand: tree green #69EF8B · glass language from SM67
 * Themes: dark + light (Shopify Admin style surfaces)
 */

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

  /* Surfaces · Shopify-dark: zinc/charcoal, not pure black */
  --sm-bg: #0b0c0f;
  --sm-bg-elev: #12141a;
  --sm-surface: #171a21;
  --sm-surface-2: #1e222b;
  --sm-elevated: #252a35;
  --sm-sidebar: #12141a;
  --sm-border: rgba(255, 255, 255, 0.08);
  --sm-border-strong: rgba(255, 255, 255, 0.14);
  --sm-divider: rgba(255, 255, 255, 0.06);

  /* Text */
  --sm-text: #e8eaed;
  --sm-muted: #8a9188;
  --sm-muted-2: #6a7168;
  --sm-inverse: #0b0c0f;

  /* Brand */
  --sm-brand: #69ef8b;
  --sm-brand-hi: #8ff5a8;
  --sm-brand-lo: #3dc96a;
  --sm-brand-dim: rgba(105, 239, 139, 0.16);
  --sm-brand-fg: #052e16;

  /* Semantic */
  --sm-call: #22c55e;
  --sm-call-hi: #4ade80;
  --sm-call-dim: rgba(34, 197, 94, 0.14);
  --sm-call-fg: #052e16;
  --sm-success: #22c55e;
  --sm-danger: #f43f5e;
  --sm-danger-dim: rgba(244, 63, 94, 0.12);
  --sm-danger-fg: #ffffff;
  --sm-warning: #f59e0b;
  --sm-warning-dim: rgba(245, 158, 11, 0.12);

  /* Lead rank */
  --sm-rank-top-bg: var(--sm-brand);
  --sm-rank-top-fg: #ffffff;
  --sm-rank-top-border: var(--sm-brand);

  --sm-rank-stark-bg: var(--sm-brand-dim);
  --sm-rank-stark-fg: var(--sm-brand-hi);
  --sm-rank-stark-border: rgba(105, 239, 139, 0.35);

  --sm-rank-okay-bg: rgba(255, 255, 255, 0.05);
  --sm-rank-okay-fg: var(--sm-muted);
  --sm-rank-okay-border: var(--sm-border-strong);

  --sm-rank-skip-bg: transparent;
  --sm-rank-skip-fg: var(--sm-muted-2);
  --sm-rank-skip-border: var(--sm-border);

  --sm-open: var(--sm-call-hi);
  --sm-closed: var(--sm-danger);

  --sm-web-weak-fg: var(--sm-brand-hi);
  --sm-web-weak-bg: var(--sm-brand-dim);
  --sm-web-weak-border: rgba(105, 239, 139, 0.3);
  --sm-web-strong-fg: var(--sm-muted-2);
  --sm-web-strong-bg: transparent;
  --sm-web-strong-border: var(--sm-border);

  /* Controls · Shopify-like */
  --sm-input-bg: #0f1116;
  --sm-input-border: rgba(255, 255, 255, 0.12);
  --sm-btn-secondary-bg: rgba(255, 255, 255, 0.04);
  --sm-btn-secondary-hover: rgba(255, 255, 255, 0.08);
  --sm-hover: rgba(255, 255, 255, 0.04);
  --sm-active: rgba(105, 239, 139, 0.14);
  --sm-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.35);
  --sm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --sm-focus-ring: 0 0 0 2px var(--sm-bg), 0 0 0 4px rgba(105, 239, 139, 0.45);

  /* Glass (mobile nav) */
  --sm-glass-bg: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.16),
      rgba(255, 255, 255, 0.05) 45%,
      rgba(255, 255, 255, 0.08)
    ),
    rgba(20, 24, 34, 0.55);
  --sm-glass-border: rgba(255, 255, 255, 0.16);
  --sm-glass-highlight: rgba(255, 255, 255, 0.38);
  --sm-bubble-bg: linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.32),
      rgba(255, 255, 255, 0.06) 55%,
      rgba(105, 239, 139, 0.2)
    ),
    rgba(255, 255, 255, 0.08);
  --sm-bubble-border: rgba(255, 255, 255, 0.26);

  /* Chart */
  --sm-chart-line: #69ef8b;
  --sm-chart-fill-top: rgba(105, 239, 139, 0.4);
  --sm-chart-fill-mid: rgba(105, 239, 139, 0.14);
  --sm-chart-fill-bot: rgba(105, 239, 139, 0);

  --sm-radius-xs: 4px;
  --sm-radius-sm: 6px;
  --sm-radius-md: 8px;
  --sm-radius-lg: 12px;
  --sm-radius-xl: 14px;

  --sm-safe-b: env(safe-area-inset-bottom, 0px);
  --sm-safe-t: env(safe-area-inset-top, 0px);
  --sm-nav-h: 56px;
  --sm-sidebar-w: 240px;

  --sm-font-sans: "Cabinet Grotesk", ui-sans-serif, system-ui, sans-serif;
  --sm-font-mono: "Cabinet Grotesk", ui-sans-serif, system-ui, sans-serif;
}

/* ─── Light · Shopify Polaris admin ─── */
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces · paper gray + white cards */
  --sm-bg: #f1f2f4;
  --sm-bg-elev: #ffffff;
  --sm-surface: #ffffff;
  --sm-surface-2: #f6f6f7;
  --sm-elevated: #ffffff;
  --sm-sidebar: #ffffff;
  --sm-border: #e3e3e3;
  --sm-border-strong: #c9cccf;
  --sm-divider: #ebebeb;

  --sm-text: #1a1a1a;
  --sm-muted: #616161;
  --sm-muted-2: #8c9196;
  --sm-inverse: #ffffff;

  --sm-brand: #1f9d4a;
  --sm-brand-hi: #1f9d4a;
  --sm-brand-lo: #157a38;
  --sm-brand-dim: rgba(31, 157, 74, 0.12);
  --sm-brand-fg: #ffffff;

  --sm-call: #0c5132;
  --sm-call-hi: #29845a;
  --sm-call-dim: rgba(41, 132, 90, 0.12);
  --sm-call-fg: #ffffff;
  --sm-success: #0c5132;
  --sm-danger: #8e1b0d;
  --sm-danger-dim: rgba(142, 27, 13, 0.1);
  --sm-danger-fg: #ffffff;
  --sm-warning: #916a00;
  --sm-warning-dim: rgba(145, 106, 0, 0.12);

  --sm-rank-top-bg: var(--sm-brand);
  --sm-rank-top-fg: #ffffff;
  --sm-rank-top-border: var(--sm-brand);

  --sm-rank-stark-bg: var(--sm-brand-dim);
  --sm-rank-stark-fg: var(--sm-brand);
  --sm-rank-stark-border: rgba(31, 157, 74, 0.28);

  --sm-rank-okay-bg: #f1f2f4;
  --sm-rank-okay-fg: var(--sm-muted);
  --sm-rank-okay-border: var(--sm-border-strong);

  --sm-rank-skip-bg: transparent;
  --sm-rank-skip-fg: var(--sm-muted-2);
  --sm-rank-skip-border: var(--sm-border);

  --sm-open: var(--sm-call-hi);
  --sm-closed: var(--sm-danger);

  --sm-web-weak-fg: var(--sm-brand);
  --sm-web-weak-bg: var(--sm-brand-dim);
  --sm-web-weak-border: rgba(31, 157, 74, 0.22);
  --sm-web-strong-fg: var(--sm-muted-2);
  --sm-web-strong-bg: transparent;
  --sm-web-strong-border: var(--sm-border);

  --sm-input-bg: #ffffff;
  --sm-input-border: #8a8a8a;
  --sm-btn-secondary-bg: #ffffff;
  --sm-btn-secondary-hover: #f6f6f7;
  --sm-hover: rgba(0, 0, 0, 0.04);
  --sm-active: rgba(31, 157, 74, 0.1);
  --sm-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.08);
  --sm-shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.05);
  --sm-focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px rgba(31, 157, 74, 0.45);

  --sm-glass-bg: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.88),
      rgba(255, 255, 255, 0.55) 48%,
      rgba(255, 255, 255, 0.72)
    ),
    rgba(241, 242, 244, 0.65);
  --sm-glass-border: rgba(255, 255, 255, 0.75);
  --sm-glass-highlight: rgba(255, 255, 255, 0.95);
  --sm-bubble-bg: linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.95),
      rgba(255, 255, 255, 0.55) 50%,
      rgba(31, 157, 74, 0.1)
    ),
    rgba(255, 255, 255, 0.7);
  --sm-bubble-border: rgba(0, 0, 0, 0.06);

  --sm-chart-line: #1f9d4a;
  --sm-chart-fill-top: rgba(31, 157, 74, 0.28);
  --sm-chart-fill-mid: rgba(31, 157, 74, 0.1);
  --sm-chart-fill-bot: rgba(31, 157, 74, 0);
}