/* ==========================================
 * 碰盏日记   - 设计令牌 (Design Tokens)
 * 设计概念: 琥珀夜光 Amber Night / 暖白琥珀 Warm Day
 * 支持日夜主题自动切换
 * ========================================== */

/* --- 夜间主题（默认）--- */
page, .theme-dark {
  --bg-base:        #0B0B14;
  --bg-card:        #1A1A28;
  --bg-card-alt:    #222236;
  --bg-elevated:    #28283E;

  --amber:          #E8A838;
  --amber-light:    #F5C563;
  --amber-deep:     #C47F17;
  --amber-glow:     rgba(232, 168, 56, 0.15);

  --coral:          #FF6B6B;
  --mint:           #5EC6A0;
  --lavender:       #8B85B8;

  --text-primary:   #FFFFFF;
  --text-secondary: #C0C0D2;
  --text-tertiary:  #9494AC;
  --text-on-amber:  #0B0B14;

  --border-subtle:  rgba(255, 255, 255, 0.10);
  --border-faint:   rgba(255, 255, 255, 0.08);
  --border-micro:   rgba(255, 255, 255, 0.05);
  --border-dashed:  rgba(255, 255, 255, 0.12);
  --border-active:  rgba(255, 255, 255, 0.12);
  --divider-color:  rgba(255, 255, 255, 0.08);
  --bg-subtle:      rgba(255, 255, 255, 0.03);
  --bg-hover:       rgba(255, 255, 255, 0.08);
  --bg-input:       rgba(255, 255, 255, 0.08);
  --btn-shimmer:    rgba(255, 255, 255, 0.15);
  --overlay-mask:   rgba(0, 0, 0, 0.6);
  --overlay-modal:  rgba(0, 0, 0, 0.7);

  --shadow-sm:      0 4rpx 12rpx rgba(0, 0, 0, 0.25);
  --shadow-md:      0 8rpx 32rpx rgba(0, 0, 0, 0.35);
  --shadow-amber:   0 8rpx 32rpx rgba(232, 168, 56, 0.25);
  --shadow-lg:      0 16rpx 48rpx rgba(0, 0, 0, 0.45);

  --card-gradient-start: #1A1510;
  --card-gradient-end:   #0D0B08;
  --nav-bar-bg:     #0B0B14;
  --nav-bar-text:   white;
  --tab-bar-bg:     #151520;
  --tab-bar-color:  #9494AC;
}

/* --- 白天主题（清透玻璃感 Crystal Day）--- */
.theme-light {
  --bg-base:        #F2F5F9;
  --bg-card:        #FFFFFF;
  --bg-card-alt:    #EEF2F7;
  --bg-elevated:    #E4EAF2;

  --amber:          #E09B2D;
  --amber-light:    #F2B84B;
  --amber-deep:     #C67F15;
  --amber-glow:     rgba(224, 155, 45, 0.10);

  --coral:          #F0655A;
  --mint:           #34B88C;
  --lavender:       #7C82A8;

  --text-primary:   #16233C;
  --text-secondary: #5D6B82;
  --text-tertiary:  #9BA8BA;
  --text-on-amber:  #FFFFFF;

  --border-subtle:  rgba(22, 40, 70, 0.08);
  --border-faint:   rgba(22, 40, 70, 0.06);
  --border-micro:   rgba(22, 40, 70, 0.04);
  --border-dashed:  rgba(22, 40, 70, 0.12);
  --border-active:  rgba(22, 40, 70, 0.10);
  --divider-color:  rgba(22, 40, 70, 0.06);
  --bg-subtle:      rgba(22, 40, 70, 0.02);
  --bg-hover:       rgba(22, 40, 70, 0.04);
  --bg-input:       rgba(22, 40, 70, 0.04);
  --btn-shimmer:    rgba(255, 255, 255, 0.45);
  --overlay-mask:   rgba(10, 20, 40, 0.4);
  --overlay-modal:  rgba(10, 20, 40, 0.5);

  --shadow-sm:      0 4rpx 16rpx rgba(30, 60, 110, 0.07);
  --shadow-md:      0 8rpx 32rpx rgba(30, 60, 110, 0.10);
  --shadow-amber:   0 8rpx 32rpx rgba(224, 155, 45, 0.22);
  --shadow-lg:      0 16rpx 48rpx rgba(30, 60, 110, 0.14);

  --card-gradient-start: #F8FAFD;
  --card-gradient-end:   #EFF3F9;
  --nav-bar-bg:     #F2F5F9;
  --nav-bar-text:   black;
  --tab-bar-bg:     #FFFFFF;
  --tab-bar-color:  #9BA8BA;
}

/* --- 色彩系统（SCSS变量桥接到CSS变量，含暗色回退值）--- */
$bg-base:        var(--bg-base, #0B0B14);
$bg-card:        var(--bg-card, #1A1A28);
$bg-card-alt:    var(--bg-card-alt, #222236);
$bg-elevated:    var(--bg-elevated, #28283E);

$amber:          var(--amber, #E8A838);
$amber-light:    var(--amber-light, #F5C563);
$amber-deep:     var(--amber-deep, #C47F17);
$amber-glow:     var(--amber-glow, rgba(232, 168, 56, 0.15));

$coral:          var(--coral, #FF6B6B);
$mint:           var(--mint, #5EC6A0);
$lavender:       var(--lavender, #8B85B8);

$text-primary:   var(--text-primary, #FFFFFF);
$text-secondary: var(--text-secondary, #C0C0D2);
$text-tertiary:  var(--text-tertiary, #9494AC);
$text-on-amber:  var(--text-on-amber, #0B0B14);

/* --- 字体 --- */
$font-base:      -apple-system, 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
$font-num:       'DIN Alternate', 'Helvetica Neue', -apple-system, sans-serif;

$fs-xs:          20rpx;
$fs-sm:          24rpx;
$fs-base:        28rpx;
$fs-md:          30rpx;
$fs-lg:          34rpx;
$fs-xl:          40rpx;
$fs-2xl:         52rpx;
$fs-3xl:         64rpx;
$fs-hero:        88rpx;

$fw-normal:      400;
$fw-medium:      500;
$fw-bold:        700;
$fw-black:       800;

$lh-tight:       1.2;
$lh-normal:      1.5;
$lh-loose:       1.8;

/* --- 间距 --- */
$sp-xs:          8rpx;
$sp-sm:          16rpx;
$sp-md:          24rpx;
$sp-lg:          32rpx;
$sp-xl:          48rpx;
$sp-2xl:         64rpx;
$sp-3xl:         96rpx;

/* --- 圆角 --- */
$radius-sm:      12rpx;
$radius-md:      20rpx;
$radius-lg:      28rpx;
$radius-xl:      40rpx;
$radius-full:    999rpx;

/* --- 阴影（SCSS变量桥接到CSS变量，含暗色回退值）--- */
$shadow-sm:      var(--shadow-sm, 0 4rpx 12rpx rgba(0, 0, 0, 0.25));
$shadow-md:      var(--shadow-md, 0 8rpx 32rpx rgba(0, 0, 0, 0.35));
$shadow-amber:   var(--shadow-amber, 0 8rpx 32rpx rgba(232, 168, 56, 0.25));
$shadow-lg:      var(--shadow-lg, 0 16rpx 48rpx rgba(0, 0, 0, 0.45));

/* --- 动画 --- */
$ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
$ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);
$duration-fast:  0.15s;
$duration-base:  0.3s;
$duration-slow:  0.5s;
/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */

/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */

/* 颜色变量 */

/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;

/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;

/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色

/* 边框颜色 */
$uni-border-color:#c8c7cc;

/* 尺寸变量 */

/* 文字尺寸 */
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16px;

/* 图片尺寸 */
$uni-img-size-sm:20px;
$uni-img-size-base:26px;
$uni-img-size-lg:40px;

/* Border Radius */
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;

/* 水平间距 */
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;

/* 垂直间距 */
$uni-spacing-col-sm: 4px;
$uni-spacing-col-base: 8px;
$uni-spacing-col-lg: 12px;

/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度

/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:20px;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:26px;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:15px;