/* ============================================================ DropBlockCMS — Design Tokens Single source of truth. Never hardcode a colour/font/space value outside this file. Loaded FIRST, always. ============================================================ */ :root { /* --- Primary brand colours --- */ --color-brand-primary: #185FA5; --color-brand-dark: #042C53; --color-brand-mid: #378ADD; --color-brand-light: #E6F1FB; --color-brand-lightest: #B5D4F4; /* Branded gradient — the shared "no image" floor (text heroes AND card thumbnails). Theme-editor-ready (2.3): change it here and every hero + card thumb follows. */ --brand-gradient: linear-gradient(135deg, var(--color-brand-dark) 0%, var(--color-brand-primary) 50%, var(--color-brand-mid) 100%); /* --- Admin-chrome tokens (scope-briefs/018) --- DropBlockCMS's OWN product brand — the CMS admin UI's colours, deliberately SEPARATE from --color-brand-* above. --color-brand-* is admin-editable per install via Branding (THEME_EDITABLE, includes/theme.php) and drives the PUBLIC site only. These --admin-brand-* tokens are never in THEME_EDITABLE and never overridden — every admin-only CSS file (admin.css, admin-chrome.css, admin-editor.css, dashboard-cards.css, and the *-admin.css module files) uses these instead, so a site's own brand palette can never affect DropBlockCMS's own chrome. */ --admin-brand-primary: #635BFF; --admin-brand-dark: #29235C; --admin-brand-mid: #8175FF; --admin-brand-light: #EEEFFF; --admin-brand-lightest: #F7F7FF; /* --- Semantic colours --- */ --color-success-bg: #EAF3DE; --color-success-text: #27500A; --color-success-border: #97C459; --color-warning-bg: #FAEEDA; --color-warning-text: #633806; --color-warning-border: #EF9F27; --color-danger-bg: #FCEBEB; --color-danger-text: #791F1F; --color-danger-border: #F09595; --color-info-bg: #E6F1FB; --color-info-text: #0C447C; --color-info-border: #85B7EB; --color-tip-bg: #EEEDFE; --color-tip-text: #3C3489; --color-tip-border: #AFA9EC; /* --- Neutral / surface --- */ --color-surface-white: #FFFFFF; --color-surface-page: #F8F9FA; --color-surface-secondary: #F1EFE8; --color-surface-tertiary: #E8E6DE; --color-text-primary: #1A1A1A; --color-text-secondary: #5F5E5A; /* Chrome regions own their own colours (scope-briefs/023). Defaults MUST mirror THEME_EDITABLE in includes/theme.php — change both together. */ --color-nav-link: #1A1A1A; --color-nav-link-active: #185FA5; --color-footer-bg: #F1EFE8; --color-footer-text: #5F5E5A; --color-footer-link: #1A1A1A; --color-text-tertiary: #888780; --color-border-default: rgba(0,0,0,0.10); --color-border-medium: rgba(0,0,0,0.18); --color-border-strong: rgba(0,0,0,0.28); /* --- Fonts --- */ --font-display: 'Sora', sans-serif; --font-body: 'Source Serif 4', serif; --font-ui: 'DM Sans', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* --- Type scale --- */ --text-xs: 11px; --text-sm: 13px; --text-base: 16px; --text-md: 18px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 30px; --text-3xl: 38px; --text-hero: 48px; /* --- Font weights --- */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* --- Line heights --- */ --leading-tight: 1.25; --leading-snug: 1.4; --leading-normal: 1.6; --leading-relaxed: 1.75; /* --- Spacing scale --- */ --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-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* --- Border radius --- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* --- Shadows (flat-first; elevation only) --- */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.07); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 8px 24px rgba(0,0,0,0.10); /* --- Layout & grid --- */ --max-width-content: 760px; --max-width-wide: 1100px; /* Per-template body-width overrides (scope-briefs/005). Each defaults to the shared --max-width-content value above, so an untouched install renders identically to before — only the Branding "Page width" presets ever set these independently. */ --max-width-article: var(--max-width-content); --max-width-page: var(--max-width-content); --max-width-landing: var(--max-width-content); --nav-height: 60px; } /* --- Hero gradient (no image required for text heroes) --- */ .hero-gradient { background: var(--brand-gradient); } /* --- Applied type styles (use as classes) --- */ .type-hero { font-family: var(--font-display); font-size: var(--text-hero); font-weight: var(--weight-semibold); line-height: var(--leading-tight); } .type-h1 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); } .type-h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-medium); line-height: var(--leading-tight); } .type-h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-medium); line-height: var(--leading-snug); } .type-body { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-relaxed); } .type-ui { font-family: var(--font-ui); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-normal); } .type-meta { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--color-text-secondary); } .type-label { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; } .type-code { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-regular); line-height: 1.7; }