/* ===== BASE.CSS ===== */
/* Base CSS - Reset, Variables, and Foundation */
/* Cascade layers: utilities > components > base > reset */
@layer reset, base, components, utilities;
/* CSS Reset */
@layer reset {
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
input,
button,
textarea,
select {
font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
}
/* Base: variables and element defaults */
@layer base {
:root {
color-scheme: light dark;
/* Colors - light-dark() keeps a single palette for both themes */
--color-bg: light-dark(#ffffff, #1e1e1e);
--color-surface: light-dark(#f3f3f3, #2d2d2d);
--color-surface-hover: light-dark(#e8e8e8, #3d3d3d);
--color-text: light-dark(#1a1a1a, #e0e0e0);
--color-text-muted: light-dark(#666666, #a0a0a0);
--color-border: light-dark(#e0e0e0, #404040);
--color-border-strong: light-dark(#cccccc, #505050);
/* Accent Colors (Default Blue - Windows Phone style) */
--color-accent: light-dark(#0078d4, #4fc3f7);
--color-accent-hover: light-dark(#106ebe, #29b6f6);
--color-accent-text: light-dark(#ffffff, #1a1a1a);
/* Semantic Colors */
--color-error: #d13438;
--color-error-bg: light-dark(#fdf3f4, #3d1f1f);
--color-success: #107c10;
--color-success-bg: light-dark(#f3faf3, #1f3d1f);
--color-warning: light-dark(#ffc107, #b8860b);
--color-warning-bg: light-dark(#fffbf0, #3d331f);
--color-info: #0078d4;
--color-info-bg: light-dark(#f0f7ff, #1f2d3d);
/* On-color text (semantic buttons) */
--color-on-error: #ffffff;
--color-on-success: #ffffff;
/* Typography */
--font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'Cascadia Code', 'Fira Code', Consolas, Monaco, 'Courier New', monospace;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
--font-size-4xl: 2.25rem;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-light: 300;
--line-height-tight: 1.25;
--line-height-normal: 1.6;
--line-height-relaxed: 1.75;
/* Spacing */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-xxl: 3rem;
/* Borders */
--border-radius: 0;
--border-width: 1px;
/* Control sizing (form controls) */
--control-height: 2.5rem;
--control-padding: 0.5rem;
/* Shadows (minimal for flat design) */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
/* Transitions */
--transition-fast: 150ms ease;
--transition-base: 200ms ease;
}
/* Manual theme override */
:root[data-theme="light"] {
color-scheme: light;
}
:root[data-theme="dark"] {
color-scheme: dark;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
min-height: 100vh;
line-height: var(--line-height-normal);
font-family: var(--font-sans);
background-color: var(--color-bg);
color: var(--color-text);
}
/* Accent color overrides - apply on or any subtree */
.accent-blue {
--color-accent: #0078d4;
--color-accent-hover: #106ebe;
--color-accent-text: #ffffff;
}
.accent-teal {
--color-accent: #00aba9;
--color-accent-hover: #008988;
--color-accent-text: #ffffff;
}
.accent-mango {
--color-accent: #f09609;
--color-accent-hover: #d48208;
--color-accent-text: #1a1a1a;
}
.accent-orange {
--color-accent: #f7630c;
--color-accent-hover: #d4520b;
--color-accent-text: #ffffff;
}
.accent-pink {
--color-accent: #e3008c;
--color-accent-hover: #c4007a;
--color-accent-text: #ffffff;
}
.accent-purple {
--color-accent: #a200ff;
--color-accent-hover: #8800d9;
--color-accent-text: #ffffff;
}
.accent-lime {
--color-accent: #8cbf26;
--color-accent-hover: #7aa820;
--color-accent-text: #1a1a1a;
}
.accent-green {
--color-accent: #339933;
--color-accent-hover: #2d822d;
--color-accent-text: #ffffff;
}
.accent-red {
--color-accent: #e51400;
--color-accent-hover: #c41200;
--color-accent-text: #ffffff;
}
.accent-crimson {
--color-accent: #d13438;
--color-accent-hover: #b92d31;
--color-accent-text: #ffffff;
}
}
/* ===== TYPOGRAPHY.CSS ===== */
/* Typography - Headings, Text Elements, Lists */
@layer base {
/* Headings - Windows Phone 8 Style: Large, Typography-driven */
h1, h2, h3, h4, h5, h6 {
font-weight: var(--font-weight-light);
line-height: var(--line-height-tight);
margin-bottom: var(--space-md);
color: var(--color-text);
text-wrap: balance;
}
h1 {
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-light);
letter-spacing: -0.02em;
margin-top: var(--space-xl);
}
h2 {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-light);
margin-top: var(--space-lg);
}
h3 {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-normal);
margin-top: var(--space-lg);
}
h4 {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
margin-top: var(--space-md);
}
h5 {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
margin-top: var(--space-md);
}
h6 {
font-size: var(--font-size-base);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: var(--space-md);
}
/* Paragraphs */
p {
margin-bottom: var(--space-md);
max-width: 70ch;
text-wrap: pretty;
}
/* Links */
a {
color: var(--color-accent);
text-decoration: none;
transition: color var(--transition-fast);
&:hover {
color: var(--color-accent-hover);
text-decoration: underline;
}
&:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
}
/* Strong and Emphasis */
strong, b {
font-weight: var(--font-weight-bold);
}
em, i {
font-style: italic;
}
/* Small Text */
small {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
/* Mark/Highlight - legible in both light and dark modes */
mark {
background-color: light-dark(#ffd966, #8c6a00);
color: light-dark(#1a1a1a, #fff8dc);
padding: 0.125rem 0.25rem;
}
/* Deleted and Inserted Text */
del {
text-decoration: line-through;
color: var(--color-text-muted);
}
ins {
text-decoration: none;
border-bottom: 2px solid var(--color-success);
}
/* Subscript and Superscript */
sub, sup {
font-size: var(--font-size-xs);
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Abbreviations */
abbr[title] {
border-bottom: 1px dotted var(--color-text-muted);
cursor: help;
text-decoration: none;
}
/* Quotes */
cite {
font-style: italic;
color: var(--color-text-muted);
}
q {
quotes: '"' '"' "'" "'";
}
/* Lists */
ul, ol {
margin-bottom: var(--space-md);
padding-inline-start: var(--space-lg);
li {
margin-bottom: var(--space-xs);
}
}
ul {
list-style-type: disc;
ul {
list-style-type: circle;
margin-top: var(--space-xs);
}
}
ol {
list-style-type: decimal;
ol {
list-style-type: lower-alpha;
margin-top: var(--space-xs);
}
}
/* Definition Lists */
dl {
margin-bottom: var(--space-md);
}
dt {
font-weight: var(--font-weight-semibold);
margin-top: var(--space-sm);
}
dd {
margin-inline-start: var(--space-lg);
margin-bottom: var(--space-sm);
color: var(--color-text-muted);
}
/* Horizontal Rule - Strong horizontal line (WP8 style) */
hr {
border: none;
border-top: var(--border-width) solid var(--color-border);
margin: var(--space-xl) 0;
&[data-size="sm"] {
margin: var(--space-md) 0;
}
&[data-size="lg"] {
margin: var(--space-xxl) 0;
border-top-width: 2px;
}
}
/* Preformatted Text */
pre {
font-family: var(--font-mono);
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
background-color: var(--color-surface);
padding: var(--space-md);
overflow-x: auto;
margin-bottom: var(--space-md);
}
/* Code */
code {
font-family: var(--font-mono);
font-size: 0.9em;
background-color: var(--color-surface);
padding: 0.15em 0.4em;
border-radius: var(--border-radius);
}
pre code {
background-color: transparent;
padding: 0;
}
/* Keyboard Input */
kbd {
font-family: var(--font-mono);
font-size: var(--font-size-sm);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-bottom-width: 2px;
padding: 0.15em 0.4em;
border-radius: var(--border-radius);
}
/* Sample Output */
samp {
font-family: var(--font-mono);
font-size: var(--font-size-sm);
}
/* Address */
address {
font-style: normal;
margin-bottom: var(--space-md);
color: var(--color-text-muted);
}
/* Semantic Classes for Text */
.text-muted {
color: var(--color-text-muted);
}
.text-accent {
color: var(--color-accent);
}
.text-error {
color: var(--color-error);
}
.text-success {
color: var(--color-success);
}
.text-warning {
color: var(--color-warning);
}
.text-small {
font-size: var(--font-size-sm);
}
.text-large {
font-size: var(--font-size-lg);
}
.text-light {
font-weight: var(--font-weight-light);
}
.text-bold {
font-weight: var(--font-weight-bold);
}
.text-uppercase {
text-transform: uppercase;
letter-spacing: 0.05em;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
}
/* ===== CONTENT.CSS ===== */
/* Content - Articles, Sections, Blockquotes, Tables, Figures */
@layer base {
/* Articles and Sections */
article, section {
margin-bottom: var(--space-xl);
}
article > header,
section > header {
margin-bottom: var(--space-lg);
padding-bottom: var(--space-md);
border-bottom: 1px solid var(--color-border);
}
article > footer,
section > footer {
margin-top: var(--space-lg);
padding-top: var(--space-md);
border-top: 1px solid var(--color-border);
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
/* Aside */
aside {
background-color: var(--color-surface);
padding: var(--space-md);
margin-bottom: var(--space-md);
border-inline-start: 3px solid var(--color-accent);
}
/* Blockquotes - Windows Phone 8 style: strong accent border */
blockquote {
margin: var(--space-lg) 0;
padding: var(--space-md) var(--space-lg);
border-inline-start: 4px solid var(--color-accent);
background-color: var(--color-surface);
color: var(--color-text-muted);
p:last-child {
margin-bottom: 0;
}
footer,
cite {
display: block;
margin-top: var(--space-sm);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
}
/* Figures */
figure {
margin: var(--space-lg) 0;
}
figcaption {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
margin-top: var(--space-sm);
}
/* Tables */
table {
width: 100%;
border-collapse: collapse;
margin-bottom: var(--space-md);
font-size: var(--font-size-sm);
}
caption {
text-align: start;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
margin-bottom: var(--space-sm);
}
thead {
border-bottom: 2px solid var(--color-border-strong);
}
tbody {
tr {
border-bottom: 1px solid var(--color-border);
&:hover {
background-color: var(--color-surface);
}
}
}
tfoot {
border-top: 2px solid var(--color-border-strong);
font-weight: var(--font-weight-semibold);
}
th, td {
padding: var(--space-sm) var(--space-md);
text-align: start;
}
th {
font-weight: var(--font-weight-semibold);
color: var(--color-text);
}
/* Striped tables via attribute */
table[data-striped] {
tbody {
tr:nth-child(odd) {
background-color: var(--color-surface);
}
}
}
/* Compact tables */
table[data-compact] {
th, td {
padding: var(--space-xs) var(--space-sm);
}
}
/* Details / Summary */
details {
margin-bottom: var(--space-md);
border: 1px solid var(--color-border);
background-color: var(--color-surface);
summary {
padding: var(--space-md);
cursor: pointer;
font-weight: var(--font-weight-medium);
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
&::after {
content: '+';
font-size: var(--font-size-lg);
color: var(--color-accent);
}
&:hover {
background-color: var(--color-surface-hover);
}
}
&[open] {
summary {
&::after {
content: '−';
}
}
}
> *:not(summary) {
padding: 0 var(--space-md) var(--space-md) var(--space-md);
}
}
/* Progress */
progress {
appearance: none;
width: 100%;
height: 0.5rem;
border: none;
background-color: var(--color-surface);
margin-bottom: var(--space-sm);
&::-webkit-progress-bar {
background-color: var(--color-surface);
}
&::-webkit-progress-value {
background-color: var(--color-accent);
}
&::-moz-progress-bar {
background-color: var(--color-accent);
}
&[value="100"] {
&::-webkit-progress-value {
background-color: var(--color-success);
}
&::-moz-progress-bar {
background-color: var(--color-success);
}
}
}
/* Meter */
meter {
appearance: none;
width: 100%;
height: 0.5rem;
background: var(--color-surface);
margin-bottom: var(--space-sm);
&::-webkit-meter-bar {
background: var(--color-surface);
border: none;
height: 0.5rem;
}
&::-webkit-meter-optimum-value {
background: var(--color-success);
}
&::-webkit-meter-suboptimum-value {
background: var(--color-warning);
}
&::-webkit-meter-even-less-good-value {
background: var(--color-error);
}
}
/* Data */
data {
font-weight: var(--font-weight-medium);
}
}
/* ===== FORMS.CSS ===== */
/* Forms - Inputs, Buttons, Labels, Fieldsets */
@layer base {
/* Fieldset */
fieldset {
border: 1px solid var(--color-border);
padding: var(--space-md);
margin-bottom: var(--space-md);
}
legend {
padding: 0 var(--space-sm);
font-weight: var(--font-weight-medium);
}
/* Labels */
label {
display: block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-light);
margin-bottom: var(--space-xs);
color: var(--color-text);
text-transform: uppercase;
& > * {
text-transform: initial;
}
& > input[type="checkbox"] {
margin-right: var(--space-md);
}
}
/* Form Groups - Moderate spacing for visual separation */
form > div,
form > p,
form > label {
margin-bottom: var(--space-lg);
}
/* Tighter spacing option */
form[data-compact] > div,
form[data-compact] > p,
form[data-compact] > label {
margin-bottom: var(--space-md);
}
/* Text Inputs and Textareas */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"],
textarea,
sk-input-tag,
sk-input-filter,
select {
appearance: none;
width: 100%;
padding: var(--space-sm) var(--space-md);
font-size: var(--font-size-base);
line-height: var(--line-height-normal);
color: var(--color-text);
background-color: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
&:hover {
border-color: var(--color-border-strong);
}
&:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 2px rgb(from var(--color-accent) r g b / 0.2);
}
&:disabled {
background-color: var(--color-surface);
color: var(--color-text-muted);
cursor: not-allowed;
}
&::placeholder {
color: var(--color-text-muted);
}
}
/* Textarea specific */
textarea {
min-height: 6rem;
resize: vertical;
}
/* Select */
select {
background-image: light-dark(
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a0a0a0' d='M6 9L1 4h10z'/%3E%3C/svg%3E")
);
background-repeat: no-repeat;
background-position: right var(--space-md) center;
padding-inline-end: var(--space-xl);
&.ghost {
background-color: transparent;
background-position: right 0 center;
border: none;
border-bottom: 1px solid var(--color-border-strong);
border-radius: 0;
box-shadow: none;
padding: var(--space-xs) 0;
padding-inline-end: var(--space-lg);
&:hover {
border-bottom-color: var(--color-text);
}
&:focus {
border-bottom-color: var(--color-accent);
box-shadow: none;
}
&:disabled {
background-color: transparent;
border-bottom-color: var(--color-border);
}
}
}
/* Checkboxes and Radio Buttons */
input[type="checkbox"],
input[type="radio"] {
appearance: none;
width: 1.25rem;
height: 1.25rem;
border: 1px solid var(--color-border-strong);
background-color: var(--color-bg);
display: inline-grid;
place-content: center;
cursor: pointer;
vertical-align: middle;
margin-inline-end: var(--space-xs);
&:checked {
background-color: var(--color-accent);
border-color: var(--color-accent);
}
&:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
&:disabled {
background-color: var(--color-surface);
cursor: not-allowed;
}
}
input[type="checkbox"] {
border-radius: var(--border-radius);
&::before {
content: '';
width: 0.65rem;
height: 0.65rem;
transform: scale(0);
transition: transform var(--transition-fast);
box-shadow: inset 1em 1em var(--color-accent-text);
transform-origin: center;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
&:checked::before {
transform: scale(1);
}
}
input[type="radio"] {
border-radius: 50%;
&::before {
content: '';
width: 0.65rem;
height: 0.65rem;
border-radius: 50%;
transform: scale(0);
transition: transform var(--transition-fast);
background-color: var(--color-accent-text);
}
&:checked::before {
transform: scale(1);
}
}
/* Toggle Switch - Windows Phone 7 style */
input[type="checkbox"].toggle {
width: 3.5rem;
height: 1.25rem;
border-radius: 0;
border: 2px solid var(--color-text);
background-color: transparent;
display: inline-block;
place-content: unset;
position: relative;
overflow: visible;
outline: none;
&::before {
content: '';
position: absolute;
top: -0.3rem;
left: 0;
width: 30%;
height: 1.7rem;
background-color: var(--color-text);
transform: scale(1);
transform-origin: unset;
clip-path: none;
box-shadow: none;
transition: left var(--transition-base), right var(--transition-base);
z-index: 1;
}
&:checked {
background: linear-gradient(to right, var(--color-accent) 70%, transparent 60%);
&::before {
left: auto;
right: 0;
}
}
&:disabled {
border-color: var(--color-border);
cursor: not-allowed;
&::before {
background-color: var(--color-border);
}
}
}
/* File Input */
input[type="file"] {
padding: var(--space-sm);
font-size: var(--font-size-sm);
&::file-selector-button {
padding: var(--space-sm) var(--space-md);
border: none;
background-color: var(--color-surface);
color: var(--color-text);
font-weight: var(--font-weight-medium);
cursor: pointer;
margin-inline-end: var(--space-md);
transition: background-color var(--transition-fast);
&:hover {
background-color: var(--color-surface-hover);
}
}
}
/* File Drop Area - optional dropzone look. Add the `with-droparea` class to a
native `` placed inside a container element (a `