build-flow.portal/src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ============================================================
 * Pinguo design tokens
 * Brand: Pinguo (BuildFlow 门户网站)
 * Style: Restrained, elegant, Apple-inspired
 * Theme mode: light-dark (默认 dark)
 * ============================================================ */

:root {
  /* ===== PRIMITIVE PALETTE ===== */
  --brand-50: #e8f2ff;
  --brand-100: #cfe5ff;
  --brand-200: #9fcbff;
  --brand-300: #66abff;
  --brand-400: #2e8dff;
  --brand-500: #007aff;
  --brand-600: #0064d6;
  --brand-700: #004fad;
  --brand-800: #003b82;
  --brand-900: #00275a;

  --background-50: #ffffff;
  --background-100: #f7f7fa;
  --background-200: #f2f2f7;
  --background-300: #e5e5ea;
  --background-400: #d1d1d6;
  --background-500: #aeaeb2;
  --background-600: #8e8e93;
  --background-700: #3a3a3c;
  --background-800: #1c1c1e;
  --background-900: #000000;

  --text-50: #f5f5f7;
  --text-100: #e3e3e8;
  --text-200: #c7c7cc;
  --text-300: #aeaeb2;
  --text-400: #8e8e93;
  --text-500: #6e6e73;
  --text-600: #48484a;
  --text-700: #3c3c43;
  --text-800: #1d1d1f;
  --text-900: #000000;

  --icon-50: #f5f5f7;
  --icon-100: #e5e5ea;
  --icon-200: #d1d1d6;
  --icon-300: #c7c7cc;
  --icon-400: #aeaeb2;
  --icon-500: #8e8e93;
  --icon-600: #6e6e73;
  --icon-700: #48484a;
  --icon-800: #2c2c2e;
  --icon-900: #1d1d1f;

  --state-success: #34c759;
  --state-success-dark: #30d158;
  --state-success-surface: #e9f9ee;
  --state-success-foreground: #ffffff;

  --state-error: #ff3b30;
  --state-error-dark: #ff453a;
  --state-error-surface: #ffecea;
  --state-error-foreground: #ffffff;

  /* ===== SEMANTIC ROLES (light) ===== */
  --background: var(--background-50);
  --foreground: var(--text-800);
  --card: var(--background-50);
  --card-foreground: var(--text-800);
  --popover: var(--background-50);
  --popover-foreground: var(--text-900);

  --primary: var(--brand-500);
  --primary-foreground: var(--background-50);
  --secondary: var(--background-200);
  --secondary-foreground: var(--text-800);
  --muted: var(--background-200);
  --muted-foreground: var(--text-400);
  --accent: var(--background-100);
  --accent-foreground: var(--text-800);
  --destructive: var(--state-error);
  --destructive-foreground: var(--state-error-foreground);
  --success: var(--state-success);
  --success-foreground: var(--state-success-foreground);
  --border: var(--background-300);
  --input: var(--background-400);
  --ring: var(--brand-500);

  --icon-color: var(--icon-900);
  --icon-muted: var(--icon-500);

  --chart-1: var(--state-success);
  --chart-2: var(--brand-500);
  --chart-3: #ff9500;
  --chart-4: #5856d6;
  --chart-5: #af52de;

  --sidebar: var(--background-200);
  --sidebar-foreground: var(--text-800);
  --sidebar-primary: var(--brand-500);
  --sidebar-primary-foreground: var(--background-50);
  --sidebar-accent: var(--background-300);
  --sidebar-accent-foreground: var(--text-800);
  --sidebar-border: var(--background-300);
  --sidebar-ring: var(--brand-500);

  /* TYPOGRAPHY */
  --font-sans: "DM Sans", ui-sans-serif, sans-serif, system-ui;
  --font-mono: "JetBrains Mono", monospace;
  --tracking-normal: 0em;

  /* RADIUS */
  --radius: 1.2rem;

  /* SPACING */
  --spacing: 0.24rem;
}

/* ===== SEMANTIC ROLES (dark, 默认) ===== */
.dark {
  --background: var(--background-900);
  --foreground: var(--text-50);
  --card: var(--background-800);
  --card-foreground: var(--text-50);
  --popover: var(--background-700);
  --popover-foreground: var(--text-50);

  --primary: var(--brand-400);
  --primary-foreground: var(--background-900);
  --secondary: var(--background-800);
  --secondary-foreground: var(--text-50);
  --muted: var(--background-800);
  --muted-foreground: var(--text-400);
  --accent: var(--background-700);
  --accent-foreground: var(--text-50);
  --destructive: var(--state-error-dark);
  --destructive-foreground: var(--state-error-foreground);
  --success: var(--state-success-dark);
  --success-foreground: var(--state-success-foreground);
  --border: var(--background-700);
  --input: var(--background-700);
  --ring: var(--brand-400);

  --icon-color: var(--icon-50);
  --icon-muted: var(--icon-500);

  --chart-1: var(--state-success-dark);
  --chart-2: var(--brand-400);
  --chart-3: #ff9f0a;
  --chart-4: #5e5ce6;
  --chart-5: #bf5af2;

  --sidebar: var(--background-800);
  --sidebar-foreground: var(--text-50);
  --sidebar-primary: var(--brand-400);
  --sidebar-primary-foreground: var(--background-900);
  --sidebar-accent: var(--background-700);
  --sidebar-accent-foreground: var(--text-50);
  --sidebar-border: var(--background-700);
  --sidebar-ring: var(--brand-400);
}

@layer base {
  html {
    font-family: "DM Sans", ui-sans-serif, sans-serif, system-ui;
    line-height: 1.5;
    font-weight: 400;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    background: var(--background);
    color: var(--foreground);
    margin: 0;
    min-height: 100vh;
  }

  /* 滚动条美化 */
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--background-400);
    border-radius: 999px;
  }
  .dark ::-webkit-scrollbar-thumb {
    background: var(--background-600);
  }
}

@layer utilities {
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* 路由切换淡入：Layout 的 main 以 pathname 作 key，切换时重新挂载触发 */
  .page-fade-in {
    animation: page-fade-in 0.28s ease-out;
  }
  @keyframes page-fade-in {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .page-fade-in {
      animation: none;
    }
  }
}