/* ============================================================
   tokens.css — 设计令牌（Design Tokens）
   三层结构：Primitive → Semantic → Component
   ============================================================ */

:root {
  /* ============================================================
     PRIMITIVE TOKENS — 原始令牌（设计原始值）
     ============================================================ */

  /* --- 颜色原始值 --- */
  --blue-50:  #eef4fa;
  --blue-100: #d6e4f0;
  --blue-200: #b3cfe3;
  --blue-300: #8bb4d0;
  --blue-400: #5b9bd5;
  --blue-500: #2e75b6;
  --blue-600: #1f4e79;
  --blue-700: #163a5c;
  --blue-800: #0f2740;
  --blue-900: #081626;

  --gray-25:  #fafbfc;
  --gray-50:  #f5f7fa;
  --gray-100: #ebeef3;
  --gray-200: #dde2ea;
  --gray-300: #c4ccd6;
  --gray-400: #9aa4b1;
  --gray-500: #6b7684;
  --gray-600: #4a5462;
  --gray-700: #333b47;
  --gray-800: #1f2630;
  --gray-900: #11151c;

  --green-500: #70ad47;
  --green-600: #5a8f37;
  --green-700: #467529;

  --red-500:   #c0392b;
  --red-600:   #a53024;
  --orange-500:#e67e22;

  /* --- 字号原始值 --- */
  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-36: 36px;
  --fs-40: 40px;
  --fs-48: 48px;

  /* --- 字重 --- */
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;

  /* --- 行高 --- */
  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-normal: 1.5;
  --lh-relaxed:1.7;

  /* --- 间距刻度（8px 基线）--- */
  --sp-0:   0;
  --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;
  --sp-20:  80px;
  --sp-24:  96px;

  /* --- 圆角 --- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl:16px;
  --radius-full: 9999px;

  /* --- 阴影 --- */
  --shadow-xs:  0 1px 2px rgba(17,21,28,.06);
  --shadow-sm:  0 2px 4px rgba(17,21,28,.08);
  --shadow-md:  0 4px 12px rgba(31,78,121,.10);
  --shadow-lg:  0 8px 24px rgba(31,78,121,.14);
  --shadow-xl:  0 16px 40px rgba(31,78,121,.18);
  --shadow-focus: 0 0 0 3px rgba(46,117,182,.35);

  /* --- z-index 层级 --- */
  --z-base:   0;
  --z-dropdown:100;
  --z-sticky: 200;
  --z-header: 300;
  --z-overlay:400;
  --z-modal:  500;
  --z-toast:  600;
  --z-max:    999;

  /* --- 过渡 --- */
  --transition-fast:  150ms ease;
  --transition-base:  250ms ease;
  --transition-slow:  350ms ease;

  /* ============================================================
     SEMANTIC TOKENS — 语义令牌（颜色角色）
     ============================================================ */

  /* 背景 */
  --bg-page:        var(--gray-50);
  --bg-surface:     #ffffff;
  --bg-surface-alt: var(--gray-100);
  --bg-subtle:      var(--blue-50);
  --bg-inverse:     var(--blue-600);
  --bg-overlay:     rgba(8,22,38,.55);

  /* 文本 */
  --text-primary:   var(--gray-800);
  --text-secondary: var(--gray-600);
  --text-tertiary:  var(--gray-500);
  --text-placeholder:var(--gray-400);
  --text-disabled:  var(--gray-300);
  --text-inverse:   #ffffff;
  --text-link:      var(--blue-500);
  --text-link-hover:var(--blue-600);
  --text-on-primary: #ffffff;

  /* 边框 */
  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);
  --border-focus:   var(--blue-500);
  --border-input:   var(--gray-300);
  --border-input-hover:var(--blue-300);

  /* 品牌色 */
  --brand-primary:    var(--blue-600);
  --brand-primary-hover:var(--blue-700);
  --brand-primary-active:var(--blue-800);
  --brand-accent:    var(--blue-500);
  --brand-accent-soft:var(--blue-400);
  --brand-accent-bg: var(--blue-50);
  --brand-success:   var(--green-500);
  --brand-success-hover:var(--green-600);
  --brand-danger:    var(--red-500);
  --brand-danger-hover:var(--red-600);
  --brand-warn:      var(--orange-500);

  /* 状态色 */
  --state-success-bg:  #eaf3e0;
  --state-success-text:var(--green-700);
  --state-success-border:var(--green-500);
  --state-warn-bg:    #fdf0e0;
  --state-warn-text:  #8a4a10;
  --state-warn-border:var(--orange-500);
  --state-danger-bg:  #fbecea;
  --state-danger-text:var(--red-600);
  --state-danger-border:var(--red-500);
  --state-info-bg:    var(--blue-50);
  --state-info-text:  var(--blue-700);
  --state-info-border:var(--blue-300);

  /* ============================================================
     COMPONENT TOKENS — 组件令牌
     ============================================================ */

  /* Header */
  --header-height:        64px;
  --header-height-mobile: 56px;
  --header-bg:            #ffffff;
  --header-border:         var(--border-subtle);
  --header-shadow:         var(--shadow-sm);

  /* Container */
  --container-max:   1280px;
  --container-px:    var(--sp-6);
  --reading-max:     760px;

  /* Button */
  --btn-radius:        var(--radius-md);
  --btn-padding-y:     var(--sp-2);
  --btn-padding-x:     var(--sp-5);
  --btn-font-size:     var(--fs-14);
  --btn-font-weight:   var(--fw-500);
  --btn-line-height:   1.4;

  /* Input */
  --input-height:      40px;
  --input-radius:       var(--radius-md);
  --input-padding-x:   var(--sp-3);
  --input-bg:           #ffffff;
  --input-font-size:    var(--fs-14);

  /* Card */
  --card-radius:        var(--radius-lg);
  --card-bg:            #ffffff;
  --card-border:        var(--border-subtle);
  --card-shadow:        var(--shadow-sm);
  --card-shadow-hover:  var(--shadow-md);
  --card-padding:       var(--sp-5);

  /* Nav */
  --nav-item-height:    40px;
  --nav-item-padding-x: var(--sp-3);
  --nav-item-radius:    var(--radius-sm);

  /* Footer */
  --footer-bg:          var(--blue-800);
  --footer-text:        rgba(255,255,255,.75);
  --footer-text-strong: #ffffff;
}

/* ============================================================
   DARK THEME — 深色模式映射（系统偏好）
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-page:        var(--gray-900);
    --bg-surface:     var(--gray-800);
    --bg-surface-alt: var(--gray-700);
    --bg-subtle:      var(--blue-900);

    --text-primary:   rgba(255,255,255,.92);
    --text-secondary: rgba(255,255,255,.65);
    --text-tertiary:  rgba(255,255,255,.45);
    --text-placeholder:rgba(255,255,255,.3);
    --text-disabled:  rgba(255,255,255,.2);

    --border-subtle:  rgba(255,255,255,.08);
    --border-default: rgba(255,255,255,.14);
    --border-strong:  rgba(255,255,255,.22);

    --card-bg:        var(--gray-800);
    --card-border:    rgba(255,255,255,.08);
    --card-shadow:    0 2px 8px rgba(0,0,0,.3);

    --header-bg:      var(--gray-800);
    --header-border:  rgba(255,255,255,.06);

    --input-bg:       var(--gray-700);
    --border-input:   rgba(255,255,255,.14);

    --state-success-bg:  rgba(112,173,71,.15);
    --state-success-text:#a8d68a;
    --state-danger-bg:   rgba(192,57,43,.15);
    --state-danger-text: #e08a80;
    --state-warn-bg:     rgba(230,126,34,.15);
    --state-warn-text:   #f0b87a;
    --state-info-bg:     rgba(91,155,213,.12);
    --state-info-text:   #8bb4d0;
  }
}