/* ============================================================ CharteredPro — Design System ------------------------------------------------------------ Global design tokens, base styles, and reusable components. Consumed by every page in the platform. Theme control: → force dark → force light → follow OS (default) ============================================================ */ /* ------------------------------------------------------------ 1. FONT FACE (system stack — no external font dependency) ------------------------------------------------------------ */ /* We use the modern system font stack to avoid layout shift, network dependency, and licensing concerns. If a brand font is added later, replace --font-body. */ /* ------------------------------------------------------------ 2. DESIGN TOKENS ------------------------------------------------------------ */ :root { /* ---- Brand palette ---- */ --brand-navy-900: #0B1220; --brand-navy-800: #101A2E; --brand-navy-700: #17223A; --brand-navy-600: #22304F; --brand-blue-700: #1552B8; --brand-blue-600: #1F6FEB; /* primary */ --brand-blue-500: #3D8BFD; --brand-blue-400: #6CA8FF; --brand-blue-100: #DCE9FF; --brand-blue-050: #EFF5FF; --brand-teal-700: #008074; --brand-teal-600: #00A093; --brand-teal-500: #00B8A9; --brand-teal-100: #CCF3EE; --brand-gold-600: #B48A2F; --brand-gold-500: #D4A94A; --brand-gold-100: #F5E8C8; /* ---- Neutral scale ---- */ --neutral-000: #FFFFFF; --neutral-050: #F8FAFC; --neutral-100: #F1F5F9; --neutral-150: #E7ECF3; --neutral-200: #DDE3ED; --neutral-300: #C4CDDD; --neutral-400: #94A0B8; --neutral-500: #6A7690; --neutral-600: #4A566E; --neutral-700: #33405A; --neutral-800: #1C2942; --neutral-900: #0F172A; --neutral-950: #060B18; /* ---- Semantic status ---- */ --success-600: #16A34A; --success-500: #22C55E; --success-100: #DCFCE7; --warning-600: #D97706; --warning-500: #F59E0B; --warning-100: #FEF3C7; --danger-600: #DC2626; --danger-500: #EF4444; --danger-100: #FEE2E2; --info-600: #0284C7; --info-500: #0EA5E9; --info-100: #E0F2FE; /* ---- Typography ---- */ --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --font-heading: var(--font-body); --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; --font-numeric: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --fs-2xs: 0.6875rem; /* 11px */ --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.8125rem; /* 13px */ --fs-base: 0.9375rem; /* 15px */ --fs-md: 1rem; /* 16px */ --fs-lg: 1.125rem; /* 18px */ --fs-xl: 1.25rem; /* 20px */ --fs-2xl: 1.5rem; /* 24px */ --fs-3xl: 1.875rem; /* 30px */ --fs-4xl: 2.25rem; /* 36px */ --fs-5xl: 3rem; /* 48px */ --fs-6xl: 3.75rem; /* 60px */ --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.5; --lh-relaxed: 1.65; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800; /* ---- Spacing scale (4px base) ---- */ --sp-0: 0; --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.25rem; /* 20px */ --sp-6: 1.5rem; /* 24px */ --sp-7: 1.75rem; /* 28px */ --sp-8: 2rem; /* 32px */ --sp-10: 2.5rem; /* 40px */ --sp-12: 3rem; /* 48px */ --sp-16: 4rem; /* 64px */ --sp-20: 5rem; /* 80px */ --sp-24: 6rem; /* 96px */ /* ---- Radii ---- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-full: 999px; /* ---- Borders ---- */ --border-width: 1px; --border-width-2: 2px; /* ---- Motion ---- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; /* ---- Z-index scale ---- */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-dropdown: 1000; --z-header: 1100; --z-drawer: 1200; --z-modal: 1300; --z-toast: 1400; --z-tooltip: 1500; /* ---- Layout ---- */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1440px; --container-3xl: 1600px; --content-width: 1200px; --sidebar-w: 260px; --sidebar-w-sm: 72px; --header-h: 64px; /* ---- Focus ring ---- */ --focus-ring: 0 0 0 3px rgba(31, 111, 235, 0.35); /* ---- Currency / numeric ---- */ --tabular: "tnum" 1, "lnum" 1; } /* ------------------------------------------------------------ 3. THEME TOKENS — DARK (default) ------------------------------------------------------------ */ :root, html[data-theme="dark"] { --bg: var(--brand-navy-900); --bg-elev-1: var(--brand-navy-800); --bg-elev-2: var(--brand-navy-700); --bg-elev-3: var(--brand-navy-600); --surface: var(--brand-navy-700); --surface-alt: var(--brand-navy-800); --surface-muted: #1B2740; --border: #22304F; --border-strong: #2D3E63; --border-subtle: #1A2440; --text: #E7ECF3; --text-strong: #FFFFFF; --text-muted: #B8C2D1; --text-soft: #8894AB; --text-inverse: #0B1220; --link: var(--brand-blue-500); --link-hover: var(--brand-blue-400); --accent: var(--brand-blue-500); --accent-strong: var(--brand-blue-400); --accent-fg: #FFFFFF; --accent-soft-bg: rgba(31, 111, 235, 0.15); --accent-soft-fg: var(--brand-blue-400); --success-bg: rgba(34, 197, 94, 0.12); --success-fg: #4ADE80; --warning-bg: rgba(245, 158, 11, 0.12); --warning-fg: #FBBF24; --danger-bg: rgba(239, 68, 68, 0.12); --danger-fg: #F87171; --info-bg: rgba(14, 165, 233, 0.12); --info-fg: #38BDF8; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35); --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.40); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.45); --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.55); --overlay: rgba(6, 11, 24, 0.65); --scrollbar-thumb: #2D3E63; --scrollbar-track: transparent; color-scheme: dark; } /* ------------------------------------------------------------ 4. THEME TOKENS — LIGHT ------------------------------------------------------------ */ html[data-theme="light"] { --bg: var(--neutral-050); --bg-elev-1: var(--neutral-000); --bg-elev-2: var(--neutral-000); --bg-elev-3: var(--neutral-000); --surface: var(--neutral-000); --surface-alt: var(--neutral-100); --surface-muted: var(--neutral-100); --border: var(--neutral-200); --border-strong: var(--neutral-300); --border-subtle: var(--neutral-150); --text: var(--brand-navy-900); --text-strong: #000000; --text-muted: var(--neutral-600); --text-soft: var(--neutral-500); --text-inverse: #FFFFFF; --link: var(--brand-blue-600); --link-hover: var(--brand-blue-700); --accent: var(--brand-blue-600); --accent-strong: var(--brand-blue-700); --accent-fg: #FFFFFF; --accent-soft-bg: var(--brand-blue-050); --accent-soft-fg: var(--brand-blue-700); --success-bg: var(--success-100); --success-fg: #15803D; --warning-bg: var(--warning-100); --warning-fg: #B45309; --danger-bg: var(--danger-100); --danger-fg: #B91C1C; --info-bg: var(--info-100); --info-fg: #0369A1; --shadow-xs: 0 1px 2px rgba(11, 18, 32, 0.04); --shadow-sm: 0 2px 6px rgba(11, 18, 32, 0.06); --shadow-md: 0 6px 16px rgba(11, 18, 32, 0.08); --shadow-lg: 0 12px 28px rgba(11, 18, 32, 0.10); --shadow-xl: 0 24px 48px rgba(11, 18, 32, 0.14); --overlay: rgba(11, 18, 32, 0.45); --scrollbar-thumb: var(--neutral-300); --scrollbar-track: transparent; color-scheme: light; } /* ------------------------------------------------------------ 5. AUTO THEME — respect OS preference ------------------------------------------------------------ */ @media (prefers-color-scheme: light) { html[data-theme="auto"] { --bg: var(--neutral-050); --bg-elev-1: var(--neutral-000); --bg-elev-2: var(--neutral-000); --bg-elev-3: var(--neutral-000); --surface: var(--neutral-000); --surface-alt: var(--neutral-100); --surface-muted: var(--neutral-100); --border: var(--neutral-200); --border-strong: var(--neutral-300); --border-subtle: var(--neutral-150); --text: var(--brand-navy-900); --text-strong: #000000; --text-muted: var(--neutral-600); --text-soft: var(--neutral-500); --text-inverse: #FFFFFF; --link: var(--brand-blue-600); --link-hover: var(--brand-blue-700); --accent: var(--brand-blue-600); --accent-strong: var(--brand-blue-700); --accent-fg: #FFFFFF; --accent-soft-bg: var(--brand-blue-050); --accent-soft-fg: var(--brand-blue-700); --success-bg: var(--success-100); --success-fg: #15803D; --warning-bg: var(--warning-100); --warning-fg: #B45309; --danger-bg: var(--danger-100); --danger-fg: #B91C1C; --info-bg: var(--info-100); --info-fg: #0369A1; --shadow-xs: 0 1px 2px rgba(11, 18, 32, 0.04); --shadow-sm: 0 2px 6px rgba(11, 18, 32, 0.06); --shadow-md: 0 6px 16px rgba(11, 18, 32, 0.08); --shadow-lg: 0 12px 28px rgba(11, 18, 32, 0.10); --shadow-xl: 0 24px 48px rgba(11, 18, 32, 0.14); --overlay: rgba(11, 18, 32, 0.45); --scrollbar-thumb: var(--neutral-300); color-scheme: light; } } /* ------------------------------------------------------------ 6. RESET & BASE ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; text-rendering: optimizeLegibility; } body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-normal); font-weight: var(--fw-regular); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, svg, video, canvas, audio, iframe, embed, object { display: block; max-width: 100%; } img { height: auto; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease); } a:hover { color: var(--link-hover); text-decoration: underline; } hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-6) 0; } ::selection { background: var(--accent); color: var(--accent-fg); } /* Scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: var(--scrollbar-track); } *::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: content-box; } /* Focus ring */ :focus-visible { outline: 0; box-shadow: var(--focus-ring); border-radius: 4px; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------------ 7. TYPOGRAPHY ------------------------------------------------------------ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--text-strong); margin: 0 0 var(--sp-3); } h1 { font-size: var(--fs-4xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; } h2 { font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: -0.015em; } h3 { font-size: var(--fs-2xl); } h4 { font-size: var(--fs-xl); } h5 { font-size: var(--fs-lg); } h6 { font-size: var(--fs-md); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } p { margin: 0 0 var(--sp-4); line-height: var(--lh-relaxed); } small { font-size: var(--fs-xs); color: var(--text-muted); } strong, b { font-weight: var(--fw-semibold); color: var(--text-strong); } code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-muted); padding: 0.15em 0.4em; border-radius: var(--radius-xs); border: 1px solid var(--border-subtle); } pre { font-family: var(--font-mono); font-size: var(--fs-sm); background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-4); overflow-x: auto; line-height: var(--lh-normal); } pre code { background: transparent; padding: 0; border: 0; } blockquote { margin: var(--sp-4) 0; padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--accent); background: var(--surface-muted); color: var(--text-muted); border-radius: 0 var(--radius-md) var(--radius-md) 0; } .eyebrow { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.12em; font-weight: var(--fw-semibold); color: var(--accent-soft-fg); } .display-1 { font-size: var(--fs-6xl); font-weight: var(--fw-heavy); line-height: 1.05; letter-spacing: -0.03em; } .display-2 { font-size: var(--fs-5xl); font-weight: var(--fw-heavy); line-height: 1.08; letter-spacing: -0.025em; } .numeric { font-variant-numeric: tabular-nums lining-nums; font-family: var(--font-numeric); } .text-mono { font-family: var(--font-mono); } /* ------------------------------------------------------------ 8. LAYOUT PRIMITIVES ------------------------------------------------------------ */ .container { width: 100%; max-width: var(--content-width); margin-inline: auto; padding-inline: var(--sp-5); } .container-lg { max-width: var(--container-xl); } .container-xl { max-width: var(--container-2xl); } .container-3xl { max-width: var(--container-3xl); } .section { padding-block: clamp(var(--sp-10), 6vw, var(--sp-20)); } .stack { display: flex; flex-direction: column; gap: var(--sp-4); } .stack-sm { display: flex; flex-direction: column; gap: var(--sp-2); } .stack-lg { display: flex; flex-direction: column; gap: var(--sp-6); } .row { display: flex; flex-wrap: wrap; gap: var(--sp-4); } .row-tight { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .row-loose { display: flex; flex-wrap: wrap; gap: var(--sp-6); } .row-center { display: flex; align-items: center; gap: var(--sp-3); } .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } .grid { display: grid; gap: var(--sp-5); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-auto-260 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .grid-auto-320 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } @media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* ------------------------------------------------------------ 9. SURFACES / CARDS ------------------------------------------------------------ */ .surface { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--sp-5); } .card-elevated { box-shadow: var(--shadow-md); } .card-flat { box-shadow: none; } .card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); } .card-body { padding: var(--sp-5); } .card-footer { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); background: var(--surface-alt); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .card-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: 0; } .card-subtitle { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-1); } /* ------------------------------------------------------------ 10. BUTTONS ------------------------------------------------------------ */ .btn { --btn-bg: var(--surface); --btn-fg: var(--text); --btn-bd: var(--border-strong); --btn-hover: var(--surface-alt); display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 0.6rem 1rem; font-size: var(--fs-base); font-weight: var(--fw-semibold); line-height: 1; border-radius: var(--radius-md); border: 1px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-fg); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); user-select: none; } .btn:hover { background: var(--btn-hover); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } .btn-primary { --btn-bg: var(--accent); --btn-fg: var(--accent-fg); --btn-bd: var(--accent); --btn-hover: var(--accent-strong); box-shadow: 0 6px 16px rgba(31, 111, 235, 0.25); } .btn-primary:hover { box-shadow: 0 8px 20px rgba(31, 111, 235, 0.30); } .btn-secondary { --btn-bg: var(--surface-alt); --btn-fg: var(--text); --btn-bd: var(--border-strong); } .btn-ghost { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: transparent; --btn-hover: var(--surface-alt); } .btn-outline { --btn-bg: transparent; --btn-fg: var(--accent); --btn-bd: var(--accent); --btn-hover: var(--accent-soft-bg); } .btn-danger { --btn-bg: var(--danger-500); --btn-fg: #fff; --btn-bd: var(--danger-500); --btn-hover: var(--danger-600); } .btn-success { --btn-bg: var(--success-500); --btn-fg: #fff; --btn-bd: var(--success-500); --btn-hover: var(--success-600); } .btn-warning { --btn-bg: var(--warning-500); --btn-fg: #1a1300; --btn-bd: var(--warning-500); --btn-hover: var(--warning-600); } .btn-link { --btn-bg: transparent; --btn-fg: var(--link); --btn-bd: transparent; padding: 0; height: auto; border-radius: 0; } .btn-link:hover { text-decoration: underline; background: transparent; } /* Sizes */ .btn-xs { padding: 0.35rem 0.6rem; font-size: var(--fs-xs); border-radius: var(--radius-sm); } .btn-sm { padding: 0.45rem 0.75rem; font-size: var(--fs-sm); } .btn-lg { padding: 0.85rem 1.4rem; font-size: var(--fs-md); } .btn-xl { padding: 1rem 1.75rem; font-size: var(--fs-lg); border-radius: var(--radius-lg); } .btn-icon { width: 2.25rem; height: 2.25rem; padding: 0; border-radius: var(--radius-md); } .btn-icon.btn-sm { width: 1.9rem; height: 1.9rem; } .btn-icon.btn-lg { width: 2.75rem; height: 2.75rem; } .btn-block { display: flex; width: 100%; } /* Button group */ .btn-group { display: inline-flex; } .btn-group > .btn { border-radius: 0; } .btn-group > .btn + .btn { border-left-width: 0; } .btn-group > .btn:first-child { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } .btn-group > .btn:last-child { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } /* ------------------------------------------------------------ 11. BADGES / CHIPS / STATUS PILLS ------------------------------------------------------------ */ .badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.55rem; font-size: var(--fs-xs); font-weight: var(--fw-semibold); border-radius: var(--radius-full); background: var(--surface-alt); color: var(--text-muted); border: 1px solid var(--border); line-height: 1; white-space: nowrap; } .badge-primary { background: var(--accent-soft-bg); color: var(--accent-soft-fg); border-color: transparent; } .badge-success { background: var(--success-bg); color: var(--success-fg); border-color: transparent; } .badge-warning { background: var(--warning-bg); color: var(--warning-fg); border-color: transparent; } .badge-danger { background: var(--danger-bg); color: var(--danger-fg); border-color: transparent; } .badge-info { background: var(--info-bg); color: var(--info-fg); border-color: transparent; } .badge-neutral { background: var(--surface-alt); color: var(--text-muted); } .badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; } /* ------------------------------------------------------------ 12. FORMS ------------------------------------------------------------ */ .form-group { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); } .form-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); } .form-hint { font-size: var(--fs-xs); color: var(--text-soft); } .form-required { color: var(--danger-fg); margin-left: 2px; } .form-input, .form-select, .form-textarea { width: 100%; padding: 0.65rem 0.85rem; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-md); font-size: var(--fs-base); line-height: 1.35; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); -webkit-appearance: none; appearance: none; } .form-input::placeholder, .form-textarea::placeholder { color: var(--text-soft); } .form-input:hover, .form-select:hover, .form-textarea:hover { border-color: var(--accent-strong); } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.25); } .form-input[disabled], .form-select[disabled], .form-textarea[disabled] { opacity: 0.6; cursor: not-allowed; } .form-input.is-invalid, .form-select.is-invalid, .form-textarea.is-invalid { border-color: var(--danger-500); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.20); } .form-error { color: var(--danger-fg); font-size: var(--fs-xs); } .form-textarea { min-height: 120px; resize: vertical; } .form-select { padding-right: 2.25rem; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .form-checkbox, .form-radio { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); cursor: pointer; } .form-check { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); cursor: pointer; } .form-inline { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; } .input-group { display: flex; align-items: stretch; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; } .input-group > .form-input, .input-group > .form-select { border: 0; border-radius: 0; background: transparent; box-shadow: none; } .input-group > .form-input:focus { box-shadow: none; } .input-group-addon { display: inline-flex; align-items: center; padding: 0 0.75rem; background: var(--surface-alt); color: var(--text-muted); font-size: var(--fs-sm); border-right: 1px solid var(--border); } .input-group-addon:last-child { border-right: 0; border-left: 1px solid var(--border); } /* ------------------------------------------------------------ 13. TABLES ------------------------------------------------------------ */ .table-wrap { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); } .table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums lining-nums; } .table th, .table td { padding: 0.75rem 1rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); } .table thead th { background: var(--surface-alt); color: var(--text-muted); font-weight: var(--fw-semibold); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border-strong); position: sticky; top: 0; z-index: 1; } .table tbody tr:hover { background: var(--surface-alt); } .table tbody tr:last-child td { border-bottom: 0; } .table-numeric { text-align: right; font-family: var(--font-numeric); } .table-compact th, .table-compact td { padding: 0.5rem 0.75rem; } .table-fixed { table-layout: fixed; } .table-scroll { overflow-x: auto; } /* ------------------------------------------------------------ 14. ALERTS ------------------------------------------------------------ */ .alert { display: flex; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-alt); color: var(--text); font-size: var(--fs-sm); line-height: var(--lh-normal); } .alert-title { font-weight: var(--fw-semibold); margin: 0 0 var(--sp-1); color: var(--text-strong); } .alert-body p:last-child { margin-bottom: 0; } .alert-icon { flex: 0 0 auto; font-size: 1.2em; line-height: 1; } .alert-info { background: var(--info-bg); color: var(--info-fg); border-color: transparent; } .alert-info .alert-title { color: var(--info-fg); } .alert-success { background: var(--success-bg); color: var(--success-fg); border-color: transparent; } .alert-success .alert-title { color: var(--success-fg); } .alert-warning { background: var(--warning-bg); color: var(--warning-fg); border-color: transparent; } .alert-warning .alert-title { color: var(--warning-fg); } .alert-danger { background: var(--danger-bg); color: var(--danger-fg); border-color: transparent; } .alert-danger .alert-title { color: var(--danger-fg); } /* ------------------------------------------------------------ 15. AVATAR ------------------------------------------------------------ */ .avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-blue-600), var(--brand-teal-600)); color: #fff; font-weight: var(--fw-semibold); font-size: var(--fs-sm); overflow: hidden; border: 1px solid var(--border); } .avatar-sm { width: 28px; height: 28px; font-size: var(--fs-xs); } .avatar-lg { width: 48px; height: 48px; font-size: var(--fs-md); } .avatar-xl { width: 72px; height: 72px; font-size: var(--fs-xl); } .avatar img { width: 100%; height: 100%; object-fit: cover; } /* ------------------------------------------------------------ 16. LOADER / SPINNER / SKELETON ------------------------------------------------------------ */ .spinner { width: 20px; height: 20px; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; } .spinner-lg { width: 32px; height: 32px; border-width: 3px; } @keyframes spin { to { transform: rotate(360deg); } } .skeleton { background: linear-gradient(90deg, var(--surface-alt) 0%, var(--surface-muted) 50%, var(--surface-alt) 100%); background-size: 200% 100%; animation: skeleton 1.2s ease-in-out infinite; border-radius: var(--radius-sm); color: transparent; user-select: none; } @keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ------------------------------------------------------------ 17. TOOLTIP ------------------------------------------------------------ */ [data-tooltip] { position: relative; } [data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--brand-navy-900); color: #fff; font-size: var(--fs-xs); padding: 0.35rem 0.55rem; border-radius: var(--radius-sm); white-space: nowrap; z-index: var(--z-tooltip); box-shadow: var(--shadow-md); pointer-events: none; } /* ------------------------------------------------------------ 18. MODAL / DIALOG ------------------------------------------------------------ */ .modal-backdrop { position: fixed; inset: 0; background: var(--overlay); display: none; align-items: center; justify-content: center; z-index: var(--z-modal); padding: var(--sp-4); backdrop-filter: blur(2px); } .modal-backdrop.is-open { display: flex; } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); max-width: 540px; width: 100%; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; } .modal-lg { max-width: 720px; } .modal-xl { max-width: 960px; } .modal-header { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .modal-body { padding: var(--sp-5); overflow-y: auto; } .modal-footer { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: var(--sp-2); background: var(--surface-alt); } /* ------------------------------------------------------------ 19. TOAST ------------------------------------------------------------ */ .toast-region { position: fixed; right: var(--sp-4); bottom: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); z-index: var(--z-toast); max-width: 380px; } .toast { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); display: flex; gap: var(--sp-2); align-items: flex-start; } .toast-success { border-left: 3px solid var(--success-500); } .toast-warning { border-left: 3px solid var(--warning-500); } .toast-danger { border-left: 3px solid var(--danger-500); } .toast-info { border-left: 3px solid var(--info-500); } /* ------------------------------------------------------------ 20. TABS ------------------------------------------------------------ */ .tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 0.7rem 1rem; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); border: 0; background: transparent; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .tab:hover { color: var(--text); } .tab.is-active { color: var(--accent); border-bottom-color: var(--accent); } /* ------------------------------------------------------------ 21. UTILITY CLASSES ------------------------------------------------------------ */ /* Text */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-nowrap { white-space: nowrap; } .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-muted { color: var(--text-muted); } .text-soft { color: var(--text-soft); } .text-strong { color: var(--text-strong); } .text-accent { color: var(--accent); } .text-success { color: var(--success-fg); } .text-warning { color: var(--warning-fg); } .text-danger { color: var(--danger-fg); } .text-info { color: var(--info-fg); } .fs-xs { font-size: var(--fs-xs); } .fs-sm { font-size: var(--fs-sm); } .fs-md { font-size: var(--fs-md); } .fs-lg { font-size: var(--fs-lg); } .fs-xl { font-size: var(--fs-xl); } .fw-medium { font-weight: var(--fw-medium); } .fw-semibold { font-weight: var(--fw-semibold); } .fw-bold { font-weight: var(--fw-bold); } /* Spacing (margin) */ .m-0 { margin: 0; } .m-1 { margin: var(--sp-1); } .m-2 { margin: var(--sp-2); } .m-3 { margin: var(--sp-3); } .m-4 { margin: var(--sp-4); } .m-5 { margin: var(--sp-5); } .m-6 { margin: var(--sp-6); } .m-8 { margin: var(--sp-8); } .mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); } .mt-8 { margin-top: var(--sp-8); } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--sp-1); } .mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); } .mb-5 { margin-bottom: var(--sp-5); } .mb-6 { margin-bottom: var(--sp-6); } .mb-8 { margin-bottom: var(--sp-8); } .mx-auto { margin-left: auto; margin-right: auto; } /* Padding */ .p-0 { padding: 0; } .p-1 { padding: var(--sp-1); } .p-2 { padding: var(--sp-2); } .p-3 { padding: var(--sp-3); } .p-4 { padding: var(--sp-4); } .p-5 { padding: var(--sp-5); } .p-6 { padding: var(--sp-6); } .p-8 { padding: var(--sp-8); } /* Display */ .d-none { display: none; } .d-block { display: block; } .d-inline { display: inline; } .d-inline-block { display: inline-block; } .d-flex { display: flex; } .d-inline-flex { display: inline-flex; } .d-grid { display: grid; } @media (max-width: 768px) { .d-none-mobile { display: none !important; } .d-block-mobile { display: block !important; } } @media (min-width: 769px) { .d-none-desktop { display: none !important; } } /* Flex helpers */ .flex-1 { flex: 1 1 0%; } .flex-auto { flex: 1 1 auto; } .flex-none { flex: none; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-column { flex-direction: column; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .items-stretch { align-items: stretch; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .justify-start { justify-content: flex-start; } .gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); } .gap-5 { gap: var(--sp-5); } .gap-6 { gap: var(--sp-6); } /* Width */ .w-full { width: 100%; } .w-auto { width: auto; } .max-w-sm { max-width: 480px; } .max-w-md { max-width: 640px; } .max-w-lg { max-width: 800px; } /* Border / radius */ .border { border: 1px solid var(--border); } .border-top { border-top: 1px solid var(--border); } .border-bottom { border-bottom: 1px solid var(--border); } .rounded { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-full{ border-radius: var(--radius-full); } /* Shadow */ .shadow-none { box-shadow: none; } .shadow-sm { box-shadow: var(--shadow-sm); } .shadow-md { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } /* Visibility helpers */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------ 22. EMPTY STATES ------------------------------------------------------------ */ .empty-state { text-align: center; padding: var(--sp-10) var(--sp-5); color: var(--text-muted); } .empty-state h4 { color: var(--text); margin-bottom: var(--sp-2); } .empty-state p { margin-bottom: var(--sp-5); } .empty-state .empty-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--surface-alt); border: 1px solid var(--border); display: inline-grid; place-items: center; color: var(--text-muted); margin-bottom: var(--sp-4); } /* ------------------------------------------------------------ 23. FOOTER PATTERN ------------------------------------------------------------ */ .footer { padding: var(--sp-8) 0; border-top: 1px solid var(--border); color: var(--text-soft); font-size: var(--fs-sm); background: var(--bg-elev-1); } .footer a { color: var(--text-muted); } .footer a:hover { color: var(--accent); } /* ------------------------------------------------------------ 24. PRINT ------------------------------------------------------------ */ @media print { :root { --bg: #fff; --surface: #fff; --surface-alt: #fff; --text: #000; --text-muted: #333; --border: #999; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; } html, body { background: #fff; color: #000; } .no-print, header, footer, nav, .btn, .toast-region { display: none !important; } .card, .surface { box-shadow: none !important; border-color: #999 !important; } a { color: #000; text-decoration: underline; } a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; } .table th, .table td { border-bottom: 1px solid #ccc; } .page-break { page-break-after: always; } } /* ============================================================ End of design-system.css ============================================================ */