/**
 * 文件路径: /opt/captive-portal/static/css/tokens.css
 * 文件说明: 设计令牌（design tokens）—— "冷石墨"编辑式极简视觉语言
 * 纯黑白灰为主，靠字重/发丝线/留白分层，不用阴影和圆角堆砌质感
 * 所有页面共用，必须在其余样式表之前加载
 */

:root {
    /* ---------- 中性灰阶（冷调石墨，带一点点蓝灰底色，而非纯中性灰） ---------- */
    --color-gray-50:  #F6F7F9;
    --color-gray-100: #ECEEF1;
    --color-gray-200: #DDE1E6;
    --color-gray-300: #C7CCD2;
    --color-gray-400: #9AA3AD;
    --color-gray-500: #6E7681;
    --color-gray-600: #4B525C;
    --color-gray-700: #33393F;
    --color-gray-800: #24282D;
    --color-gray-900: #1A1D21;

    /* ---------- 语义色（亮色模式，克制饱和度，只用于极小面积的状态点/徽章） ---------- */
    --color-success:      #2E6B4C;
    --color-success-bg:   #E8F0EA;
    --color-success-text: #24543C;
    --color-warning:      #966A2A;
    --color-warning-bg:   #F3ECDF;
    --color-warning-text: #74501E;
    --color-danger:       #A93B2E;
    --color-danger-bg:    #F4E7E4;
    --color-danger-text:  #832D22;
    --color-info:         #4B5A6B;
    --color-info-bg:      #E8ECEF;
    --color-info-text:    #364552;

    /* ---------- 语义角色映射（组件实际消费这些变量） ---------- */
    --bg-app:          var(--color-gray-100);
    --bg-surface:      #F8F9FA;
    --bg-surface-alt:  var(--color-gray-100);
    --border-default:  var(--color-gray-200);
    --border-strong:   var(--color-gray-300);
    /* 编辑式强边框：卡片/表格外框、页头分隔线用这条，和内部发丝线区分层级 */
    --border-ink:       var(--color-gray-900);
    --text-primary:    var(--color-gray-900);
    --text-secondary:  var(--color-gray-500);
    --text-on-primary: #F8F9FA;

    /* 强调色：只用于链接/焦点环，刻意压灰，不引入真正的彩色 */
    --brand:        #4B5A6B;
    --brand-hover:  #33404D;
    --brand-active: #242E38;

    /* 主操作色（CTA 按钮）：纯墨黑，唯一的"填色"元素 */
    --ink:       var(--color-gray-900);
    --ink-hover: #000000;
    --ink-text:  #F8F9FA;

    /* ---------- 阴影 / 层级（几乎不用阴影，分层靠边框；仅浮层类组件保留极轻阴影） ---------- */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: 0 16px 32px -12px rgba(26, 29, 33, .16);
    --shadow-xl: 0 24px 48px -12px rgba(26, 29, 33, .22);

    /* ---------- 间距（4px 基准） ---------- */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* ---------- 圆角（近乎直角，编辑式排版靠线条而非圆角做质感） ---------- */
    --radius-sm: 2px;
    --radius-md: 3px;
    --radius-lg: 4px;
    --radius-xl: 6px;
    --radius-full: 9999px;

    /* ---------- 字体 / 字号刻度 ---------- */
    /* Libre Franklin 覆盖拉丁字符/数字，中文字符按字形自动回退到系统 CJK 字体 */
    --font-sans: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    /* 衬线斜体点缀字体：仅用于小段引导语/副标题，不用于正文 */
    --font-accent: "Newsreader", Georgia, "Songti SC", serif;
    --font-mono: "IBM Plex Mono", "Courier New", monospace;
    --text-caption:  .75rem;
    --text-body-sm:  .875rem;
    --text-body:     1rem;
    --text-body-lg:  1.125rem;
    --text-h3:       1.375rem;
    --text-h2:       1.75rem;
    --text-h1:       2.25rem;
    --text-display:  3rem;
    --leading-tight:  1.2;
    --leading-normal: 1.6;

    /* ---------- 动效 ---------- */
    --ease-standard: cubic-bezier(.4, 0, .2, 1);
    --duration-fast: 150ms;
    --duration-base: 200ms;
    --duration-slow: 320ms;

    /* ---------- 层级（z-index 刻度，替代随手写的魔法数字） ---------- */
    --z-sticky:   100;
    --z-overlay:  999;
    --z-sidebar:  1000;
    --z-menu-toggle: 1001;
    --z-toast:    1200;
}

/* ---------- 暗色主题（同一套冷石墨语言反相，而非另起一套配色） ---------- */
[data-theme="dark"] {
    --bg-app:         #101214;
    --bg-surface:     #16181B;
    --bg-surface-alt: #1D2024;
    --border-default: #2A2E33;
    --border-strong:  #3A4048;
    --border-ink:     #F0F2F4;
    --text-primary:   #F0F2F4;
    --text-secondary: #9AA3AD;

    --brand:        #93A3B5;
    --brand-hover:  #B4C1CF;
    --brand-active: #D2DAE1;

    /* 暗色模式下 CTA 反转为白底黑字，与亮色模式的黑底白字相呼应 */
    --ink:       #F0F2F4;
    --ink-hover: #FFFFFF;
    --ink-text:  #101214;

    --color-success:      #6FB08C;
    --color-success-bg:   rgba(111, 176, 140, .14);
    --color-success-text: #93C9AB;
    --color-warning:      #D3A15C;
    --color-warning-bg:   rgba(211, 161, 92, .14);
    --color-warning-text: #E3BC85;
    --color-danger:       #D97A6B;
    --color-danger-bg:    rgba(217, 122, 107, .14);
    --color-danger-text:  #E59C90;
    --color-info:         #93A3B5;
    --color-info-bg:      rgba(147, 163, 181, .14);
    --color-info-text:    #B4C1CF;

    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: 0 16px 32px -12px rgba(0, 0, 0, .5);
    --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, .6);
}