/* ==============================================================================
 * 胡sir牌大闸蟹智慧农业系统 - 全站设计令牌底座（design tokens）
 * 2026-09-19 新增：消费者溯源页（trace）率先接入；admin/console/screen 页面后续渐进迁移。
 *
 * 设计语言：国际大厂质感（Apple/Stripe 级）——
 *   近白底 + 纯白卡片 + 墨色文字的中性阶；湖域深绿 #0F382C 主色；蟹金 #C59B27 点缀；
 *   1px 发丝边框、三级柔和阴影、12/16/20 圆角阶、8pt 间距体系、12~32 字号阶。
 *
 * 硬约束：零外部字体、零 CDN；所有颜色组合满足正文对比度 ≥ 4.5:1；
 *         焦点态必须可见（focus-visible）；动效尊重 prefers-reduced-motion。
 * ============================================================================== */

:root {
    /* ---- 中性色阶：近白底 / 纯白卡片 / 墨色文字 ---- */
    --u-bg: #f7f7f5;             /* 页面底色（暖近白，降低纯灰的冷感） */
    --u-surface: #ffffff;        /* 一级表面：卡片纯白 */
    --u-surface-2: #fafaf8;      /* 二级表面：卡片内嵌区块 */
    --u-ink: #1b1e21;            /* 主文字·墨色（对白底 ≈ 15.9:1） */
    --u-ink-2: #494f55;          /* 次级文字（对白底 ≈ 7.6:1） */
    --u-ink-3: #6b7178;          /* 辅助/占位文字（对白底 ≈ 5.0:1） */
    --u-ink-inverse: #f5f7f5;    /* 深绿底上的文字 */
    --u-line: rgba(27, 30, 33, 0.10);        /* 1px 发丝边框 */
    --u-line-strong: rgba(27, 30, 33, 0.17); /* 强一级发丝线（分隔/描边按钮） */

    /* ---- 品牌色：湖域深绿主色 + 蟹金点缀 ---- */
    --u-brand: #0f382c;          /* 主色：湖域深绿 */
    --u-brand-strong: #0a291f;   /* 主色加深（渐变端点/hover） */
    --u-brand-bright: #1b5342;   /* 主色提亮（深底上的次级文字 ≈ 7:1） */
    --u-brand-soft: #e9f0ec;     /* 主色浅底（徽标/选中态） */
    --u-brand-on: #ffffff;       /* 主色底上的文字 */
    --u-gold: #c59b27;           /* 点缀金（图形/描边用） */
    --u-gold-ink: #7c611a;       /* 金色文字级（对白底 ≈ 5.6:1；正文金一律用它） */
    --u-gold-soft: #f8f1de;      /* 金色浅底 */
    --u-gold-on-dark: #e2c266;   /* 深绿底上的金（对比增强） */

    /* ---- 语义色（预警/警示，均配文字级深色变体） ---- */
    --u-danger: #b3261e;
    --u-danger-ink: #8c1d18;     /* 断裂警示文字（对浅红底 ≥ 4.5:1） */
    --u-danger-soft: #fcefec;
    --u-caution-ink: #6b5200;    /* 预警文字（对浅金底 ≈ 6:1） */
    --u-caution-soft: #fdf6e2;

    /* ---- 圆角阶 ---- */
    --u-radius-s: 12px;
    --u-radius-m: 16px;
    --u-radius-l: 20px;
    --u-radius-pill: 999px;

    /* ---- 8pt 间距体系（1=4px 基准） ---- */
    --u-space-1: 4px;
    --u-space-2: 8px;
    --u-space-3: 12px;
    --u-space-4: 16px;
    --u-space-5: 24px;
    --u-space-6: 32px;
    --u-space-7: 40px;
    --u-space-8: 48px;

    /* ---- 字号阶（12/14/16/20/24/32；大数字用 tabular-nums 防跳动） ---- */
    --u-font-xs: 12px;
    --u-font-s: 14px;
    --u-font-m: 16px;
    --u-font-l: 20px;
    --u-font-xl: 24px;
    --u-font-2xl: 32px;

    /* ---- 三级柔和阴影（近黑低透明度双层，避免彩色投影的廉价感） ---- */
    --u-shadow-1: 0 1px 2px rgba(22, 26, 24, 0.05), 0 1px 6px rgba(22, 26, 24, 0.04);
    --u-shadow-2: 0 2px 6px rgba(22, 26, 24, 0.06), 0 10px 28px rgba(22, 26, 24, 0.07);
    --u-shadow-3: 0 4px 12px rgba(22, 26, 24, 0.08), 0 18px 44px rgba(22, 26, 24, 0.10);

    /* ---- 聚焦环（键盘可达性：任何可交互元素 :focus-visible 必须可见） ---- */
    --u-focus-ring: 0 0 0 2px var(--u-bg), 0 0 0 4px rgba(15, 56, 44, 0.55);
    --u-focus-ring-gold: 0 0 0 2px var(--u-bg), 0 0 0 4px rgba(197, 155, 39, 0.65);

    /* ---- 动效令牌（微交互 200ms ease） ---- */
    --u-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
    --u-dur: 200ms;

    /* ---- 字体族（零外部字体：系统栈优先，中文回退平顺） ---- */
    --u-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    --u-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;
}

/* ---- 基座样式：令牌消费方的公共底线 ---- */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--u-bg);
    color: var(--u-ink);
    font-family: var(--u-font-sans);
    font-size: var(--u-font-s);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* 键盘焦点可见：全局底线，组件可在此基础上细化（不得移除）。
   注意：这里不得写 border-radius——outline 自动跟随元素自身圆角，
   代设 4px 会让令牌接入页里「radius 定义在更早样式表」的药丸元素聚焦时变方角 */
:focus-visible {
    outline: 2px solid var(--u-brand);
    outline-offset: 2px;
}

/* 大数字等宽：KPI/编号/时刻防宽度跳动 */
.u-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.u-mono {
    font-family: var(--u-font-mono);
}

/* 无障碍隐藏（仅读屏可见） */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* 动效降级：眩晕障碍用户与省电偏好下关闭装饰性动画 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}