/* ==========================================================================
   Design Tokens — NJU Red Cross Platform
   Single source of truth. Components must never hard-code raw colour values.
   Two token surfaces:
     [data-surface="portal"] — public service portal, warm paper light theme
     [data-surface="console"] — internal operations console, neutral dark theme
   ========================================================================== */

:root {
  /* ---- Brand ---------------------------------------------------------- */
  --brand-crimson: #d8283f;
  --brand-crimson-deep: #a3132a;
  --brand-plum: #5c1230;
  --brand-ink: #14100f;

  /* ---- Typography ----------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text",
    "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-serif: "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --fs-display: 2.75rem;
  --fs-h1: 1.9rem;
  --fs-h2: 1.375rem;
  --fs-h3: 1.0625rem;
  --fs-title: 0.9375rem;
  --fs-body: 0.875rem;
  --fs-secondary: 0.8125rem;
  --fs-caption: 0.75rem;
  --fs-label: 0.6875rem;
  --fs-data: 0.8125rem;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;

  --tracking-display: -0.032em;
  --tracking-heading: -0.018em;
  --tracking-body: -0.006em;
  --tracking-label: 0.08em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 590;
  --fw-bold: 680;

  /* ---- Spacing — 4px base, 8px rhythm --------------------------------- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;
  --s16: 64px;
  --s20: 80px;
  --s24: 96px;
  --s32: 128px;

  /* ---- Radius --------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 13px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* ---- Layout --------------------------------------------------------- */
  --nav-w: 248px;
  --nav-w-collapsed: 64px;
  --inspector-w: 384px;
  --topbar-h: 52px;
  --content-max: 1360px;
  --prose-max: 68ch;

  /* ---- Motion --------------------------------------------------------- */
  --dur-instant: 90ms;
  --dur-1: 140ms;
  --dur-2: 200ms;
  --dur-3: 280ms;
  --dur-4: 380ms;
  --dur-5: 620ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);
  --ease-spring: cubic-bezier(0.34, 1.42, 0.52, 1);
  --ease-snap: cubic-bezier(0.2, 0.9, 0.2, 1);

  /* ---- Z index -------------------------------------------------------- */
  --z-ambient: 0;
  --z-base: 1;
  --z-sticky: 20;
  --z-dock: 40;
  --z-popover: 60;
  --z-overlay: 80;
  --z-toast: 100;

  /* ---- Semantic hues shared by both surfaces -------------------------- */
  --hue-success: 152;
  --hue-warning: 36;
  --hue-error: 6;
  --hue-info: 214;
}

/* ==========================================================================
   Public portal — warm paper, editorial, high legibility
   ========================================================================== */
[data-surface="portal"] {
  --bg-base: #f7f4f1;
  --bg-sunken: #efeae5;
  --surface: #fffefd;
  --surface-raised: #ffffff;
  --surface-inverse: #17110f;
  --surface-accent-soft: #fdeff0;

  --border: rgba(24, 16, 14, 0.09);
  --border-strong: rgba(24, 16, 14, 0.16);
  --border-hover: rgba(24, 16, 14, 0.26);
  --border-accent: rgba(216, 40, 63, 0.4);

  --text-primary: #191311;
  --text-secondary: #5b514c;
  --text-muted: #8c817b;
  --text-faint: #b3a9a3;
  --text-on-accent: #fffaf9;
  --text-on-inverse: #f6f1ee;

  --accent: #c31f35;
  --accent-hover: #ab1729;
  --accent-soft: rgba(195, 31, 53, 0.09);
  --accent-ring: rgba(195, 31, 53, 0.22);

  --success: hsl(var(--hue-success) 62% 32%);
  --success-soft: hsl(var(--hue-success) 58% 94%);
  --warning: hsl(var(--hue-warning) 88% 34%);
  --warning-soft: hsl(var(--hue-warning) 90% 94%);
  --error: hsl(var(--hue-error) 74% 43%);
  --error-soft: hsl(var(--hue-error) 84% 96%);
  --info: hsl(var(--hue-info) 76% 40%);
  --info-soft: hsl(var(--hue-info) 84% 95%);

  --e1: 0 1px 2px rgba(24, 16, 14, 0.05);
  --e2: 0 2px 6px -1px rgba(24, 16, 14, 0.07), 0 1px 2px rgba(24, 16, 14, 0.05);
  --e3: 0 10px 28px -10px rgba(24, 16, 14, 0.17), 0 2px 6px rgba(24, 16, 14, 0.05);
  --e4: 0 28px 70px -24px rgba(24, 16, 14, 0.3), 0 4px 12px rgba(24, 16, 14, 0.07);

  --mesh-1: rgba(195, 31, 53, 0.1);
  --mesh-2: rgba(92, 18, 48, 0.07);
  --mesh-3: rgba(215, 160, 96, 0.08);
  --grain-opacity: 0.032;
  --scrim: rgba(24, 16, 14, 0.36);
  --skeleton-base: rgba(24, 16, 14, 0.055);
  --skeleton-sheen: rgba(255, 255, 255, 0.72);
  color-scheme: light;
}

/* ==========================================================================
   Operations console — neutral dark workspace, dense, keyboard first
   ========================================================================== */
[data-surface="console"] {
  --bg-base: #0b0c0e;
  --bg-sunken: #08090a;
  --surface: #121417;
  --surface-raised: #191c20;
  --surface-inverse: #f4f3f2;
  --surface-accent-soft: rgba(233, 70, 90, 0.11);

  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.12);
  --border-hover: rgba(255, 255, 255, 0.2);
  --border-accent: rgba(233, 70, 90, 0.45);

  --text-primary: #ecedee;
  --text-secondary: #9ba1a6;
  --text-muted: #70767c;
  --text-faint: #4d5257;
  --text-on-accent: #fff6f6;
  --text-on-inverse: #14100f;

  --accent: #e9465a;
  --accent-hover: #f45a6c;
  --accent-soft: rgba(233, 70, 90, 0.13);
  --accent-ring: rgba(233, 70, 90, 0.34);

  --success: hsl(var(--hue-success) 54% 52%);
  --success-soft: hsl(var(--hue-success) 46% 16%);
  --warning: hsl(var(--hue-warning) 88% 58%);
  --warning-soft: hsl(var(--hue-warning) 62% 16%);
  --error: hsl(var(--hue-error) 84% 60%);
  --error-soft: hsl(var(--hue-error) 60% 17%);
  --info: hsl(var(--hue-info) 88% 63%);
  --info-soft: hsl(var(--hue-info) 60% 17%);

  --e1: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
  --e2: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --e3: 0 14px 34px -14px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --e4: 0 36px 80px -28px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08);

  --mesh-1: rgba(233, 70, 90, 0.16);
  --mesh-2: rgba(92, 18, 48, 0.2);
  --mesh-3: rgba(58, 96, 160, 0.12);
  --grain-opacity: 0.05;
  --scrim: rgba(4, 5, 6, 0.66);
  --skeleton-base: rgba(255, 255, 255, 0.045);
  --skeleton-sheen: rgba(255, 255, 255, 0.09);
  color-scheme: dark;
}

/* Compact density for data-heavy console views */
[data-density="compact"] {
  --row-h: 32px;
  --field-h: 30px;
  --control-h: 28px;
}
[data-density="comfortable"] {
  --row-h: 42px;
  --field-h: 36px;
  --control-h: 32px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
    --dur-4: 1ms;
    --dur-5: 1ms;
  }
}