/*
 * studio 皮肤 —— ADR-026
 *
 * 规则：本文件只做**令牌赋值**（允许在媒体查询内赋值）与纯视觉覆盖，不得出现布局属性声明。
 * 结构与默认值（紫蓝/绿蓝的改造前版式）定义在：
 *   - webapp/src/styles/shell.css（导航栏 .st-nav*）
 *   - webapp/src/styles/home.css （Hero 与页签 .st-pill*）
 *
 * 本文件把这些令牌覆写为「在线生图风格」的胶囊版式；值来自原 webapp/src/styles/studio.css。
 */

:root[data-theme="studio"] {
    /* ---------- Jinja 页面配色：映射进 cyberpunk 的 --theme-* 变量体系 ----------
       未在此覆写的令牌（success/warning/error/pink/yellow 等语义色）沿用
       purple-blue.css 的 :root 兜底值，无需重复定义。 */
    --theme-accent: #00b4d8;
    --theme-accent-glow: #00f0ff;
    --theme-accent-purple: #0090b8;   /* 渐变第二站：青色加深，替代紫蓝的紫 */
    /* ADR-026：强调色 RGB 三元组，供 rgba(var(--…-rgb), α) 形式的边框/发光引用 */
    --theme-accent-rgb: 0, 180, 216;
    --theme-accent-purple-rgb: 0, 144, 184;
    --theme-bg-dark: #0a0e17;
    --theme-bg-card: #0d1520;
    --theme-bg-soft: #111d2a;
    /* ADR-026：底色 RGB 三元组，供半透明遮罩/页头等 rgba() 引用 */
    --theme-bg-dark-rgb: 10, 14, 23;
    --theme-bg-card-rgb: 13, 21, 32;
    --theme-bg-soft-rgb: 17, 29, 42;
    --theme-border: #1a2a3a;
    --theme-border-light: rgba(0, 180, 216, 0.15);
    --theme-text-main: #e0e7ef;
    --theme-text-muted: #6a8fa8;
    --theme-text-faint: #94a3b8;
    --theme-success-rgb: 0, 255, 136;
    --theme-warning-rgb: 255, 136, 0;
    --theme-error-rgb: 255, 68, 68;
    --theme-pink-rgb: 255, 74, 141;
    --theme-yellow-rgb: 255, 215, 0;
    --theme-shadow: rgba(0, 180, 216, 0.15);
    --theme-gm: linear-gradient(135deg, #00b4d8, #00f0ff);
    --theme-primary: #00b4d8;
    --theme-secondary: #00f0ff;

    /* ---------- 导航栏：胶囊控件 ---------- */
    --nav-bg: rgba(10, 14, 23, 0.9);
    --nav-border: #1a2a3a;
    --nav-tint: 255, 255, 255;
    --radius-control: 999px;

    --logo-fs: 1.05rem;
    --logo-weight: 800;
    --logo-style: italic;
    --logo-tracking: -0.02em;
    --logo-bg: none;
    --logo-fill: #e0e7ef;

    --search-bg: rgba(255, 255, 255, 0.06);
    --search-border: rgba(255, 255, 255, 0.1);
    --search-focus-border: rgba(0, 240, 255, 0.4);
    --search-focus-shadow: 0 0 0 1px rgba(0, 240, 255, 0.15), 0 0 15px rgba(0, 240, 255, 0.05);
    --search-placeholder: #3a5a70;

    --nav-link-color: #6a8fa8;
    --nav-link-hover-color: #00f0ff;
    --nav-link-hover-bg: rgba(0, 240, 255, 0.06);
    --nav-link-hover-border: rgba(0, 240, 255, 0.3);
    --nav-link-pad-y: 0.35rem;
    --nav-link-pad-x: 0.9rem;
    --nav-link-active-bg: linear-gradient(135deg, #00b4d8, #00f0ff);
    --nav-link-active-color: #0a0e17;
    --nav-link-active-shadow: 0 4px 15px rgba(0, 240, 255, 0.3);

    --chip-bg: rgba(255, 255, 255, 0.06);
    --chip-border: rgba(255, 255, 255, 0.1);

    /* ---------- Hero 标题区 ---------- */
    --hero-title-weight: 800;
    --hero-title-style: italic;
    --hero-title-tracking: -0.03em;
    --hero-title-bg: none;
    --hero-title-fill: #e0e7ef;
    --hero-title-mb: 0.4rem;

    --hero-sub-fs: 0.7rem;
    --hero-sub-weight: 700;
    --hero-sub-transform: uppercase;
    --hero-sub-tracking: 0.4em;
    --hero-sub-color: #6a8fa8;
    --hero-sub-max-width: none;
    --hero-sub-mb: 1.4rem;

    /* ---------- 胶囊分段页签 ---------- */
    --pill-gap: 2px;
    --pill-group-bg: rgba(255, 255, 255, 0.06);
    --pill-group-border: 1px solid rgba(255, 255, 255, 0.1);
    --pill-group-radius: 999px;
    --pill-group-pad: 3px;

    --pill-radius: 999px;
    --pill-height: 42px;
    --pill-pad-y: 0;
    --pill-pad-x: 1.6rem;
    --pill-inner-gap: 6px;
    --pill-fs: 0.85rem;
    --pill-color: #6a8fa8;
    --pill-bg: transparent;
    --pill-border: none;
    --pill-hover-color: #00f0ff;
    --pill-hover-border: none;
    --pill-hover-transform: none;
    --pill-active-bg: linear-gradient(135deg, #00b4d8, #00f0ff);
    --pill-active-border: transparent;
    --pill-active-color: #0a0e17;
    --pill-active-shadow: 0 4px 15px rgba(0, 240, 255, 0.3);
}

/* 移动端：页签纵向堆叠（布局令牌在媒体查询内赋值，见 ADR-026 决策 5） */
@media (max-width: 768px) {
    :root[data-theme="studio"] {
        --layout-pill-group-dir: column;
        --pill-group-radius-md: 18px;
        --pill-group-width-md: 100%;
        --pill-group-max-width-md: 300px;
        --pill-width-md: 100%;
    }
}