/* ============================================================ tamjid · basha cloud — brand design tokens One identity, two domains. Light + dark, auto-switching. All text/UI colors clear WCAG AA. ============================================================ */ :root { /* — Type — */ --font-sans: 'Space Grotesk', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* — Brand constant (theme-independent) — */ --brand-accent: #BB5A3C; /* the brand color, used as a button FILL */ --brand-accent-ink: #FFFFFF; /* text/icon ON the accent fill (4.53:1, AA) */ /* — Light theme (default) — */ --bg: #FFFFFF; --surface: #FAF7F4; /* cards, raised panels (warm tint) */ --border: #E4E6EC; --text: #14161B; /* headings (18.1:1) */ --text-muted: #5B6273; /* body (6.1:1) */ --accent: #BB5A3C; /* button fills, focus rings */ --accent-link: #BB5A3C; /* links / accent-colored text (6.3:1 on white) */ --accent-soft: rgba(187, 90, 60, 0.16); /* tints, focus glow */ --focus-ring: rgba(187, 90, 60, 0.40); } /* — Dark theme: follows the OS setting automatically — */ @media (prefers-color-scheme: dark) { :root { --bg: #1A1715; /* warm near-black */ --surface: #232019; --border: #322D28; --text: #F2EEE8; /* headings (15.4:1) */ --text-muted: #ABA49B; /* body (7.2:1) */ --accent: #BB5A3C; /* button fill stays — keeps white text legible */ --accent-link: #C56A4A; /* links LIFT for legibility on dark (4.7:1) */ --accent-soft: rgba(197, 106, 74, 0.20); --focus-ring: rgba(197, 106, 74, 0.45); } } /* — Manual override (optional) — Add data-theme="dark" or "light" to to force a theme, e.g. for a user toggle that overrides the OS preference. */ [data-theme="light"] { --bg: #FFFFFF; --surface: #FAF7F4; --border: #E4E6EC; --text: #14161B; --text-muted: #5B6273; --accent: #BB5A3C; --accent-link: #BB5A3C; --accent-soft: rgba(187,90,60,0.16); --focus-ring: rgba(187,90,60,0.40); } [data-theme="dark"] { --bg: #1A1715; --surface: #232019; --border: #322D28; --text: #F2EEE8; --text-muted: #ABA49B; --accent: #BB5A3C; --accent-link: #C56A4A; --accent-soft: rgba(197,106,74,0.20); --focus-ring: rgba(197,106,74,0.45); } /* ============================================================ Ready-made primitives (optional — delete what you don't use) ============================================================ */ body { background: var(--bg); color: var(--text-muted); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } a { color: var(--accent-link); text-underline-offset: 3px; } .btn-primary { font: 600 14px/1 var(--font-sans); color: var(--brand-accent-ink); background: var(--accent); border: 0; border-radius: 9px; padding: 11px 18px; cursor: pointer; } .btn-primary:hover { filter: brightness(0.95); } :where(input, textarea, select):focus-visible, .focusable:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* Logo lockup — mark + wordmark as one unit. The mark SVG uses fill="currentColor", so it picks up the accent. */ .wordmark { display: inline-flex; align-items: center; gap: 0.4em; text-decoration: none; color: var(--accent); } .wordmark__mark { width: 1.35em; height: 1.35em; flex: none; } .wordmark__text { font-weight: 600; font-size: 1.5rem; letter-spacing: -0.04em; color: var(--text); }