:root { /* Brand */ --brand-950:#0B1220; --brand-800:#14284A; --brand-600:#1E3D72; --brand-500:#2952A3; --brand-300:#7BA2F7; --brand-100:#E8F0FF; /* Neutrals */ --gray-900:#0F1115; --gray-700:#2A2F3A; --gray-500:#707784; --gray-300:#C7CCD6; --gray-200:#E3E7EE; --gray-50:#F7F9FC; --white:#FFFFFF; /* Semantic */ --success-600:#198754; --warning-600:#B8860B; --danger-600:#C0392B; --info-600:#0EA5E9; /* Typography */ --font-sans: Inter, "SF Pro Text", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-mono: "JetBrains Mono","SFMono-Regular",Menlo,Consolas,monospace; --fs-12:12px; --fs-14:14px; --fs-16:16px; --fs-18:18px; --fs-20:20px; --fs-24:24px; --fs-30:30px; --fs-36:36px; --fs-48:48px; --lh-body:1.5; --lh-head:1.25; /* Layout */ --radius:6px; --radius-lg:12px; --radius-pill:9999px; --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-14:56px; --space-18:72px; /* Effects */ --shadow-xs:0 1px 2px rgba(16,24,40,.06); --shadow-md:0 6px 16px rgba(16,24,40,.10); --shadow-lg:0 12px 32px rgba(16,24,40,.14); /* Base */ --bg-page: var(--white); --bg-card: var(--gray-50); --text: var(--gray-900); --text-muted: var(--gray-700); --border: var(--gray-200); --link: var(--brand-500); --link-hover: var(--brand-600); } /* Dark mode (opt-in via data-theme="dark" on ) */ html[data-theme="dark"] { --bg-page:#0B1220; --bg-card:#0F1524; --text:#ECEFF6; --text-muted:#B8C0CF; --border:#1D2540; --link:#7BA2F7; --link-hover:#AECBFF; } /* Base elements */ body { font-family: var(--font-sans); font-size: var(--fs-16); line-height: var(--lh-body); color: var(--text); background: var(--bg-page); } a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: underline; } .container { max-width: 1280px; margin-inline: auto; padding-inline: var(--space-4); } /* Card */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); padding: var(--space-6); } /* Buttons */ .btn { -webkit-font-smoothing: antialiased; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius); border: 1px solid transparent; font-weight: 600; line-height: 1; cursor: pointer; transition: all .2s cubic-bezier(.2,.7,.2,1); } .btn-primary { background: var(--brand-600); color: #fff; } .btn-primary:hover { background: var(--brand-500); box-shadow: var(--shadow-md); } .btn-secondary { background: transparent; color: var(--brand-600); border-color: var(--brand-600); } .btn-secondary:hover { background: var(--brand-100); } .btn-outline { background: transparent; color: var(--brand-600); border-color: var(--brand-600); } .btn-outline:hover { background: var(--brand-100); } /* Forms */ .input, .select, .textarea { width: 100%; background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; outline: none; transition: border-color .15s ease; } .input:focus, .select:focus, .textarea:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(41,82,163,.16); } /* Alerts */ .alert { padding: 12px 14px; border-radius: var(--radius); border: 1px solid transparent; } .alert-info { background: #F0F8FF; border-color: #CFE8FB; color: #0A4F75; } .alert-success { background: #ECFDF5; border-color: #C6F1E0; color: #0F5132; } .alert-warning { background: #FFFAEB; border-color: #F7E0AC; color: #6C4A0B; } .alert-danger { background: #FEF2F2; border-color: #F5B5B1; color: #7A1E17; } /* Logo spacing rules */ .logo { display: inline-block; } .logo img { height: 64px; /* Header logo size */ width: auto; } .logo-favicon { height: 24px; /* Favicon size */ width: auto; } /* Clear space around logo = height of first letter */ .logo-clear-space { padding: 0.5em; /* Adjust based on logo design */ } /* Logo on color backgrounds */ .logo-on-dark { filter: brightness(0) invert(1); /* White logo on dark backgrounds */ } .logo-on-light { filter: none; /* Dark logo on light backgrounds */ } /* Typography scale */ h1 { font-size: var(--fs-36); line-height: var(--lh-head); font-weight: 700; color: var(--text); } h2 { font-size: var(--fs-30); line-height: var(--lh-head); font-weight: 600; color: var(--text); } h3 { font-size: var(--fs-24); line-height: var(--lh-head); font-weight: 600; color: var(--text); } /* Section spacing */ section { /* margin-top: var(--space-18); */ /* margin-bottom: var(--space-18); */ } /* Image styling for brand consistency */ .brand-image { filter: contrast(1.1) saturate(0.9) hue-rotate(-10deg); /* Cool temperature, subtle blue cast */ }