Richard
150 lines
3.9 KiB
CSS
150 lines
3.9 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */
|
|
/* Hallmark · component: theme-engine · genre: editorial · theme: Atelier (Dark & Light) */
|
|
|
|
:root {
|
|
--font-display: 'Space Grotesk', system-ui, sans-serif;
|
|
--font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
|
|
--font-mono: 'JetBrains Mono', monospace;
|
|
|
|
--color-accent: #E05A47;
|
|
--brand-primary: var(--color-accent);
|
|
}
|
|
|
|
/* Dark Theme Tokens (Default) */
|
|
:root, [data-theme="dark"] {
|
|
--color-paper: #0E0F12;
|
|
--color-surface: #15161A;
|
|
--color-surface-hover: #1C1D23;
|
|
--color-border-grid: #282932;
|
|
--color-border-subtle: #1F2026;
|
|
--color-text: #F0F0EE;
|
|
--color-text-muted: #9E9FAA;
|
|
--color-text-dim: #5C5D66;
|
|
--color-bg-subtle: #090A0C;
|
|
}
|
|
|
|
/* Light Theme Tokens (Warm Paper Craft) */
|
|
[data-theme="light"] {
|
|
--color-paper: #F8F7F4;
|
|
--color-surface: #FFFFFF;
|
|
--color-surface-hover: #F0EEE8;
|
|
--color-border-grid: #D8D5CB;
|
|
--color-border-subtle: #E8E5DC;
|
|
--color-text: #141518;
|
|
--color-text-muted: #555660;
|
|
--color-text-dim: #888994;
|
|
--color-bg-subtle: #EFECE5;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-paper);
|
|
color: var(--color-text);
|
|
font-family: var(--font-body);
|
|
background-image: radial-gradient(rgba(120, 120, 120, 0.08) 1px, transparent 1px);
|
|
background-size: 28px 28px;
|
|
overflow-x: clip;
|
|
transition: background-color 0.15s ease, color 0.15s ease;
|
|
}
|
|
|
|
/* Force Custom Font Utilities over Tailwind Defaults */
|
|
.font-display, .font-serif {
|
|
font-family: var(--font-display) !important;
|
|
font-style: normal !important;
|
|
}
|
|
|
|
.font-mono {
|
|
font-family: var(--font-mono) !important;
|
|
}
|
|
|
|
.font-sans {
|
|
font-family: var(--font-body) !important;
|
|
}
|
|
|
|
/* Helper Utility Classes bound strictly to CSS variables */
|
|
.bg-canvas, .bg-paper { background-color: var(--color-paper) !important; }
|
|
.bg-surface { background-color: var(--color-surface) !important; }
|
|
.bg-surface-hover { background-color: var(--color-surface-hover) !important; }
|
|
.bg-subtle { background-color: var(--color-bg-subtle) !important; }
|
|
|
|
.text-main { color: var(--color-text) !important; }
|
|
.text-muted { color: var(--color-text-muted) !important; }
|
|
.text-dim { color: var(--color-text-dim) !important; }
|
|
|
|
.border-grid { border-color: var(--color-border-grid) !important; }
|
|
.border-subtle { border-color: var(--color-border-subtle) !important; }
|
|
|
|
/* Form Input Semantic Helper */
|
|
.input-field {
|
|
background-color: var(--color-bg-subtle) !important;
|
|
color: var(--color-text) !important;
|
|
border-color: var(--color-border-grid) !important;
|
|
}
|
|
|
|
.input-field:focus {
|
|
border-color: var(--color-text-muted) !important;
|
|
outline: none !important;
|
|
}
|
|
|
|
/* Hallmark Structural Panels & Cards */
|
|
.hallmark-panel {
|
|
background-color: var(--color-surface);
|
|
border: 1px solid var(--color-border-grid);
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.hallmark-card {
|
|
background-color: var(--color-surface);
|
|
border: 1px solid var(--color-border-grid);
|
|
}
|
|
|
|
.hallmark-card:hover {
|
|
border-color: var(--color-text-muted);
|
|
background-color: var(--color-surface-hover);
|
|
}
|
|
|
|
/* Dynamic Branding Helper Utilities */
|
|
.bg-brand-primary {
|
|
background-color: var(--brand-primary) !important;
|
|
}
|
|
|
|
.text-brand-primary {
|
|
color: var(--brand-primary) !important;
|
|
}
|
|
|
|
.border-brand-primary {
|
|
border-color: var(--brand-primary) !important;
|
|
}
|
|
|
|
/* Print Styles */
|
|
@media print {
|
|
body {
|
|
background: #ffffff !important;
|
|
color: #000000 !important;
|
|
background-image: none !important;
|
|
}
|
|
.no-print {
|
|
display: none !important;
|
|
}
|
|
.print-only {
|
|
display: block !important;
|
|
}
|
|
.hallmark-panel, .hallmark-card {
|
|
background: none !important;
|
|
border: 1px solid #000 !important;
|
|
box-shadow: none !important;
|
|
}
|
|
table {
|
|
width: 100% !important;
|
|
border-collapse: collapse !important;
|
|
}
|
|
th, td {
|
|
border: 1px solid #000 !important;
|
|
padding: 6px !important;
|
|
color: #000 !important;
|
|
}
|
|
}
|