/* ============================================================
Nishchala × Oat — the bridge
"A still dark mirror surface." Stillness that reflects.
Load AFTER oat.css:
Theme control:
default → follows OS (light-dark)
→ forced dark (the still dark mirror)
→ forced light ("still water at noon")
The gate on every decision:
"Does this add turbulence, or deepen the stillness?"
============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap");
@layer theme {
:root {
color-scheme: light dark;
/* ---- Surfaces: monochrome spine. Never #FFF (glare), never #000 (void). ---- */
--background: light-dark(#fafaf8, #0f0f11); /* canvas — rest */
--foreground: light-dark(#17171a, #ededeb); /* content-mirror */
--card: light-dark(#ffffff, #17171a); /* raised = surface, no float */
--card-foreground: light-dark(#17171a, #ededeb);
/* ---- Ember: the ONE live mark per view. Links, primary action, focus. ---- */
--primary: light-dark(#c16938, #d98a4e);
--primary-foreground: light-dark(#fafaf8, #0f0f11);
/* ---- Quiet neutrals ---- */
--secondary: light-dark(#f4f4f1, #1f1f23); /* recessed wells */
--secondary-foreground: light-dark(#17171a, #ededeb);
--muted: light-dark(#f4f4f1, #1f1f23);
--muted-foreground: light-dark(#5c5c63, #96969c); /* content-echo */
--faint: light-dark(#f7f7f4, #141417);
--faint-foreground: light-dark(#96969c, #5f5f66); /* content-trace */
--accent: light-dark(#f4f4f1, #1f1f23); /* hover wash — neutral, never a second warm mark */
/* ---- Functional layer: color encodes STATE, never decoration. ---- */
--danger: light-dark(#b0463e, #c85c54);
--danger-foreground: light-dark(#fafaf8, #0f0f11);
--success: light-dark(#3f7d52, #5a9e6e);
--success-foreground: light-dark(#fafaf8, #0f0f11);
--warning: light-dark(#8a6620, #d6a84e); /* kept away from ember */
--warning-foreground: light-dark(#fafaf8, #0f0f11);
/* ---- Hairlines. Depth is border + recess; float is turbulence. ---- */
--border: light-dark(#e6e6e2, #26262b);
--input: light-dark(#d9d9d4, #303036);
--ring: light-dark(rgb(193 105 56 / 0.55), rgb(217 138 78 / 0.55));
/* ---- Type. Wide leading IS the stillness. ---- */
--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-heading: "Atkinson Hyperlegible Next", "Inter", ui-sans-serif, system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
--text-1: clamp(2rem, 3.4vw, 3rem); /* page title */
--text-2: clamp(1.5rem, 2.6vw, 2.25rem); /* section head */
--text-3: 1.5rem; /* card title */
--text-4: 1.25rem;
--text-5: 1.125rem; /* lead */
--text-6: 1rem; /* body */
--text-7: 0.875rem; /* secondary */
--text-8: 0.75rem; /* meta/eyebrow */
--text-display: clamp(2.25rem, 4vw, 3.75rem); /* hero only */
--leading-normal: 1.6; /* UI prose; .prose gets 1.75 */
/* Weight ceiling: heaviness is turbulence. 700 = hero display line only. */
--font-normal: 400;
--font-medium: 500;
--font-semibold: 500; /* oat headings pull this */
--font-bold: 600;
/* ---- Radius: small and calm ---- */
--radius-small: 2px;
--radius-medium: 4px;
--radius-large: 8px;
/* ---- Elevation: NO drop shadows. Overlays get a whisper, nothing floats. ---- */
--shadow-small: none;
--shadow-medium: none;
--shadow-large: 0 0 0 1px var(--border), 0 24px 48px -24px rgb(0 0 0 / 0.35);
/* ---- Motion settles — decelerate to rest, no bounce, no snap ---- */
--ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
--transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
--transition: 300ms var(--ease-settle);
/* ---- Emptiness is load-bearing ---- */
--space-20: 5rem;
--space-24: 6rem; /* default section gap */
--space-32: 8rem; /* generous section gap */
--width-prose: 735px;
--width-content: 768px;
--width-container: 1100px;
}
[data-theme="dark"] { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }
}
/* ============================================================
Base voice — headings, links, selection, focus
============================================================ */
@layer base {
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 500;
letter-spacing: -0.02em;
}
h3, h4 { font-weight: 500; }
body {
letter-spacing: -0.01em;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
hr {
border: none;
border-top: 1px solid var(--border);
margin-block: var(--space-12);
}
::selection {
background: rgb(from var(--primary) r g b / 0.14);
}
:focus-visible {
outline: 2px solid var(--ring);
outline-offset: 2px;
}
}
/* ============================================================
Nishchala recipes — the small vocabulary oat doesn't have
============================================================ */
@layer components {
/* Hero display line — the ONLY place 700 is allowed */
.display {
font-family: var(--font-heading);
font-size: var(--text-display);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0;
}
/* Eyebrow — uppercase, wide-tracked, ember. Categories and section labels. */
.eyebrow {
display: block;
font-size: var(--text-8);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--primary);
}
/* Reading column — blog / long prose. 1.75 leading is the stillness. */
.prose {
max-width: var(--width-prose);
line-height: 1.75;
& p { margin-block: var(--space-4); }
}
/* Section rhythm — whitespace is load-bearing, let pages breathe */
.still {
padding-block: var(--space-24);
}
.still-wide {
padding-block: var(--space-32);
}
/* Quiet text tiers */
.echo { color: var(--muted-foreground); } /* body-secondary */
.trace { color: var(--faint-foreground); } /* meta, timestamps */
/* Centered content shells */
.shell { max-width: var(--width-container); margin-inline: auto; padding-inline: var(--space-6); }
.shell-narrow { max-width: var(--width-content); margin-inline: auto; padding-inline: var(--space-6); }
}