/* =============================================================
Procure.build — Design Tokens
Built on Open Props. Override or extend as needed.
============================================================= */
/* Inter via Google Fonts — add to layout :
*/
:root {
/* ----- Typography ----- */
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
--font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;
--font-size-xs: 12px; /* 12px */
--font-size-sm: 13px; /* 14px */
--font-size-base: 14px; /* 16px */
--font-size-md: var(--font-size-3); /* 18px */
--font-size-lg: var(--font-size-4); /* 20px */
--font-size-xl: var(--font-size-5); /* 24px */
--font-size-2xl: var(--font-size-6); /* 28px */
--font-weight-normal: 400;
--font-weight-medium: 600;
--font-weight-semibold: 600;
--line-height-tight: var(--font-lineheight-1); /* 1.1 */
--line-height-normal: var(--font-lineheight-3); /* 1.5 */
--line-height-loose: var(--font-lineheight-4); /* 1.75 */
/* ----- Spacing ----- */
--space-1: var(--size-1); /* 4px */
--space-2: var(--size-2); /* 8px */
--space-3: var(--size-3); /* 12px */
--space-4: var(--size-4); /* 16px */
--space-5: var(--size-5); /* 20px */
--space-6: var(--size-6); /* 24px */
--space-8: var(--size-8); /* 32px */
--space-10: var(--size-10); /* 40px */
--space-12: var(--size-12); /* 48px */
/* ----- Radii ----- */
--radius-sm: var(--radius-1); /* 4px */
--radius-md: var(--radius-2); /* 8px */
--radius-lg: var(--radius-3); /* 12px */
--radius-full: var(--radius-round);
/* ----- Shadows ----- */
--shadow-sm: var(--shadow-1);
--shadow-md: var(--shadow-2);
--shadow-lg: var(--shadow-3);
/* ----- Transitions ----- */
--transition-fast: 150ms var(--ease-2);
--transition-normal: 250ms var(--ease-2);
/* ----- Layout ----- */
--content-width-sm: 480px;
--content-width-md: 768px;
--content-width-lg: 1024px;
--content-width-xl: 1280px;
--sidebar-width: 20rem;
}
/* =============================================================
LIGHT MODE (default)
============================================================= */
:root {
/* Canvas */
--color-bg: var(--gray-0); /* #f8f9fa — near white */
--color-surface: var(--gray-1); /* #f1f3f5 — card/panel bg */
--color-surface-raised: white;
--color-border: var(--gray-2); /* #dee2e6 */
--color-border-subtle: var(--gray-2); /* #e9ecef */
/* Ink */
--color-text: var(--gray-9); /* #212529 — primary text */
--color-text-subtle: var(--gray-6); /* #868e96 — secondary text */
--color-text-muted: var(--gray-5); /* #adb5bd — disabled, placeholder */
/* Brand — a cool, neutral blue */
--color-accent: var(--blue-6); /* #228be6 */
--color-accent-hover: var(--blue-7); /* #1c7ed6 */
--color-accent-subtle: var(--blue-0); /* #e7f5ff */
--color-accent-text: white;
--color-button-border: var(--gray-5);
/* Semantic */
--color-success: var(--green-6);
--color-success-subtle: var(--green-0);
--color-warning: var(--yellow-6);
--color-warning-subtle: var(--yellow-0);
--color-danger: var(--red-6);
--color-danger-subtle: var(--red-0);
/* Status — compliance rating colors */
--color-green: var(--green-6);
--color-yellow: var(--yellow-5);
--color-red: var(--red-6);
--color-green-subtle: var(--green-0);
--color-yellow-subtle: var(--yellow-0);
--color-red-subtle: var(--red-0);
}
/* =============================================================
DARK MODE
============================================================= */
@media (prefers-color-scheme: dark) {
:root {
/* Canvas */
--color-bg: var(--gray-9); /* #212529 */
--color-surface: var(--gray-8); /* #343a40 */
--color-surface-raised: var(--gray-7); /* #495057 */
--color-border: var(--gray-7);
--color-border-subtle: var(--gray-8);
/* Ink */
--color-text: var(--gray-1); /* #f1f3f5 */
--color-text-subtle: var(--gray-5); /* #adb5bd */
--color-text-muted: var(--gray-6); /* #868e96 */
/* Brand */
--color-accent: var(--blue-4); /* #74c0fc */
--color-accent-hover: var(--blue-3); /* #a5d8ff */
--color-accent-subtle: var(--blue-9);
--color-accent-text: var(--gray-9);
/* Semantic */
--color-success: var(--green-4);
--color-success-subtle: var(--green-9);
--color-warning: var(--yellow-4);
--color-warning-subtle: var(--yellow-9);
--color-danger: var(--red-4);
--color-danger-subtle: var(--red-9);
/* Status */
--color-green: var(--green-4);
--color-yellow: var(--yellow-4);
--color-red: var(--red-4);
--color-green-subtle: var(--green-9);
--color-yellow-subtle: var(--yellow-9);
--color-red-subtle: var(--red-9);
}
}
/* Manual dark mode toggle support (data-theme="dark" on ) */
html[data-theme="dark"] {
--color-bg: var(--gray-9);
--color-surface: var(--gray-8);
--color-surface-raised: var(--gray-7);
--color-border: var(--gray-7);
--color-border-subtle: var(--gray-8);
--color-text: var(--gray-1);
--color-text-subtle: var(--gray-5);
--color-text-muted: var(--gray-6);
--color-accent: var(--blue-4);
--color-accent-hover: var(--blue-3);
--color-accent-subtle: var(--blue-9);
--color-accent-text: var(--gray-9);
--color-success: var(--green-4);
--color-success-subtle: var(--green-9);
--color-warning: var(--yellow-4);
--color-warning-subtle: var(--yellow-9);
--color-danger: var(--red-4);
--color-danger-subtle: var(--red-9);
--color-green: var(--green-4);
--color-yellow: var(--yellow-4);
--color-red: var(--red-4);
--color-green-subtle: var(--green-9);
--color-yellow-subtle: var(--yellow-9);
--color-red-subtle: var(--red-9);
}