/* ════════════════════════════════════════════════════════════════
SafeDomain — Design System v2 (Grand Redesign, Phase 1)
════════════════════════════════════════════════════════════════
STATUS: Standalone / NOT wired into any template yet.
This file is for review only — it is not linked from base.html
and does not touch main.css. Tokens are prefixed `--ds-` on
purpose so this can be loaded side-by-side with main.css during
review without silently overriding the live `--bg`, `--cyan`,
`--text`, etc. tokens it still uses. Drop the prefix only once
this fully replaces main.css.
Fonts referenced below (Syne / DM Sans / DM Mono) are NOT yet
loaded anywhere — when this file is wired in, add to :
A render-blocking @import fallback is included below so this
file works on its own if previewed in isolation, but the
approach above is what should ship to production (non-blocking,
cacheable, no FOUC penalty from @import's serial fetch).
──────────────────────────────────────────────────────────────── */
/* @import fonts DIHAPUS (fetch serial render-blocking + duplikat): semua weight
(termasuk Syne 800 & DM Sans 700) kini dimuat via di base.html head. */
:root {
/* ── Background ── */
--ds-bg: #0F172A;
--ds-bg-2: #0F172A;
--ds-card-bg: #1E293B;
--ds-card-hover: #243044;
/* ── Accent ── */
--ds-accent: #F59E0B;
--ds-accent-secondary:#D97706;
--ds-accent-dim: rgba(245,158,11,0.12);
/* ── Text ── */
--ds-text-primary: #F8FAFC;
--ds-text-secondary: #94A3B8; /* contrast ratio vs --ds-bg = 6.96:1 (AA-large + AA-body) */
--ds-text-muted: rgba(148,163,184,0.6);
/* ── Border ── */
--ds-border: #1E293B;
--ds-border-soft: rgba(30,41,59,0.6);
/* ── Status (unchanged semantics, kept off the cyan/purple palette) ── */
--ds-red: #ef4444;
--ds-green: #10b981;
/* ── Typography ── */
--ds-font-heading: 'Syne', sans-serif;
--ds-font-body: 'DM Sans', sans-serif;
--ds-font-mono: 'DM Mono', monospace;
/* ── Layout ── */
--ds-prose-max: 80ch; /* hard cap — see "Design Rules" below */
}
/* ════════════════════════════════════════════════════════════════
DESIGN RULES — enforced by this file, apply to any component
built against these tokens:
1. NO box-shadow in cyan/purple. Glows, if used, must use
--ds-accent / --ds-accent-secondary (amber) only.
2. NO gradient text (background-clip:text). Headings and body
text use a single solid color (--ds-text-primary or
--ds-accent), never a gradient fill.
3. NO text-transform:uppercase on body copy. Uppercase is
reserved for short labels/eyebrows under ~20 characters
(see .ds-label below), never paragraphs or sentences.
4. NO paragraph line-length beyond 80ch. Use .ds-prose or the
--ds-prose-max token directly on any text container.
──────────────────────────────────────────────────────────────── */
body.ds-theme {
background: var(--ds-bg);
color: var(--ds-text-primary);
font-family: var(--ds-font-body);
}
h1.ds-heading, h2.ds-heading, h3.ds-heading, h4.ds-heading,
.ds-heading {
font-family: var(--ds-font-heading);
font-weight: 700;
color: var(--ds-text-primary);
/* no background-clip/gradient fill — solid color only, per rule 2 */
}
.ds-body {
font-family: var(--ds-font-body);
color: var(--ds-text-secondary);
}
.ds-mono {
font-family: var(--ds-font-mono);
color: var(--ds-text-primary);
}
/* Short eyebrow/label only — never apply to sentences or paragraphs (rule 3) */
.ds-label {
font-family: var(--ds-font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ds-text-secondary);
}
/* Enforces rule 4 — attach to any paragraph/article container */
.ds-prose {
max-width: var(--ds-prose-max);
}
.ds-card {
background: var(--ds-card-bg);
border: 1px solid var(--ds-border);
border-radius: 12px;
transition: background-color .2s ease, border-color .2s ease;
}
.ds-card:hover {
background: var(--ds-card-hover);
border-color: var(--ds-border-soft);
}
.ds-btn-primary {
background: var(--ds-accent);
color: var(--ds-bg);
font-family: var(--ds-font-body);
font-weight: 700;
border: none;
border-radius: 8px;
padding: 10px 20px;
cursor: pointer;
transition: background-color .2s ease;
}
.ds-btn-primary:hover {
background: var(--ds-accent-secondary);
}