OneAuth/ui/assets/common.css

:root {
  /* --- Semantics: Theme (语义主题) --- */
  /* Primary Action */
  --color-primary: #4361ee;
  --color-primary-hover: #2563eb;
  --color-primary-active: #1d4ed8;
  --color-primary-text: #fff;

  /* Secondary Action */
  --color-secondary: #3f37c9;
  --color-secondary-hover: #3730a3;
  --color-secondary-active: #332d92;
  --color-secondary-text: #fff;

  /* Feedback */
  --color-info: #0ea5e9;
  --color-success: #22c55e;
  --color-warning: #fbbf24;
  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;

  /* Backgrounds */
  --bg-color: #f1f8ff;
  --bg-color-secondary: #f7fcff;
  --bg-color-tertiary: #e0edf3;

  /* Text */
  --text-color: #111827;
  --text-color-secondary: #374151;
  --text-color-tertiary: #6b7280;
  --text-color-disabled: #9ca3af;
  --text-color-inverse: #f1f5f9;

  /* Borders */
  --border-color: #d1d5db;
  --border-color-hover: #9ca3af;

  /* --- Dimensions: Spacing & Radius (尺寸) --- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* --- Typography (排版) --- */
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  /* Base size */
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;

  /* --- Effects (特效) --- */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* --- Transitions (动画) --- */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vh;
  font-family: var(--font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: var(--text-color);
  background-color: var(--bg-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body[theme='dark'] {
  --bg-color: #0f172a;
  --bg-color-secondary: #1e293b;
  --bg-color-tertiary: #334155;

  --text-color: #f1f5f9;
  --text-color-secondary: #94a3b8;
  --text-color-tertiary: #64748b;
  --text-color-inverse: #000000;

  --border-color: #334155;
  --border-color-hover: #475569;

  --color-primary: #60a5fa;
  --color-primary-hover: #3b82f6;
  --color-primary-active: #2563eb;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
}

body[theme='cyberpunk'] {
  /* Dark blue-purple background */
  --bg-color: #0b0c15;
  --bg-color-secondary: #161826;
  --bg-color-tertiary: #23253a;

  /* Main text white-ish for readability, accents in neon */
  --text-color: #e2e8f0;
  --text-color-secondary: #94a3b8;
  --text-color-tertiary: #64748b;
  --text-color-inverse: #0b0c15;

  /* Subtle border with neon hover */
  --border-color: #2d2f45;
  --border-color-hover: #ff00ff;

  /* Neon Pink Primary */
  --color-primary: #d946ef;
  --color-primary-hover: #e879f9;
  --color-primary-active: #c026d3;
  --color-primary-text: #ffffff;

  /* Neon Cyan Secondary */
  --color-secondary: #06b6d4;
  --color-secondary-hover: #22d3ee;
  --color-secondary-active: #0891b2;
  --color-secondary-text: #ffffff;

  /* Status colors */
  --color-success: #34d399;
  --color-warning: #facc15;
  --color-danger: #fb7185;
  --color-info: #38bdf8;

  /* Slightly squared but not harsh */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-full: 9999px;

  /* Glow effects */
  --shadow-sm: 0 0 8px -2px rgba(217, 70, 239, 0.3);
  --shadow-md: 0 0 15px -3px rgba(6, 182, 212, 0.3);
  --shadow-lg: 0 0 25px -5px rgba(217, 70, 239, 0.4);
}

body[theme='forest'] {
  --bg-color: #f1f8e9;
  --bg-color-secondary: #dcedc8;
  --bg-color-tertiary: #c5e1a5;

  --text-color: #1b5e20;
  --text-color-secondary: #33691e;
  --text-color-tertiary: #558b2f;

  --border-color: #aed581;
  --border-color-hover: #8bc34a;

  --color-primary: #2e7d32;
  --color-primary-hover: #1b5e20;

  --color-success: #4caf50;
  --color-warning: #afb42b;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
}