/* ==========================================================================
   深蓝网上考试系统 —— 设计令牌（Design Tokens）
   亮/暗双主题，通过 <html data-theme="dark"> 切换
   ========================================================================== */

:root {
  /* ---------- 品牌色（深青色系，沉稳且现代） ---------- */
  --brand-50:  #e6faf5;
  --brand-100: #c9f1e9;
  --brand-200: #97e4d6;
  --brand-300: #5fd2c0;
  --brand-400: #2cbba8;
  --brand-500: #13a191;
  --brand-600: #0d8a7e;
  --brand-700: #0a6f64;
  --brand-800: #085852;
  --brand-900: #064741;

  /* ---------- 品牌标识（LOGO）取色 ----------
     LOGO 由 core/logo.js 内联成 SVG 注入，两条路径分别取：
       墨色（锚体 + DEEPBLUE 文字） fill: var(--logo-ink[, --logo-ink-strong])
       青绿环                     fill: var(--logo-accent)
     墨色刻意「留一个 currentColor 兜底」：任何地方只要没定义这两个变量，
     就回落到该元素自身的 color —— 于是放在深色卡片里的 LOGO 会自动变浅，
     放在亮底上的会自动变深，无需为每种背景准备一套图。
     下面按主题给出的默认值，是为了让 LOGO 在亮/暗底上保持自身的品牌调性
     （亮底用原本的深蓝、暗底提亮），而不是一味取中性灰。 */
  --logo-accent: #0bbc9e;
  --logo-ink: #0a4d47;
  --logo-ink-strong: #073530;

  /* ---------- 语义色 ---------- */
  --success-50:  #ecfdf5;
  --success-500: #10b981;
  --success-600: #059669;
  --success-700: #047857;

  --warning-50:  #fffbeb;
  --warning-500: #f59e0b;
  --warning-600: #d97706;

  --danger-50:  #fef2f2;
  --danger-500: #ef4444;
  --danger-600: #dc2626;
  --danger-700: #b91c1c;

  --info-50:  #eff6ff;
  --info-500: #3b82f6;
  --info-600: #2563eb;

  /* ---------- 中性色阶梯 ---------- */
  --gray-0:   #ffffff;
  --gray-25:  #fcfcfd;
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --gray-950: #030712;

  /* ---------- 间距（4px 基准） ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---------- 圆角 ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ---------- 字号 ---------- */
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 14px;
  --fs-md:   15px;
  --fs-lg:   17px;
  --fs-xl:   20px;
  --fs-2xl:  25px;
  --fs-3xl:  31px;
  --fs-4xl:  39px;

  --lh-tight: 1.25;
  --lh-normal: 1.6;
  --lh-loose: 1.8;

  /* ---------- 字体族 ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* ---------- 阴影 ---------- */
  --shadow-xs:  0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm:  0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md:  0 4px 8px -2px rgba(16, 24, 40, .10), 0 2px 4px -2px rgba(16, 24, 40, .06);
  --shadow-lg:  0 12px 16px -4px rgba(16, 24, 40, .10), 0 4px 6px -2px rgba(16, 24, 40, .05);
  --shadow-xl:  0 20px 24px -4px rgba(16, 24, 40, .10), 0 8px 8px -4px rgba(16, 24, 40, .04);
  --shadow-brand: 0 8px 20px -6px rgba(13, 138, 126, .45);

  /* ---------- 动画 ---------- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);

  --z-dropdown: 1000;
  --z-sticky:   1020;
  --z-modal:    1050;
  --z-toast:    1080;
}

/* ========================== 亮色主题（默认） ========================== */
:root,
[data-theme="light"] {
  --bg-app:      #f5f6fa;
  --bg-surface:  var(--gray-0);
  --bg-sunken:   var(--gray-50);
  --bg-hover:    var(--gray-100);
  --bg-active:   var(--gray-200);
  --bg-inverse:  var(--gray-900);

  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary:  var(--gray-400);
  --text-inverse:   var(--gray-0);
  --text-onbrand:   #ffffff;

  --border-subtle: var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong: var(--gray-400);

  --overlay: rgba(16, 24, 40, .48);

  --sidebar-bg:      var(--gray-0);
  --sidebar-border:  var(--gray-200);
  --header-bg:       rgba(255, 255, 255, .85);

  --focus-ring: 0 0 0 3px rgba(19, 161, 145, .28);
}

/* ========================== 暗色主题 ========================== */
[data-theme="dark"] {
  --bg-app:      #0d1117;
  --bg-surface:  #161b22;
  --bg-sunken:   #10141a;
  --bg-hover:    #21262d;
  --bg-active:   #2d333b;
  --bg-inverse:  var(--gray-100);

  --text-primary:   #e6edf3;
  --text-secondary: #9aa4b2;
  --text-tertiary:  #6b7280;
  --text-inverse:   var(--gray-900);
  --text-onbrand:   #ffffff;

  --border-subtle: #21262d;
  --border-default: #30363d;
  --border-strong: #484f58;

  --overlay: rgba(1, 4, 9, .72);

  --sidebar-bg:      #12161c;
  --sidebar-border:  #21262d;
  --header-bg:       rgba(22, 27, 34, .88);

  --brand-50:  #142420;
  --brand-100: #1a3230;

  /* LOGO：暗底把墨色提亮，并让青绿环略提饱和，保证在 #12161c 上的对比度 */
  --logo-accent: #1ad0b3;
  --logo-ink: #c9f1e9;
  --logo-ink-strong: #e6faf5;
  --success-50: #10281f;
  --warning-50: #2b2110;
  --danger-50:  #2c1416;
  --info-50:    #111c30;

  --shadow-xs:  0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:  0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3);
  --shadow-md:  0 4px 8px -2px rgba(0,0,0,.55), 0 2px 4px -2px rgba(0,0,0,.4);
  --shadow-lg:  0 12px 16px -4px rgba(0,0,0,.6), 0 4px 6px -2px rgba(0,0,0,.4);
  --shadow-xl:  0 20px 24px -4px rgba(0,0,0,.65), 0 8px 8px -4px rgba(0,0,0,.4);
  --shadow-brand: 0 8px 20px -6px rgba(45, 187, 168, .55);

  --focus-ring: 0 0 0 3px rgba(52, 191, 169, .4);

  color-scheme: dark;
}