@charset "utf-8";
/* ==========================================================================
   Movie Drama · 短剧模板 —— 主题 2：海洋蓝（Ocean Blue）
   用法：在 html/public/include.html 与 html/vod/player.html 中，
        将主题样式文件名改为本文件（drama-theme-2.css）即可。
   ========================================================================== */
:root {
    /* ---- 品牌主色 ---- */
    --drama-primary: #0077b6;               /* 主色：海洋蓝 */
    --drama-primary-dark: #005c8e;          /* 主色加深（按压态） */
    --drama-primary-light: #e3f2fa;         /* 主色浅底（标签/按钮底） */
    --drama-gradient: linear-gradient(135deg, #0e93d8 0%, #0069a3 100%); /* 品牌渐变 */
    --drama-glow: 0 .25rem .75rem rgba(0, 119, 182, .28);  /* 主色投影 */

    /* ---- 辅色 ---- */
    --drama-accent: #f59e0b;                /* 辅助色：评分/强调 */

    /* ---- 主色上的前景色 ---- */
    --drama-on-primary: #ffffff;            /* 主色渐变上的文字/图标 */
    --drama-tabbar-bg: rgba(255, 255, 255, .96); /* 底部 TabBar 半透明底 */

    /* ---- 文字 ---- */
    --drama-text: #16283d;                  /* 主文字 */
    --drama-text-2: #52657a;                /* 次级文字 */
    --drama-text-3: #96a6b8;                /* 弱化文字 */

    /* ---- 背景 / 线条 ---- */
    --drama-page: #e8eff5;                  /* 容器外底色（PC 两侧） */
    --drama-bg: #f2f7fb;                    /* 内容区浅灰底 */
    --drama-card: #ffffff;                  /* 卡片 / 主体底色 */
    --drama-border: #e2ecf4;                /* 分割线 */

    /* ---- 圆角 / 阴影 ---- */
    --drama-radius: .5rem;                  /* 大圆角：卡片 / 区块 */
    --drama-radius-sm: .32rem;              /* 小圆角：小图 / 小按钮 */
    --drama-shadow: 0 .16rem .8rem rgba(22, 40, 61, .08); /* 卡片投影 */
}