111 lines
4.6 KiB
CSS
111 lines
4.6 KiB
CSS
@import "tailwindcss";
|
|
@plugin "flowbite-react/plugin/tailwindcss";
|
|
|
|
@theme {
|
|
/* ── Fonts ───────────────────────────────────────────────────────────── */
|
|
--font-body: "IBM Plex Sans", system-ui, sans-serif;
|
|
--font-data: "IBM Plex Mono", monospace;
|
|
|
|
/* ── Surfaces ────────────────────────────────────────────────────────── */
|
|
--color-background: #F7F4EE;
|
|
--color-sidebar: #F2EEE6;
|
|
--color-card: #FDFBF7;
|
|
--color-fields: #F4F0E8;
|
|
--color-panel: #F1ECE3;
|
|
--color-dropzone: #F9F6EF;
|
|
--color-armed: #F6EFE6;
|
|
--color-live-card: #F0EBE1;
|
|
--color-player: #2B2620;
|
|
--color-player-stripe: #3A342C;
|
|
|
|
/* ── Ink ─────────────────────────────────────────────────────────────── */
|
|
--color-text-primary: #2B2620;
|
|
--color-text-strong: #35302A;
|
|
--color-text-body: #554D44;
|
|
--color-text-control: #4A423A;
|
|
--color-text-secondary: #6E6559;
|
|
--color-text-table: #7A7166;
|
|
--color-muted: #9A9084;
|
|
--color-faint-mono: #A79C8E;
|
|
--color-on-dark: #FBF8F2;
|
|
--color-on-accent: #FDFBF7;
|
|
|
|
/* ── Accents ─────────────────────────────────────────────────────────── */
|
|
--color-accent: #A85A38;
|
|
--color-accent-hover: #94492A;
|
|
--color-accent-light: #C87A52;
|
|
--color-accent-disabled: #C9AE9C;
|
|
--color-olive: #6E7A50;
|
|
--color-olive-hover: #5D6843;
|
|
--color-olive-light: #8A9668;
|
|
--color-live-red: #B5432E;
|
|
|
|
/* ── Lines, chips, placeholders ──────────────────────────────────────── */
|
|
--color-hairline: #F0EBE2;
|
|
--color-hover: #E7E0D2;
|
|
--color-chip: #EAE3D7;
|
|
--color-chip-hover: #DAD1C0;
|
|
--color-ring-dashed: #E2DACB;
|
|
--color-inactive: #DED7CA;
|
|
--color-inactive-strong: #C4BAA9;
|
|
|
|
/* ── Elevation — soft shadows instead of borders ─────────────────────── */
|
|
--shadow-card: 0 1px 2px rgba(60, 48, 32, .05), 0 10px 26px -18px rgba(60, 48, 32, .35);
|
|
--shadow-card-hover: 0 2px 4px rgba(60, 48, 32, .07), 0 18px 34px -18px rgba(60, 48, 32, .45);
|
|
--shadow-panel: 0 1px 2px rgba(60, 48, 32, .05), 0 16px 36px -22px rgba(60, 48, 32, .3);
|
|
--shadow-player: 0 1px 2px rgba(60, 48, 32, .08), 0 22px 46px -26px rgba(60, 48, 32, .5);
|
|
--shadow-terracotta: 0 1px 2px rgba(90, 40, 20, .2), 0 12px 22px -14px rgba(90, 40, 20, .55);
|
|
--shadow-olive: 0 1px 2px rgba(50, 60, 30, .18), 0 10px 20px -14px rgba(50, 60, 30, .55);
|
|
|
|
--inset-shadow-hairline: inset 0 0 0 1px rgba(60, 48, 32, .08);
|
|
--inset-shadow-armed: inset 0 0 0 1.5px #A85A38;
|
|
--inset-shadow-focus: inset 0 0 0 1.5px #C87A52;
|
|
--inset-shadow-dashed: inset 0 0 0 1.5px #E2DACB;
|
|
|
|
/* ── Shape ───────────────────────────────────────────────────────────── */
|
|
--radius-hero: 16px;
|
|
--radius-panel: 15px;
|
|
--radius-tile: 13px;
|
|
--radius-thumb: 12px;
|
|
--radius-field: 10px;
|
|
--radius-btn: 9px;
|
|
--radius-chip: 8px;
|
|
|
|
/* ── Motion — the live dot, plus the player's one-shot action badge ──── */
|
|
--animate-live-pulse: livePulse 2.2s ease-in-out infinite;
|
|
--animate-flash-badge: flashBadge 500ms ease-out forwards;
|
|
|
|
@keyframes livePulse {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: .45; transform: scale(1.35); }
|
|
}
|
|
|
|
@keyframes flashBadge {
|
|
0% { opacity: 0; transform: scale(.75); }
|
|
25% { opacity: 1; transform: scale(1); }
|
|
100% { opacity: 0; transform: scale(1.4); }
|
|
}
|
|
}
|
|
|
|
:root {
|
|
font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
line-height: 1.5;
|
|
font-weight: 400;
|
|
font-synthesis: none;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-background);
|
|
font-family: "IBM Plex Sans", system-ui, sans-serif;
|
|
color: var(--color-text-body);
|
|
}
|
|
|
|
@utility font-heading {
|
|
font-family: "Newsreader", serif;
|
|
font-weight: 400;
|
|
color: #2B2620;
|
|
}
|