/* ========================================================= UI Kit Design System — colors_and_type.css Single source of truth for tokens. Import in any HTML: ========================================================= */ /* ---------- Fonts ---------- */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"); :root { /* ============= COLORS ============= */ /* Brand scale (cobalt blue — matches ThemeService default primary #3b82f6) */ --brand-50: #eff6ff; --brand-100: #dbeafe; --brand-200: #bfdbfe; --brand-300: #93c5fd; --brand-400: #60a5fa; --brand-500: #3b82f6; --brand-600: #2563eb; --brand-700: #1d4ed8; --brand-800: #1e40af; --brand-900: #1e3a8a; /* Neutral / gray (Tailwind gray) */ --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; /* Slate (sidebar chrome) */ --slate-50: #f8fafc; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a; /* Semantic */ --success-50: #f0fdf4; --success-100: #dcfce7; --success-500: #22c55e; --success-600: #16a34a; --success-700: #15803d; --success-800: #166534; --warning-50: #fffbeb; --warning-100: #fef3c7; --warning-500: #f59e0b; --warning-600: #d97706; --warning-700: #b45309; --warning-800: #92400e; --danger-50: #fef2f2; --danger-100: #fee2e2; --danger-500: #ef4444; --danger-600: #dc2626; --danger-700: #b91c1c; --danger-800: #991b1b; --info-50: #ecfeff; --info-100: #cffafe; --info-500: #06b6d4; --info-600: #0891b2; --info-700: #0e7490; --info-800: #155e75; /* ============= SEMANTIC ROLES ============= */ --color-bg: #ffffff; --color-page: var(--gray-50); --color-surface: #ffffff; --color-surface-alt: var(--gray-50); --color-sidebar-bg: var(--slate-800); --color-sidebar-fg: var(--slate-300); --fg-1: var(--gray-900); /* primary text */ --fg-2: var(--gray-700); /* body */ --fg-3: var(--gray-500); /* muted */ --fg-4: var(--gray-400); /* placeholder / disabled */ --fg-on-brand: #ffffff; --fg-on-dark: #ffffff; --border-1: var(--gray-200); /* default hairline */ --border-2: var(--gray-300); /* input border */ --border-3: var(--gray-100); /* subtle divider */ --color-primary: var(--brand-600); --color-primary-hover: var(--brand-700); --color-primary-fg: #ffffff; --color-focus-ring: var(--brand-500); /* ============= TYPOGRAPHY ============= */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Scale (Tailwind-aligned) */ --text-xs: 12px; --leading-xs: 16px; --text-sm: 14px; --leading-sm: 20px; --text-base: 16px; --leading-base: 24px; --text-lg: 18px; --leading-lg: 28px; --text-xl: 20px; --leading-xl: 28px; --text-2xl: 24px; --leading-2xl: 32px; --text-3xl: 30px; --leading-3xl: 36px; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ============= SPACING (4-px grid) ============= */ --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; /* ============= RADII ============= */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 9999px; /* ============= SHADOWS ============= */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.05); --ring-hairline: 0 0 0 1px rgba(0, 0, 0, 0.05); /* ============= MOTION ============= */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 150ms; --duration-default: 200ms; --duration-slow: 300ms; /* ============= LAYOUT ============= */ --sidebar-w: 256px; --sidebar-w-collapsed: 72px; --navbar-h: 64px; } /* ============= DARK MODE ============= */ [data-theme="dark"] { --color-bg: var(--slate-900); --color-page: var(--slate-900); --color-surface: var(--slate-800); --color-surface-alt: var(--slate-700); --fg-1: #f1f5f9; --fg-2: var(--slate-300); --fg-3: var(--slate-400); --fg-4: #64748b; --border-1: #334155; --border-2: #475569; --border-3: #1e293b; --color-primary: var(--brand-400); --color-primary-hover: var(--brand-300); } /* ============= BASE ELEMENT STYLES ============= */ html, body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-base); color: var(--fg-1); background: var(--color-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1 { font-size: var(--text-3xl); line-height: var(--leading-3xl); font-weight: var(--weight-semibold); letter-spacing: -0.01em; color: var(--fg-1); } h2 { font-size: var(--text-2xl); line-height: var(--leading-2xl); font-weight: var(--weight-semibold); letter-spacing: -0.005em; color: var(--fg-1); } h3 { font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: var(--weight-semibold); color: var(--fg-1); } h4 { font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: var(--weight-semibold); color: var(--fg-1); } h5 { font-size: var(--text-base);line-height: var(--leading-base);font-weight: var(--weight-semibold); color: var(--fg-1); } p { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--fg-2); } small { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--fg-3); } code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; } code { background: var(--gray-100); padding: 1px 5px; border-radius: var(--radius-sm); color: var(--gray-800); } a { color: var(--color-primary); text-decoration: none; } a:hover { color: var(--color-primary-hover); text-decoration: underline; } /* Section label (sidebar / table headers) */ .label-overline { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }