/* ============================================================= base.css — Platform design foundation Token system + reset + base elements + small component kit. Theme switches via [data-theme="dark"] on . Accent is a variable so the dashboard can rebrand it later. ============================================================= */ /* ---------- TOKENS : LIGHT (default) ---------- */ :root { /* Brand accent — themeable from dashboard later */ --accent: #3b5bdb; --accent-hover: #2f49b8; --accent-soft: rgba(59, 91, 219, .10); --accent-ring: rgba(59, 91, 219, .35); --accent-2: #f59e0b; /* used sparingly for highlights */ /* Neutrals / surfaces */ --bg: #f6f8fb; --surface: #ffffff; --surface-2: #eef1f6; --border: #e2e7ef; --border-strong: #cdd5e1; /* Text */ --text: #131820; --text-muted: #586173; --text-soft: #8b94a5; --text-on-accent:#ffffff; /* Semantic */ --success: #15924f; --danger: #d83a3a; --warning: #c97a06; --success-soft: rgba(21, 146, 79, .12); --danger-soft: rgba(216, 58, 58, .12); --warning-soft: rgba(201, 122, 6, .12); /* Elevation */ --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06); --shadow: 0 4px 16px rgba(16, 24, 40, .08); --shadow-lg: 0 12px 32px rgba(16, 24, 40, .12); /* Radius */ --r-sm: 6px; --r: 10px; --r-lg: 16px; --r-pill: 999px; /* Type */ --font-ui: 'Plus Jakarta Sans', 'Hind Siliguri', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Consolas, monospace; --fs-xs: 0.8125rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; --fs-4xl: 3rem; /* Layout */ --container: 1140px; --header-h: 64px; color-scheme: light; } /* ---------- TOKENS : DARK ---------- */ [data-theme="dark"] { --accent: #6d83f0; --accent-hover: #8398f4; --accent-soft: rgba(109, 131, 240, .14); --accent-ring: rgba(109, 131, 240, .45); --accent-2: #fbbf47; --bg: #0e1117; --surface: #161b24; --surface-2: #1d2430; --border: #283040; --border-strong: #3a4456; --text: #e7eaf1; --text-muted: #9aa4b6; --text-soft: #6b7589; --text-on-accent:#0e1117; --success: #36c275; --danger: #f06262; --warning: #f0a93a; --success-soft: rgba(54, 194, 117, .14); --danger-soft: rgba(240, 98, 98, .14); --warning-soft: rgba(240, 169, 58, .14); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 4px 16px rgba(0, 0, 0, .45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, .55); color-scheme: dark; } /* ---------- RESET ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-ui); font-size: var(--fs-base); line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; transition: background-color .25s ease, color .25s ease; } img, svg, video { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } /* ---------- TYPOGRAPHY ---------- */ h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; letter-spacing: -0.012em; } h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-lg); } p { color: var(--text-muted); } small { font-size: var(--fs-sm); } code, pre, kbd { font-family: var(--font-mono); font-size: 0.9em; } .text-muted { color: var(--text-muted); } .text-soft { color: var(--text-soft); } /* ---------- LAYOUT ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; } .stack > * + * { margin-top: 1rem; } /* ---------- HEADER / NAV ---------- */ .site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); display: flex; align-items: center; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--border); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; font-size: var(--fs-lg); color: var(--text); letter-spacing: -0.02em; } .brand-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: var(--text-on-accent); display: grid; place-items: center; font-weight: 800; font-size: 1rem; } .nav { display: flex; align-items: center; gap: .35rem; } .nav a { color: var(--text-muted); padding: .45rem .7rem; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 500; } .nav a:hover { color: var(--text); background: var(--surface-2); } /* ---------- THEME TOGGLE ---------- */ .theme-toggle { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); border-radius: var(--r-sm); cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .theme-toggle:hover { color: var(--text); border-color: var(--border-strong); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ---------- BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .6rem 1.1rem; border-radius: var(--r-sm); border: 1px solid transparent; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, transform .05s; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--text-on-accent); } .btn-primary:hover { background: var(--accent-hover); color: var(--text-on-accent); } .btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); } .btn-ghost:hover { border-color: var(--border-strong); background: var(--surface-2); } /* ---------- CARDS ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.5rem; box-shadow: var(--shadow-sm); } /* ---------- FORM CONTROLS ---------- */ .field { display: block; margin-bottom: 1rem; } .field > label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: .4rem; color: var(--text); } .input, .textarea, .select { width: 100%; padding: .65rem .8rem; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm); color: var(--text); transition: border-color .15s, box-shadow .15s; } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .textarea { min-height: 110px; resize: vertical; } /* ---------- BADGES ---------- */ .badge { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; background: var(--accent-soft); color: var(--accent); } /* ---------- FLASH / ALERTS ---------- */ .alert { padding: .8rem 1rem; border-radius: var(--r-sm); border: 1px solid var(--border); font-size: var(--fs-sm); margin-bottom: 1rem; } .alert-success { background: var(--success-soft); border-color: var(--success); color: var(--success); } .alert-error { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); } .alert-warning { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); } .alert-info { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } /* ---------- POPUP (dashboard-controlled) ---------- */ .popup-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(8, 12, 20, .55); backdrop-filter: blur(3px); padding: 1rem; } .popup-box { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 1.75rem; max-width: 420px; width: 100%; text-align: center; } .popup-box h3 { font-size: var(--fs-lg); margin-bottom: .5rem; } .popup-body { color: var(--text-muted); font-size: var(--fs-sm); } .popup-close { position: absolute; top: .5rem; right: .65rem; background: none; border: none; cursor: pointer; font-size: 1.5rem; line-height: 1; color: var(--text-soft); } .popup-close:hover { color: var(--text); } /* ---------- FOOTER ---------- */ .site-footer { border-top: 1px solid var(--border); background: var(--surface); padding: 2rem 0; margin-top: 4rem; color: var(--text-soft); font-size: var(--fs-sm); } .site-footer .container { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; } /* ---------- ACCESSIBILITY ---------- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ---------- RESPONSIVE ---------- */ @media (max-width: 640px) { :root { --fs-3xl: 1.875rem; --fs-2xl: 1.5rem; } .nav a:not(.nav-keep) { display: none; } /* simplify nav on small screens (full menu in Phase 3) */ .container { padding-inline: 16px; } }