111 lines
2.5 KiB
CSS
111 lines
2.5 KiB
CSS
@import url("/design-tokens.css?v=20260401-01");
|
|
@import url("/design-patterns.css?v=20260401-01");
|
|
|
|
:root {
|
|
--font-sans: var(--ds-font-sans);
|
|
|
|
--color-bg: var(--ds-bg);
|
|
--color-bg-soft: var(--ds-bg-soft);
|
|
--color-surface: var(--ds-panel);
|
|
--color-surface-soft: var(--ds-panel-soft);
|
|
--color-surface-strong: var(--ds-panel-strong);
|
|
--color-text: var(--ds-ink);
|
|
--color-text-soft: var(--ds-text-soft);
|
|
--color-text-muted: var(--ds-text-muted);
|
|
--color-border: var(--ds-line);
|
|
--color-border-soft: var(--ds-line-soft);
|
|
--color-header: var(--ds-brand);
|
|
--color-header-soft: var(--ds-brand-soft);
|
|
--color-accent: var(--ds-accent);
|
|
--color-accent-soft: var(--ds-accent-soft);
|
|
--color-accent-strong: var(--ds-accent-strong);
|
|
|
|
--radius-sm: var(--ds-radius-sm);
|
|
--radius-md: var(--ds-radius-md);
|
|
--radius-lg: var(--ds-radius-lg);
|
|
--radius-xl: var(--ds-radius-xl);
|
|
--radius-pill: var(--ds-radius-pill);
|
|
|
|
--shadow-soft: var(--ds-shadow-soft);
|
|
--shadow-card: var(--ds-shadow-card);
|
|
--shadow-float: var(--ds-shadow-float);
|
|
|
|
--space-1: var(--ds-space-1);
|
|
--space-2: var(--ds-space-2);
|
|
--space-3: var(--ds-space-3);
|
|
--space-4: var(--ds-space-4);
|
|
--space-5: var(--ds-space-5);
|
|
--space-6: var(--ds-space-6);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
height: 100%;
|
|
min-height: 100%;
|
|
font-family: var(--font-sans);
|
|
color: var(--color-text);
|
|
background: var(--ds-bg-gradient);
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
background: var(--ds-bg-gradient);
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select,
|
|
textarea,
|
|
a {
|
|
font: inherit;
|
|
}
|
|
|
|
.ui-card {
|
|
background: var(--color-surface-soft);
|
|
border: 1px solid var(--color-border-soft);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-soft);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.ui-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 38px;
|
|
padding: 0 14px;
|
|
border-radius: var(--radius-pill);
|
|
}
|
|
|
|
.ui-button-primary {
|
|
border: none;
|
|
color: #fff;
|
|
background: var(--color-accent);
|
|
box-shadow: var(--shadow-float);
|
|
}
|
|
|
|
.ui-button-secondary {
|
|
border: 1px solid var(--color-border-soft);
|
|
color: var(--color-text);
|
|
background: var(--ds-surface-tint);
|
|
}
|
|
|
|
.ui-input {
|
|
border: 1px solid var(--color-border-soft);
|
|
border-radius: var(--radius-pill);
|
|
background: var(--ds-surface-tint-strong);
|
|
color: var(--color-text);
|
|
outline: none;
|
|
}
|
|
|
|
.ui-input:focus {
|
|
border-color: rgba(47, 153, 115, 0.45);
|
|
box-shadow: 0 0 0 4px rgba(47, 153, 115, 0.1);
|
|
}
|