/* ============================================================
   L1 · 原始值层 —— 翡翠(supabase)
   ------------------------------------------------------------
   设计依据:/root/AIUI/supabase/DESIGN.md,值取自第一期已验收的原型。
     - 纯白画布 + 近黑 #171717 文字,唯一彩色事件是翡翠绿 #3ecf8e
     - 绿底按钮用近黑文字(品牌特有选择),不用白字
     - 按钮 6px 方角,全系统拒绝药丸形
     - 显示层 -0.9px 负字距压出工程感密度
     - 灰阶阶梯做全部层级,不靠阴影
     - 等宽块反色到近黑,开发者调性可见
   ============================================================ */

[data-theme-name='supabase'] {
  --t-font-display: 'Inter', 'Circular', 'Helvetica Neue', Helvetica, Arial, system-ui, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --t-font-body: 'Inter', 'Circular', 'Helvetica Neue', Helvetica, Arial, system-ui, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --t-font-mono: ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

  --t-fs-display: 40px; --t-fs-h1: 30px; --t-fs-h2: 22px; --t-fs-h3: 18px;
  --t-fs-body: 16px; --t-fs-sm: 14px; --t-fs-xs: 13px; --t-fs-xxs: 12px;
  --t-fw-body: 400; --t-fw-mid: 500; --t-fw-strong: 500;
  --t-track-display: -0.9px; --t-track-title: -0.4px; --t-track-body: 0px;
  --t-lh-tight: 1.1; --t-lh-snug: 1.2; --t-lh-body: 1.5;

  --t-r-xs: 4px; --t-r-sm: 6px; --t-r-md: 8px; --t-r: 8px;
  --t-r-lg: 12px; --t-r-xl: 16px; --t-r-pill: 9999px;

  --t-dur-fast: 120ms; --t-dur: 180ms; --t-dur-slow: 260ms;
  --t-ease: cubic-bezier(.4,0,.2,1);
  --t-ease-out: cubic-bezier(.16,1,.3,1);
  --t-ease-spring: cubic-bezier(.34,1.3,.64,1);
  --t-press: .98;

  --t-glass-blur: saturate(150%) blur(16px);
  --t-glass-alpha: .78;
  --t-sidebar-w: 240px;
  --t-btn-weight: 500;
  --t-nav-radius: var(--t-r-sm);
  --t-lh-loose: 1.75;
}
[data-theme-name='supabase'][data-theme='light'] {
  --t-primary: #3ecf8e; --t-primary-hover: #4ade80; --t-primary-active: #24b47e;
  --t-primary-soft: #e6f7ef; --t-on-primary: #171717; --t-focus: rgb(36 180 126 / .45);
  --t-canvas: #ffffff; --t-surface-1: #ffffff; --t-surface-2: #f4f4f4;
  --t-surface-3: #fafafa; --t-surface-4: #ededed;
  --t-glass-rgb: 250 250 250;
  --t-invert: #1c1c1c; --t-invert-2: #202020; --t-on-invert: #ffffff; --t-on-invert-soft: #9a9a9a;
  --t-ink: #171717; --t-ink-body: #212121; --t-ink-muted: #5c5c5c; --t-ink-subtle: #707070;
  --t-hairline: #dfdfdf; --t-hairline-soft: #ededed; --t-hairline-strong: #c7c7c7;
  --t-ok: #10774a; --t-ok-soft: #e6f7ef;
  --t-warn: #8a6a00; --t-warn-soft: #fdf6d9;
  --t-danger: #d11d05; --t-danger-soft: #fceae7;
  --t-info: #054cff; --t-info-soft: #e6ecff;
  --t-scrim: rgb(23 23 23 / .34);
  --t-shadow-1: 0 1px 3px rgb(0 0 0 / .06);
  --t-shadow-2: 0 8px 24px rgb(0 0 0 / .08);
  --t-shadow-3: 0 16px 48px rgb(0 0 0 / .12);
  --t-rp-speech: #10774a; --t-rp-inner: #707070; --t-rp-action: #5c5c5c;
  --t-tag1: #e6f7ef; --t-tag1f: #10774a; --t-tag2: #e6ecff; --t-tag2f: #0a3fd1;
  --t-tag3: #eddbf9; --t-tag3f: #6b01c2; --t-tag4: #fdf6d9; --t-tag4f: #7a5c00;
  --t-tag5: #e8e5f7; --t-tag5f: #4b3a9e; --t-tag6: #fce4f1; --t-tag6f: #a3006a;
  --t-tag7: #fde4ec; --t-tag7f: #b0004a; --t-tag8: #f0f0f0; --t-tag8f: #5c5c5c;
  --t-shadow-0: none;
  --t-rp-system-bg: #f4f4f4;
  --t-rp-system-fg: #5c5c5c;
  --t-rp-think-bg: #f4f4f4;
}
[data-theme-name='supabase'][data-theme='dark'] {
  --t-primary: #3ecf8e; --t-primary-hover: #4ade80; --t-primary-active: #24b47e;
  --t-primary-soft: #14312a; --t-on-primary: #10231b; --t-focus: rgb(62 207 142 / .5);
  --t-canvas: #1c1c1c; --t-surface-1: #202020; --t-surface-2: #262626;
  --t-surface-3: #232323; --t-surface-4: #2e2e2e;
  --t-glass-rgb: 32 32 32;
  --t-invert: #fafafa; --t-invert-2: #ededed; --t-on-invert: #1c1c1c; --t-on-invert-soft: #707070;
  --t-ink: #fafafa; --t-ink-body: #ededed; --t-ink-muted: #b2b2b2; --t-ink-subtle: #9a9a9a;
  --t-hairline: #333333; --t-hairline-soft: #292929; --t-hairline-strong: #454545;
  --t-ok: #4ade80; --t-ok-soft: #13301f;
  --t-warn: #f5cf28; --t-warn-soft: #332b0a;
  --t-danger: #ff5c47; --t-danger-soft: #3a1a14;
  --t-info: #6f9dff; --t-info-soft: #16203c;
  --t-scrim: rgb(0 0 0 / .6);
  --t-shadow-1: 0 1px 3px rgb(0 0 0 / .5);
  --t-shadow-2: 0 8px 24px rgb(0 0 0 / .55);
  --t-shadow-3: 0 16px 48px rgb(0 0 0 / .65);
  --t-rp-speech: #5fe0a6; --t-rp-inner: #9a9a9a; --t-rp-action: #b2b2b2;
  --t-tag1: #13301f; --t-tag1f: #6fe0a8; --t-tag2: #16203c; --t-tag2f: #93b4ff;
  --t-tag3: #291a3a; --t-tag3f: #c69bea; --t-tag4: #332b0a; --t-tag4f: #f0d160;
  --t-tag5: #221f3a; --t-tag5f: #a9a0f0; --t-tag6: #341b2b; --t-tag6f: #eb8dc0;
  --t-tag7: #351a24; --t-tag7f: #f28aa8; --t-tag8: #2e2e2e; --t-tag8f: #b2b2b2;
  --t-shadow-0: none;
  --t-rp-system-bg: #262626;
  --t-rp-system-fg: #b2b2b2;
  --t-rp-think-bg: #262626;
}

/* ============================================================
   主题级定向覆盖 —— 仅 Supabase
   ------------------------------------------------------------
   约定同上:只改颜色 / 字体 / 圆角 / 阴影 / 动效 / 磨砂。
   ============================================================ */

/* 1. 方角是品牌签名:全系统拒绝药丸,按钮与分段统一 6px。
      徽章与标签保留药丸 —— 品牌自己的 pill-tag 也是全圆的。 */
[data-theme-name='supabase'] .btn,
[data-theme-name='supabase'] .icon-btn,
[data-theme-name='supabase'] .seg,
[data-theme-name='supabase'] .seg-btn,
[data-theme-name='supabase'] .tab,
[data-theme-name='supabase'] .composer-send { border-radius: var(--t-r-sm); }

/* 2. 绿底按钮配近黑文字是品牌的特有选择(不用白字);
      次按钮走强描边而非灰底。 */
[data-theme-name='supabase'] .btn-ghost { color: var(--ink); border-color: var(--hairline-strong); }
[data-theme-name='supabase'] .btn-ghost:hover { background: var(--surface-2); border-color: var(--ink); }
[data-theme-name='supabase'] .btn:not(.btn-primary):not(.btn-ghost):not(.btn-danger) {
  border-color: var(--hairline-strong); background: var(--surface-1);
}

/* 3. 卡片平贴白底,只留 1px 细线;悬浮不抬升只加深描边 */
[data-theme-name='supabase'] .card:hover { box-shadow: var(--shadow-1); border-color: var(--hairline-strong); }
[data-theme-name='supabase'] .stat:hover { transform: none; }

/* 4. 等宽块反色到近黑,开发者调性可见 */
[data-theme-name='supabase'] .code-block { background: var(--surface-invert); color: var(--on-invert); }
[data-theme-name='supabase'] .api-token-value { background: var(--surface-invert); color: var(--on-invert); }

/* 5. 绿色稀缺:选中态用绿描边而非绿填充,只有主按钮与发送键是绿填充 */
[data-theme-name='supabase'] .nav-item.is-active { background: var(--primary-soft); color: var(--ink); }
[data-theme-name='supabase'] .nav-item.is-active > i { color: var(--primary-active); }
[data-theme-name='supabase'] .nav-item.is-active .nav-count { background: var(--primary); color: var(--on-primary); }
[data-theme-name='supabase'] .tab.is-active { background: var(--surface-1); color: var(--ink); border: 1px solid var(--hairline-strong); box-shadow: none; }
[data-theme-name='supabase'] .side-logo,
[data-theme-name='supabase'] .auth-logo { background: var(--primary); color: var(--on-primary); }