jiu/web/assets/color.css

/* =========================================================================
   岩美 Design System — Foundations
   Tokens for color, type, spacing, radius, shadow.
   Import once at root: <link rel="stylesheet" href="colors_and_type.css">
   ========================================================================= */

:root {
  color-scheme: light;

  /* ---------- Brand: Primary (Slate Blue) ---------- */
  /* Trustworthy enterprise blue with a slight slate cast. */
  --brand-50:  #EEF4FB;
  --brand-100: #D6E5F5;
  --brand-200: #ADC9EA;
  --brand-300: #7FA8DA;
  --brand-400: #4F86C6;
  --brand-500: #2563AC;   /* Primary action */
  --brand-600: #1B4F8E;   /* Hover */
  --brand-700: #154072;   /* Pressed */
  --brand-800: #0F3057;
  --brand-900: #0A1F3B;   /* Brand ink — headers, logo on light bg */

  /* ---------- Neutrals (cool slate gray) ---------- */
  --gray-0:    #FFFFFF;
  --gray-25:   #FBFCFD;
  --gray-50:   #F5F7FA;
  --gray-100:  #ECEFF4;
  --gray-200:  #DCE2EB;
  --gray-300:  #C2CAD6;
  --gray-400:  #99A3B3;
  --gray-500:  #6E7888;
  --gray-600:  #4F5867;
  --gray-700:  #353C48;
  --gray-800:  #232934;
  --gray-900:  #141821;

  /* ---------- Accent (bordeaux / 酒红) ---------- */
  /* Used sparingly: brand context cue (wine), key highlights, marketing only. */
  --accent-50:  #FAEEF0;
  --accent-100: #F1D2D7;
  --accent-300: #C97B86;
  --accent-500: #8B2331;
  --accent-700: #5F1621;

  /* ---------- Semantic ---------- */
  --success-50:  #E8F5EE;
  --success-500: #2E8B57;
  --success-700: #1F6B41;

  --warning-50:  #FFF4DB;
  --warning-500: #E08E00;
  --warning-700: #A66700;

  --danger-50:   #FDECEC;
  --danger-500:  #D14343;
  --danger-700:  #9E2A2A;

  --info-50:     #E5F1FB;
  --info-500:    #2F7BD0;
  --info-700:    #1F5C9F;

  /* ---------- Semantic foreground / background ---------- */
  --bg-app:        var(--gray-50);
  --bg-surface:    var(--gray-0);
  --bg-raised:     var(--gray-0);
  --bg-sunken:     var(--gray-100);
  --bg-overlay:    rgba(20, 24, 33, 0.45);

  --fg-default:    var(--gray-800);
  --fg-muted:      var(--gray-600);
  --fg-subtle:     var(--gray-500);
  --fg-disabled:   var(--gray-400);
  --fg-on-brand:   #FFFFFF;
  --fg-link:       var(--brand-500);

  --border-subtle:  var(--gray-100);
  --border-default: var(--gray-200);
  --border-strong:  var(--gray-300);
  --border-focus:   var(--brand-500);

  /* ---------- Typography ---------- */
  /* Chinese-primary stack with PingFang on macOS/iOS, Microsoft YaHei on Windows,
     Noto Sans SC as web fallback (loaded via Google Fonts in index files). */
  --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Source Han Sans CN", "Noto Sans SC", -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "JetBrains Mono", "SF Mono", "Roboto Mono", Menlo, Consolas,
               "Microsoft YaHei", monospace;

  /* Type scale — mobile-first, scales up for desktop dashboards */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  14px;   /* dashboard body default */
  --text-lg:  16px;
  --text-xl:  18px;
  --text-2xl: 22px;
  --text-3xl: 28px;
  --text-4xl: 36px;
  --text-5xl: 48px;

  --leading-tight:  1.25;
  --leading-snug:   1.4;
  --leading-normal: 1.55;
  --leading-loose:  1.75;

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

  /* Tracking — Chinese reads better with subtle positive tracking */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-cn-display: 0.04em; /* Chinese display headers */

  /* ---------- Spacing (4px base) ---------- */
  --space-0:  0;
  --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;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- Radius — restrained, enterprise-grade ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;   /* default for inputs, buttons, badges */
  --radius-lg: 10px;  /* cards */
  --radius-xl: 14px;
  --radius-pill: 999px;

  /* ---------- Elevation — soft, neutral, no colored shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(20, 24, 33, 0.04);
  --shadow-sm: 0 1px 2px rgba(20, 24, 33, 0.06), 0 1px 3px rgba(20, 24, 33, 0.04);
  --shadow-md: 0 2px 4px rgba(20, 24, 33, 0.06), 0 4px 8px rgba(20, 24, 33, 0.05);
  --shadow-lg: 0 4px 12px rgba(20, 24, 33, 0.08), 0 12px 24px rgba(20, 24, 33, 0.06);
  --shadow-xl: 0 8px 20px rgba(20, 24, 33, 0.10), 0 20px 40px rgba(20, 24, 33, 0.08);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(20,24,33,0.04);
  --ring-focus: 0 0 0 3px rgba(37, 99, 172, 0.22);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --duration-fast:   120ms;
  --duration-base:   180ms;
  --duration-slow:   240ms;

  /* ---------- Layout ---------- */
  --layout-sidebar:    240px;
  --layout-sidebar-collapsed: 64px;
  --layout-topbar:     56px;
  --layout-content-max: 1440px;
}

/* =========================================================================
   Semantic element styles — apply to base elements within design system docs.
   These do NOT bleed into ui_kits / pages with their own styles.
   ========================================================================= */
.ds-typography {
  font-family: var(--font-sans);
  color: var(--fg-default);
  font-feature-settings: "tnum" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ds-typography h1,
.ds-h1 {
  font-size: var(--text-4xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-cn-display);
  color: var(--brand-900);
  margin: 0 0 var(--space-4);
}
.ds-typography h2,
.ds-h2 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-cn-display);
  color: var(--brand-900);
  margin: 0 0 var(--space-3);
}
.ds-typography h3,
.ds-h3 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--gray-900);
  margin: 0 0 var(--space-3);
}
.ds-typography h4,
.ds-h4 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--gray-900);
  margin: 0 0 var(--space-2);
}
.ds-typography h5,
.ds-h5 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--gray-800);
  margin: 0 0 var(--space-2);
}
.ds-typography p,
.ds-body {
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-default);
  margin: 0 0 var(--space-3);
}
.ds-typography small,
.ds-caption {
  font-size: var(--text-xs);
  color: var(--fg-muted);
  line-height: var(--leading-snug);
}
.ds-typography code,
.ds-mono {
  font-family: var(--font-mono);
  font-size: 0.93em;
  background: var(--gray-100);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  color: var(--gray-800);
}
.ds-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.ds-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: none; /* Chinese never uppercases */
  color: var(--fg-muted);
}

/* Focus ring shared across the system */
.ds-focusable:focus-visible,
:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-color: var(--border-focus);
}