/* Single design foundation for the whole interface.
 *
 * This is the only place raw color, type, spacing, radius, shadow and motion
 * values are allowed to live. Page and component stylesheets must consume the
 * semantic roles below instead of writing literals of their own.
 *
 * Load order does not decide anything here: the user-mode block below uses a
 * higher-specificity selector than `:root`, so the user palette wins on user
 * pages no matter which file the browser parsed first. Admin and public-site
 * pages never match those selectors and keep the neutral defaults.
 *
 * Color source of truth for the user side: docs/user-interface-color-system.md
 */

:root {
  /* ---------------------------------------------------------------- type */
  --text-3xl: 30px;
  --text-2xl: 24px;
  --text-xl: 18px;
  --text-lg: 16px;
  --text-md: 14px;
  --text-sm: 13px;
  --text-xs: 12px;
  --text-2xs: 11px;

  --leading-tight: 1.25;
  --leading-snug: 1.4;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --font-sans: "PingFang SC", "Noto Sans SC", -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-serif: "Songti SC", "STSong", serif;
  --font-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  /* ------------------------------------------------------------- spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* -------------------------------------------------------------- radius */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --radius-card: 7px;

  /* -------------------------------------------------------------- shadow */
  --shadow-xs: 0 1px 2px rgba(13, 18, 14, 0.05);
  --shadow-sm: 0 2px 6px rgba(13, 18, 14, 0.07);
  --shadow-md: 0 8px 24px rgba(13, 18, 14, 0.1);
  --shadow-lg: 0 18px 48px rgba(13, 18, 14, 0.16);
  --shadow-xl: 0 28px 80px rgba(13, 18, 14, 0.24);

  /* --------------------------------------------------------------- layer */
  --layer-base: 0;
  --layer-sticky: 10;
  --layer-drawer: 40;
  --layer-overlay: 60;
  --layer-modal: 80;
  --layer-toast: 100;

  /* -------------------------------------------------------------- motion */
  --motion-fast: 140ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* --------------------------------------------------- control geometry */
  --control-height-admin: 36px;
  --control-height-compact: 36px;
  --control-height-action: 38px;
  --control-height-user: 40px;
  --control-height-primary: 46px;
  --control-height-icon-user: 38px;
  --control-height-icon-admin: 34px;
  --control-radius: var(--radius-sm);
  --icon-size: 16px;
  --icon-stroke: 1.75;

  /* ----------------------------------------------- brand palette (竹青) */
  --brand-paper: #eff8f1;
  --brand-layer-1: #eef6f0;
  --brand-layer-2: #ecf4ee;
  --brand-layer-3: #e9f1eb;
  --brand-overlay: #dde6df;
  --brand-surface: #f5fcf6;
  --brand-sidebar: #dbf0e3;
  --brand-hover: #c5e3d0;
  --brand-active: #b4ddc4;
  --brand-anchor: #00a86b;
  --brand-text: #009b5f;
  --brand-primary: #007b42;
  --brand-primary-hover: #006931;
  --brand-primary-soft: #dff3e7;
  --brand-ink: #0d120e;
  --brand-ink-secondary: #49524a;
  --brand-ink-tertiary: #677069;
  --brand-caption: #abb5ac;

  /* ------------------------------------------------- status palette */
  --status-ok: #00810c;
  --status-ok-soft: #e4f5e6;
  --status-warn: #835e1d;
  --status-warn-soft: #fdf0de;
  --status-danger: #82111f;
  --status-danger-soft: #fbeaec;

  /* ------------------------------------ semantic roles, neutral default */
  --color-bg: #ffffff;
  --color-bg-app: #fafafa;
  --color-surface: #ffffff;
  --color-surface-muted: #f6f6f7;
  --color-sidebar: #f3f4f6;
  --color-hover: #f1f2f4;
  --color-active: #e5e7eb;
  --color-ink: #111111;
  --color-ink-secondary: #4b5563;
  --color-ink-tertiary: #6b7280;
  --color-caption: #9ca3af;
  --color-line: rgba(17, 17, 17, 0.12);
  --color-line-strong: rgba(17, 17, 17, 0.2);
  --color-primary: #111111;
  --color-primary-hover: #000000;
  --color-primary-soft: #f6f6f7;
  --color-on-primary: #ffffff;
  --color-heading: var(--color-ink);
  --color-selected: var(--color-active);
  --color-group-bg: var(--color-surface-muted);
  --color-focus-ring: rgba(37, 99, 235, 0.24);
  --color-backdrop: rgba(13, 18, 14, 0.58);
  --color-success: var(--status-ok);
  --color-success-soft: var(--status-ok-soft);
  --color-warning: var(--status-warn);
  --color-warning-soft: var(--status-warn-soft);
  --color-danger: #c2410c;
  --color-danger-soft: #fff7ed;
  --color-disabled: #d1d5db;
  --color-shadow: rgba(17, 17, 17, 0.16);
}

/* User-facing palette. Higher specificity than `:root`, so it wins regardless
   of which stylesheet the browser parsed first. */
html.lingling-user-theme body.mode-user,
body.zhuqing-user-interface,
html.lingling-user-entry {
  --color-bg: var(--brand-paper);
  --color-bg-app: var(--brand-paper);
  --color-surface: var(--brand-surface);
  --color-surface-muted: var(--brand-layer-1);
  --color-sidebar: var(--brand-sidebar);
  --color-hover: var(--brand-layer-3);
  --color-active: var(--brand-active);
  --color-ink: #0d120e;
  --color-ink-secondary: #49524a;
  --color-ink-tertiary: #677069;
  --color-caption: #abb5ac;
  --color-line: rgba(13, 18, 14, 0.1);
  --color-line-strong: rgba(13, 18, 14, 0.16);
  --color-primary: var(--brand-primary);
  --color-primary-hover: var(--brand-primary-hover);
  --color-primary-soft: var(--brand-primary-soft);
  --color-on-primary: var(--brand-paper);
  --color-heading: var(--color-ink);
  --color-selected: var(--color-active);
  --color-group-bg: var(--brand-sidebar);
  --color-focus-ring: rgba(0, 123, 66, 0.2);
  --color-backdrop: rgba(13, 18, 14, 0.58);
  --color-success: var(--status-ok);
  --color-success-soft: var(--status-ok-soft);
  --color-warning: var(--status-warn);
  --color-warning-soft: var(--status-warn-soft);
  --color-danger: var(--status-danger);
  --color-danger-soft: var(--status-danger-soft);
  --color-disabled: #dfe7e1;
  --color-shadow: rgba(13, 18, 14, 0.14);
}

/* Administrator palette. Component styles consume these roles so the admin
   surface can be maintained independently from the user-facing palette. */
body.mode-admin {
  --color-bg: #f5faf6;
  --color-bg-app: #eff8f1;
  --color-surface: #ffffff;
  --color-surface-muted: #eef6f0;
  --color-sidebar: #eef6f0;
  --color-hover: #dff0e5;
  --color-active: #cbe7d6;
  --color-ink: #0d120e;
  --color-ink-secondary: #49524a;
  --color-ink-tertiary: #677069;
  --color-caption: #abb5ac;
  --color-line: #d6e4da;
  --color-line-strong: #b8d0c1;
  --color-primary: #007b42;
  --color-primary-hover: #006931;
  --color-primary-soft: #dff0e5;
  --color-on-primary: #ffffff;
  --color-heading: #174a32;
  --color-selected: #cbe7d6;
  --color-group-bg: #dbf0e3;
  --color-focus-ring: rgba(0, 123, 66, 0.2);
}

/* The public prompt gallery keeps its dark editorial presentation while
   consuming the same semantic roles as the user-facing workspace. */
body.prompt-cases-page {
  --color-bg: #06110e;
  --color-bg-app: #06110e;
  --color-surface: #0a1712;
  --color-surface-muted: #10221b;
  --color-sidebar: #0d1c16;
  --color-hover: #163328;
  --color-active: #1b4939;
  --color-ink: #edf6f1;
  --color-ink-secondary: #91a69b;
  --color-ink-tertiary: #5e7469;
  --color-caption: #61766b;
  --color-line: rgba(142, 174, 160, 0.2);
  --color-line-strong: rgba(142, 174, 160, 0.34);
  --color-primary: #55d6b5;
  --color-primary-hover: #72e1c4;
  --color-primary-soft: #1ba784;
  --color-on-primary: #06110e;
  --color-heading: #edf6f1;
  --color-selected: #1b4939;
  --color-group-bg: #10221b;
  --color-focus-ring: rgba(85, 214, 181, 0.24);
  --color-backdrop: rgba(1, 6, 4, 0.82);
  --color-disabled: #294137;
  --color-shadow: rgba(0, 0, 0, 0.34);
}