41 lines
1.7 KiB
CSS
41 lines
1.7 KiB
CSS
/* ============================================================
|
|
spacing.css — Nychthemeron spacing, radii, shadows
|
|
------------------------------------------------------------
|
|
Spacing follows the observed component rhythm (7/8/11/16/20px)
|
|
normalised onto a 4px grid. Radii are gentle. Shadows are the
|
|
signature of the system: components GLOW rather than cast hard
|
|
drop-shadows — light bleeding from bronze.
|
|
============================================================ */
|
|
:root {
|
|
/* spacing scale — 4px grid */
|
|
--space-0: 0;
|
|
--space-1: 0.25rem; /* 3.5px */
|
|
--space-2: 0.5rem; /* 7px — button padding */
|
|
--space-3: 0.75rem; /* 10.5px */
|
|
--space-4: 1rem; /* 14px */
|
|
--space-5: 1.25rem; /* 17.5px */
|
|
--space-6: 1.5rem; /* 21px — card padding */
|
|
--space-8: 2rem; /* 28px */
|
|
--space-10: 2.5rem; /* 35px */
|
|
--space-12: 3rem; /* 42px */
|
|
--space-16: 4rem; /* 56px */
|
|
|
|
/* corner radii */
|
|
--radius-sm: 4px; /* tags, checkboxes */
|
|
--radius-md: 5px; /* buttons, inputs */
|
|
--radius-lg: 6px; /* selects, messages */
|
|
--radius-xl: 8px; /* cards */
|
|
--radius-2xl: 10px; /* dialogs */
|
|
--radius-full: 999px;
|
|
|
|
/* glow shadows — the bronze light. Driven by --text-high so they
|
|
invert correctly between Hades (warm white glow) and Apollo. */
|
|
--glow-sm: 0 0 8px var(--text-high);
|
|
--glow-md: 0 0 10px var(--text-high);
|
|
--glow-primary: 0 0 14px color-mix(in srgb, var(--primary) 70%, transparent);
|
|
|
|
/* soft elevation — used for cards, overlays, dialogs */
|
|
--shadow-card: 0 2px 12px rgba(0, 0, 0, 0.18);
|
|
--shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.35);
|
|
--shadow-dialog: 0 16px 48px rgba(0, 0, 0, 0.5);
|
|
}
|