/* Link 虚拟卡 · design tokens — direction A「墨与纸 Ink & Paper」
   Warm ivory paper, ink type, hairline rules, one deep-teal accent; cards are matte graphite metal.
   Light is the default. Dark (warm charcoal) applies with :root[data-theme="dark"], or with the OS
   preference unless the page sets :root[data-theme="light"]. Keep the two dark blocks identical. */

:root {
  color-scheme: light;

  /* ---- Type families (system only; Latin before CJK so Linux does not draw Latin with CJK fonts) ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", "Nimbus Sans", Helvetica, Arial,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "WenQuanYi Zen Hei", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Helvetica Neue", "Nimbus Sans", Helvetica, Arial,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "WenQuanYi Zen Hei", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Mono", Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;

  /* ---- Type scale ---- */
  --text-2xs: 11px;   /* Latin caps only (TEST, EXP); never CJK */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 40px;
  --text-4xl: 56px;
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-body: 1.6;   /* CJK body */
  --leading-loose: 1.75;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-heading: 500;     /* titles: medium on Apple/Windows, and no Latin-bold vs CJK-regular clash on Linux */
  --tracking-display: -0.022em;
  --tracking-tight: -0.01em;
  --tracking-label: 0.06em;   /* small CJK labels */
  --tracking-caps: 0.14em;    /* Latin small caps */

  /* ---- Spacing (4 px base, 8 px rhythm) ---- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* ---- Radius ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --radius-card: 4.6% / 7.3%; /* virtual card: circular corners at any size (width/height ratio 1.586) */

  /* ---- Layout ---- */
  --sidebar-w: 248px;
  --topbar-h: 64px;
  --tabbar-h: 64px;
  --content-max: 1120px;
  --page-pad-x: 20px;
  --tap: 44px;               /* minimum touch target */

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
  --dur-pulse: 2000ms;
  --dur-shimmer: 1600ms;

  /* ---- Layers ---- */
  --z-sticky: 10;
  --z-nav: 20;
  --z-overlay: 40;
  --z-modal: 50;
  --z-toast: 60;

  /* ---- Surfaces & ink ---- */
  --bg: #F5F2EB;               /* paper */
  --bg-translucent: rgba(245, 242, 235, 0.86);
  --surface: #FCFAF6;          /* raised sheet */
  --surface-muted: #EFEBE3;    /* quiet fill, hover */
  --surface-sunken: #E9E4DA;
  --sidebar-bg: #F2EEE6;
  --input-bg: #FFFDF9;
  --input-border: #958E81;     /* 3:1 against surfaces (WCAG 1.4.11) */
  --row-hover: #F6F3EC;
  --text: #1B1A16;             /* ink */
  --text-2: #4E4A42;
  --text-3: #6A655B;           /* AA on bg, surface and surface-muted */
  --text-disabled: #A39D91;    /* decorative only, never body text */
  --border: #E3DED3;           /* hairline */
  --border-strong: #CDC6B8;
  --rule-ink: #1B1A16;         /* masthead rule */

  /* ---- Accent: deep teal ---- */
  --accent: #0F5C55;
  --accent-hover: #0A4943;
  --accent-text: #0D554E;      /* accent used as text */
  --accent-soft: #DDEAE5;
  --accent-ring: rgba(15, 92, 85, 0.18);
  --accent-bright: #4FB3A3;    /* accent on ink surfaces */
  --on-accent: #F7F5EF;

  /* ---- Primary action = ink ---- */
  --btn-primary-bg: #1B1A16;
  --btn-primary-hover: #33312B;
  --btn-primary-fg: #F7F5EF;

  /* ---- Feedback ---- */
  --success-text: #2E6427;
  --success-soft: #E3EDDC;
  --success-border: #BFD5B3;
  --warning-text: #7F4E00;
  --warning-soft: #F5EAD3;
  --warning-border: #E3CC9B;
  --warning-dot: #C98A12;
  --danger: #B0362E;
  --danger-text: #9E2E27;
  --danger-soft: #F6E1DD;
  --danger-border: #E5B9B2;
  --info-text: var(--accent-text);
  --info-soft: var(--accent-soft);
  --info-border: #B7D3CB;

  /* ---- Spend-request statuses (fg on bg passes AA; dot is the glyph) ---- */
  --status-created-fg: #4E4A42;
  --status-created-bg: #ECE8E0;
  --status-created-dot: #8C867A;
  --status-pending_approval-fg: #7F4E00;
  --status-pending_approval-bg: #F5EAD3;
  --status-pending_approval-dot: #C98A12;
  --status-requires_action-fg: #933A10;
  --status-requires_action-bg: #F6E3D7;
  --status-requires_action-dot: #D2642C;
  --status-approved-fg: #0D554E;
  --status-approved-bg: #DCEAE5;
  --status-approved-dot: #12877A;
  --status-submitted-fg: #2D4884;
  --status-submitted-bg: #E2E7F2;
  --status-submitted-dot: #4C70C4;
  --status-succeeded-fg: #2E6427;
  --status-succeeded-bg: #E3EDDC;
  --status-succeeded-dot: #4E9A3E;
  --status-failed-fg: #9E2E27;
  --status-failed-bg: #F6E1DD;
  --status-failed-dot: #D04A42;
  --status-denied-fg: #7A2D55;
  --status-denied-bg: #F1E1E9;
  --status-denied-dot: #B04C82;
  --status-expired-fg: #5F5A51;
  --status-expired-bg: #ECE8E0;
  --status-expired-dot: #8C867A;
  --status-cancelled-fg: #5F5A51;
  --status-cancelled-bg: transparent;
  --status-cancelled-dot: #8C867A;
  --status-unknown-fg: #4E4A42;
  --status-unknown-bg: #ECE8E0;
  --status-unknown-dot: #8C867A;

  /* ---- TEST mode (ochre signal, independent of the accent) ---- */
  --test-bg: #E2B04A;
  --test-fg: #2A1F05;
  --test-soft: #F6ECD2;
  --test-text: #7A5200;
  --test-border: #E0C384;

  /* ---- Controls ---- */
  --switch-off: #DCD6CA;
  --switch-knob: #FFFFFF;
  --meter-track: #E6E1D6;
  --meter-fill: var(--accent);
  --ring-track: #E3DED3;
  --skeleton-base: #ECE8E0;
  --skeleton-shine: rgba(255, 255, 255, 0.65);
  --selection: #CFE3DC;
  --focus-ring: #0F5C55;
  --overlay: rgba(27, 26, 22, 0.38);
  --qr-tile: #FCFAF6;          /* QR stays dark-on-light in both themes */

  /* ---- Toast (ink label) ---- */
  --toast-bg: #1B1A16;
  --toast-fg: #F2EEE6;
  --toast-muted: #B5AEA1;
  --toast-action: #7FD0C2;
  --toast-danger: #F08A84;

  /* ---- Elevation ---- */
  --shadow-xs: 0 1px 0 rgba(27, 26, 22, 0.04);
  --shadow-sm: 0 1px 2px rgba(27, 26, 22, 0.06), 0 1px 1px rgba(27, 26, 22, 0.03);
  --shadow-md: 0 10px 28px -14px rgba(27, 26, 22, 0.22), 0 2px 6px rgba(27, 26, 22, 0.05);
  --shadow-lg: 0 28px 70px -28px rgba(27, 26, 22, 0.38), 0 10px 24px -12px rgba(27, 26, 22, 0.14);
  /* Virtual card elevation = tight contact shadow (box-shadow) + ambient drop (filter). Chromium cuts a
     box-shadow's blur tail at the blur radius, which shows as a hard faint edge around rotated or lifted
     cards; drop-shadow() is painted to its full extent. */
  --shadow-card: 0 1px 1px rgba(20, 18, 14, 0.14), 0 6px 12px -6px rgba(20, 18, 14, 0.3);
  --shadow-card-drop: drop-shadow(0 24px 28px rgba(20, 18, 14, 0.3));

  /* ---- Virtual card metal ---- */
  --vcard-text: #EEEAE1;
  --vcard-text-2: rgba(238, 234, 225, 0.62);
  --vcard-rim: rgba(255, 255, 255, 0.13);
  --vcard-edge: rgba(255, 255, 255, 0.05);
  --vcard-graphite-1: #3D3B37;
  --vcard-graphite-2: #23221F;
  --vcard-graphite-3: #121210;
  --vcard-bronze-1: #4A4036;
  --vcard-bronze-2: #29241F;
  --vcard-bronze-3: #151210;
  --vcard-slate-1: #363C3F;
  --vcard-slate-2: #1F2426;
  --vcard-slate-3: #111415;
  --vcard-pending-border: #C9C2B4;
  --vcard-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --vcard-brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='240'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
}

@media (min-width: 600px) {
  :root { --page-pad-x: 32px; }
}
@media (min-width: 1280px) {
  :root { --page-pad-x: 56px; }
}

/* ===================== Dark: warm charcoal (block 1 of 2) ===================== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171613;
  --bg-translucent: rgba(23, 22, 19, 0.84);
  --surface: #1F1E1A;
  --surface-muted: #282621;
  --surface-sunken: #131210;
  --sidebar-bg: #1A1916;
  --input-bg: #1B1A17;
  --input-border: #716B60;
  --row-hover: #23221E;
  --text: #EEE9DF;
  --text-2: #C2BBAE;
  --text-3: #9A9386;
  --text-disabled: #5F5A50;
  --border: #302E28;
  --border-strong: #46423A;
  --rule-ink: #EEE9DF;

  --accent: #5FB7A8;
  --accent-hover: #78C6B8;
  --accent-text: #7FCDBF;
  --accent-soft: #1E3530;
  --accent-ring: rgba(95, 183, 168, 0.24);
  --accent-bright: #5FB7A8;
  --on-accent: #0E1A18;

  --btn-primary-bg: #EEE9DF;
  --btn-primary-hover: #FFFFFF;
  --btn-primary-fg: #171613;

  --success-text: #9CD08C;
  --success-soft: #1F2E1B;
  --success-border: #34502C;
  --warning-text: #E9BC66;
  --warning-soft: #33280F;
  --warning-border: #5A4519;
  --warning-dot: #E0A63A;
  --danger: #EE7F76;
  --danger-text: #F2938B;
  --danger-soft: #3A1E1B;
  --danger-border: #63322D;
  --info-border: #2C4E47;

  --status-created-fg: #CDC6B9;
  --status-created-bg: #2A2823;
  --status-created-dot: #9A9386;
  --status-pending_approval-fg: #EBC06E;
  --status-pending_approval-bg: #34290F;
  --status-pending_approval-dot: #E0A63A;
  --status-requires_action-fg: #F2A27A;
  --status-requires_action-bg: #3A2418;
  --status-requires_action-dot: #E57E4A;
  --status-approved-fg: #86D2C4;
  --status-approved-bg: #19332E;
  --status-approved-dot: #5FB7A8;
  --status-submitted-fg: #A8BDF0;
  --status-submitted-bg: #1F2638;
  --status-submitted-dot: #7D9BE3;
  --status-succeeded-fg: #A3D594;
  --status-succeeded-bg: #1F301B;
  --status-succeeded-dot: #79BC67;
  --status-failed-fg: #F3958D;
  --status-failed-bg: #3B1F1C;
  --status-failed-dot: #E7665D;
  --status-denied-fg: #E9A6CA;
  --status-denied-bg: #36202C;
  --status-denied-dot: #D27BAA;
  --status-expired-fg: #ADA699;
  --status-expired-bg: #26241F;
  --status-expired-dot: #857E72;
  --status-cancelled-fg: #ADA699;
  --status-cancelled-bg: transparent;
  --status-cancelled-dot: #857E72;
  --status-unknown-fg: #CDC6B9;
  --status-unknown-bg: #2A2823;
  --status-unknown-dot: #9A9386;

  --test-bg: #DDAA45;
  --test-fg: #231904;
  --test-soft: #33290F;
  --test-text: #E8BE6A;
  --test-border: #5C4A1E;

  --switch-off: #3A3731;
  --switch-knob: #F4F0E8;
  --meter-track: #302E28;
  --meter-fill: var(--accent);
  --ring-track: #34312B;
  --skeleton-base: #24221E;
  --skeleton-shine: rgba(255, 255, 255, 0.05);
  --selection: #2B4A44;
  --focus-ring: #7FCDBF;
  --overlay: rgba(8, 7, 6, 0.62);
  --qr-tile: #F3EFE6;

  --toast-bg: #EEE9DF;
  --toast-fg: #1B1A16;
  --toast-muted: #5E594F;
  --toast-action: #0D554E;
  --toast-danger: #A3302A;

  --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.25);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 12px 28px -14px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 30px 70px -24px rgba(0, 0, 0, 0.75), 0 10px 24px -12px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 1px 1px rgba(0, 0, 0, 0.5), 0 6px 12px -6px rgba(0, 0, 0, 0.6);
  --shadow-card-drop: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.62));

  --vcard-rim: rgba(255, 255, 255, 0.16);
  --vcard-edge: rgba(255, 255, 255, 0.07);
  --vcard-graphite-1: #45433E;
  --vcard-graphite-2: #282724;
  --vcard-graphite-3: #151513;
  --vcard-bronze-1: #52473C;
  --vcard-bronze-2: #2E2822;
  --vcard-bronze-3: #181512;
  --vcard-slate-1: #3E4549;
  --vcard-slate-2: #24292C;
  --vcard-slate-3: #141718;
  --vcard-pending-border: #4C483F;
}

/* ===================== Dark: warm charcoal (block 2 of 2, OS preference) ===================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #171613;
    --bg-translucent: rgba(23, 22, 19, 0.84);
    --surface: #1F1E1A;
    --surface-muted: #282621;
    --surface-sunken: #131210;
    --sidebar-bg: #1A1916;
    --input-bg: #1B1A17;
    --input-border: #716B60;
    --row-hover: #23221E;
    --text: #EEE9DF;
    --text-2: #C2BBAE;
    --text-3: #9A9386;
    --text-disabled: #5F5A50;
    --border: #302E28;
    --border-strong: #46423A;
    --rule-ink: #EEE9DF;

    --accent: #5FB7A8;
    --accent-hover: #78C6B8;
    --accent-text: #7FCDBF;
    --accent-soft: #1E3530;
    --accent-ring: rgba(95, 183, 168, 0.24);
    --accent-bright: #5FB7A8;
    --on-accent: #0E1A18;

    --btn-primary-bg: #EEE9DF;
    --btn-primary-hover: #FFFFFF;
    --btn-primary-fg: #171613;

    --success-text: #9CD08C;
    --success-soft: #1F2E1B;
    --success-border: #34502C;
    --warning-text: #E9BC66;
    --warning-soft: #33280F;
    --warning-border: #5A4519;
    --warning-dot: #E0A63A;
    --danger: #EE7F76;
    --danger-text: #F2938B;
    --danger-soft: #3A1E1B;
    --danger-border: #63322D;
    --info-border: #2C4E47;

    --status-created-fg: #CDC6B9;
    --status-created-bg: #2A2823;
    --status-created-dot: #9A9386;
    --status-pending_approval-fg: #EBC06E;
    --status-pending_approval-bg: #34290F;
    --status-pending_approval-dot: #E0A63A;
    --status-requires_action-fg: #F2A27A;
    --status-requires_action-bg: #3A2418;
    --status-requires_action-dot: #E57E4A;
    --status-approved-fg: #86D2C4;
    --status-approved-bg: #19332E;
    --status-approved-dot: #5FB7A8;
    --status-submitted-fg: #A8BDF0;
    --status-submitted-bg: #1F2638;
    --status-submitted-dot: #7D9BE3;
    --status-succeeded-fg: #A3D594;
    --status-succeeded-bg: #1F301B;
    --status-succeeded-dot: #79BC67;
    --status-failed-fg: #F3958D;
    --status-failed-bg: #3B1F1C;
    --status-failed-dot: #E7665D;
    --status-denied-fg: #E9A6CA;
    --status-denied-bg: #36202C;
    --status-denied-dot: #D27BAA;
    --status-expired-fg: #ADA699;
    --status-expired-bg: #26241F;
    --status-expired-dot: #857E72;
    --status-cancelled-fg: #ADA699;
    --status-cancelled-bg: transparent;
    --status-cancelled-dot: #857E72;
    --status-unknown-fg: #CDC6B9;
    --status-unknown-bg: #2A2823;
    --status-unknown-dot: #9A9386;

    --test-bg: #DDAA45;
    --test-fg: #231904;
    --test-soft: #33290F;
    --test-text: #E8BE6A;
    --test-border: #5C4A1E;

    --switch-off: #3A3731;
    --switch-knob: #F4F0E8;
    --meter-track: #302E28;
    --meter-fill: var(--accent);
    --ring-track: #34312B;
    --skeleton-base: #24221E;
    --skeleton-shine: rgba(255, 255, 255, 0.05);
    --selection: #2B4A44;
    --focus-ring: #7FCDBF;
    --overlay: rgba(8, 7, 6, 0.62);
    --qr-tile: #F3EFE6;

    --toast-bg: #EEE9DF;
    --toast-fg: #1B1A16;
    --toast-muted: #5E594F;
    --toast-action: #0D554E;
    --toast-danger: #A3302A;

    --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.25);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 12px 28px -14px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 30px 70px -24px rgba(0, 0, 0, 0.75), 0 10px 24px -12px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 1px 1px rgba(0, 0, 0, 0.5), 0 6px 12px -6px rgba(0, 0, 0, 0.6);
    --shadow-card-drop: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.62));

    --vcard-rim: rgba(255, 255, 255, 0.16);
    --vcard-edge: rgba(255, 255, 255, 0.07);
    --vcard-graphite-1: #45433E;
    --vcard-graphite-2: #282724;
    --vcard-graphite-3: #151513;
    --vcard-bronze-1: #52473C;
    --vcard-bronze-2: #2E2822;
    --vcard-bronze-3: #181512;
    --vcard-slate-1: #3E4549;
    --vcard-slate-2: #24292C;
    --vcard-slate-3: #141718;
    --vcard-pending-border: #4C483F;
  }
}