+
+
+ Step {i + 1}: {step.title}
+
+
{step.content}
+
{step.formulaLatex ? (
) : (
@@ -691,11 +734,18 @@ export default function DoubleIntegralSolver() {
)}
- {!result && !error &&
โฌ
Enter integral and click Solve
}
+ {!result && !error && (
+
+
โฌ
+
Enter integral and click Solve
+
+ )}
-
-
SYNTAX
-
x^2, sqrt(x), exp(x), ln(x), sin(x), besselj0(x), erf(x), gamma(x), inf
+
+
SYNTAX
+
+ x^2, sqrt(x), exp(x), ln(x), sin(x), besselj0(x), erf(x), gamma(x), inf
+
diff --git a/src/styles/LatexKeyboard.css b/src/styles/LatexKeyboard.css
new file mode 100644
index 0000000..bd3b86a
--- /dev/null
+++ b/src/styles/LatexKeyboard.css
@@ -0,0 +1,312 @@
+/* ============================================================
+ LatexKeyboard.css โ styles for the LaTeX math keyboard
+ Requires theme.css to be loaded first for CV tokens.
+ ============================================================ */
+
+.lkb {
+ display: flex;
+ flex-direction: column;
+ background: var(--cv-bg-surface);
+ border: 1px solid var(--cv-border);
+ border-radius: var(--cv-radius-lg);
+ overflow: hidden;
+ font-family: var(--cv-font-ui);
+ width: 100%;
+}
+
+/* โโ Input row โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+.lkb__input-row {
+ display: flex;
+ align-items: stretch;
+ gap: 0;
+ border-bottom: 1px solid var(--cv-border);
+}
+
+.lkb__input {
+ flex: 1;
+ resize: none;
+ border: none;
+ outline: none;
+ padding: 10px 14px;
+ font-family: var(--cv-font-mono);
+ font-size: 14px;
+ line-height: 1.5;
+ color: var(--cv-text-primary);
+ background: var(--cv-bg-raised);
+ min-height: 56px;
+}
+
+.lkb__input::placeholder {
+ color: var(--cv-input-placeholder);
+ font-family: var(--cv-font-ui);
+ font-size: 13px;
+}
+
+.lkb__input:focus {
+ background: var(--cv-input-bg);
+ box-shadow: inset 0 0 0 2px var(--cv-input-focus);
+}
+
+.lkb__clear-btn {
+ padding: 0 14px;
+ border: none;
+ background: var(--cv-bg-sunken);
+ color: var(--cv-text-muted);
+ cursor: pointer;
+ font-size: 14px;
+ transition: color var(--cv-transition-fast), background var(--cv-transition-fast);
+ border-left: 1px solid var(--cv-border);
+}
+
+.lkb__clear-btn:hover {
+ color: var(--cv-error);
+ background: var(--cv-error-light);
+}
+
+/* โโ Preview area โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+.lkb__preview {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 10px 16px;
+ min-height: 52px;
+ border-bottom: 1px solid var(--cv-border);
+ background: var(--cv-display-bg);
+ overflow-x: auto;
+ overflow-y: hidden;
+ scrollbar-width: thin;
+}
+
+.lkb__preview-label {
+ font-size: 11px;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+ color: var(--cv-display-expr);
+ white-space: nowrap;
+ flex-shrink: 0;
+}
+
+.lkb__preview-math {
+ color: var(--cv-display-text);
+ /* KaTeX uses its own sizing โ constrain extreme overflow */
+ max-width: 100%;
+ overflow-x: auto;
+}
+
+/* KaTeX light/dark handling โ ensure readability on dark bg */
+.lkb__preview-math .katex {
+ color: var(--cv-display-text);
+}
+
+.lkb__preview-empty {
+ font-size: 13px;
+ color: var(--cv-display-expr);
+ font-style: italic;
+}
+
+/* โโ Tab strip โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+.lkb__tabs {
+ display: flex;
+ border-bottom: 1px solid var(--cv-border);
+ background: var(--cv-bg-raised);
+ overflow-x: auto;
+ scrollbar-width: none;
+}
+
+.lkb__tabs::-webkit-scrollbar { display: none; }
+
+.lkb__tab {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ padding: 10px 16px;
+ border: none;
+ background: transparent;
+ color: var(--cv-text-secondary);
+ font-size: 13px;
+ font-weight: 400;
+ cursor: pointer;
+ white-space: nowrap;
+ border-bottom: 2px solid transparent;
+ margin-bottom: -1px;
+ transition:
+ color var(--cv-transition-fast),
+ border-color var(--cv-transition-fast);
+}
+
+.lkb__tab:hover {
+ color: var(--cv-text-primary);
+ background: var(--cv-bg-overlay);
+}
+
+.lkb__tab--active {
+ color: var(--cv-accent);
+ border-bottom-color: var(--cv-accent);
+ font-weight: 500;
+}
+
+.lkb__tab-icon {
+ font-size: 15px;
+ line-height: 1;
+}
+
+/* โโ Key panel โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+.lkb__panel {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
+ gap: 4px;
+ padding: 10px;
+ background: var(--cv-bg-sunken);
+}
+
+.lkb__key {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 44px;
+ padding: 4px 6px;
+ border-radius: var(--cv-radius-sm);
+ border: 1px solid var(--cv-border);
+ background: var(--cv-btn-digit-bg);
+ color: var(--cv-btn-digit-text);
+ font-size: 15px;
+ font-family: var(--cv-font-math);
+ cursor: pointer;
+ transition:
+ background-color var(--cv-transition-fast),
+ transform var(--cv-transition-fast),
+ border-color var(--cv-transition-fast);
+ touch-action: manipulation;
+ user-select: none;
+ -webkit-tap-highlight-color: transparent;
+}
+
+.lkb__key:hover {
+ background: var(--cv-btn-digit-hover);
+ border-color: var(--cv-border-strong);
+}
+
+.lkb__key:active {
+ transform: scale(0.92);
+ background: var(--cv-accent-light);
+ color: var(--cv-accent-text);
+ border-color: var(--cv-accent);
+}
+
+.lkb__key:focus-visible {
+ outline: 2px solid var(--cv-accent);
+ outline-offset: 1px;
+}
+
+/* โโ Footer / copy row โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+.lkb__footer {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 8px 12px;
+ border-top: 1px solid var(--cv-border);
+ background: var(--cv-bg-raised);
+ min-height: 38px;
+ overflow: hidden;
+}
+
+.lkb__raw-label {
+ font-size: 11px;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ color: var(--cv-text-muted);
+ flex-shrink: 0;
+}
+
+.lkb__raw {
+ flex: 1;
+ font-family: var(--cv-font-mono);
+ font-size: 12px;
+ color: var(--cv-text-secondary);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.lkb__copy-btn {
+ flex-shrink: 0;
+ padding: 4px 12px;
+ border-radius: var(--cv-radius-pill);
+ border: 1px solid var(--cv-border-strong);
+ background: var(--cv-bg-surface);
+ color: var(--cv-text-secondary);
+ font-size: 12px;
+ cursor: pointer;
+ transition: background var(--cv-transition-fast), color var(--cv-transition-fast);
+}
+
+.lkb__copy-btn:hover:not(:disabled) {
+ background: var(--cv-accent-light);
+ color: var(--cv-accent-text);
+ border-color: var(--cv-accent);
+}
+
+.lkb__copy-btn:disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+}
+
+/* โโ Compact variant (icon-only tabs) โโโโโโโโโโโโโโโโโโโโโโโโ */
+.lkb--compact .lkb__tab {
+ padding: 8px 12px;
+}
+
+.lkb--compact .lkb__tab-label {
+ display: none;
+}
+
+.lkb--compact .lkb__panel {
+ grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
+}
+
+.lkb--compact .lkb__key {
+ min-height: 40px;
+ font-size: 14px;
+}
+
+/* โโ Responsive โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+@media (max-width: 600px) {
+ .lkb__panel {
+ grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
+ gap: 3px;
+ padding: 8px;
+ }
+
+ .lkb__key {
+ min-height: 44px;
+ font-size: 14px;
+ }
+
+ .lkb__tab {
+ padding: 8px 12px;
+ }
+
+ .lkb__tab-label {
+ display: none;
+ }
+
+ .lkb__preview {
+ padding: 8px 12px;
+ min-height: 46px;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .lkb__key,
+ .lkb__tab,
+ .lkb__input,
+ .lkb__copy-btn,
+ .lkb__clear-btn {
+ transition: none;
+ }
+ .lkb__key:active {
+ transform: none;
+ }
+}
diff --git a/src/styles/responsive.css b/src/styles/responsive.css
new file mode 100644
index 0000000..f6b7ba7
--- /dev/null
+++ b/src/styles/responsive.css
@@ -0,0 +1,343 @@
+/* ============================================================
+ CalcVoyager โ Responsive Utilities
+ Import after theme.css. Covers calculator grid, layout,
+ touch targets, and typography scaling.
+ ============================================================ */
+
+/* โโ Breakpoints (reference โ used in media queries below)
+ xs: < 400px (very small phones)
+ sm: < 600px (phones)
+ md: < 900px (tablets / landscape phones)
+ lg: >= 900px (desktops)
+ ============================================================ */
+
+/* โโ App shell โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+.cv-app {
+ min-height: 100dvh;
+ display: flex;
+ flex-direction: column;
+ background-color: var(--cv-bg-page);
+}
+
+.cv-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 12px 20px;
+ background: var(--cv-bg-surface);
+ border-bottom: 1px solid var(--cv-border);
+ gap: 12px;
+}
+
+.cv-header-title {
+ font-size: 18px;
+ font-weight: 600;
+ color: var(--cv-text-primary);
+ margin: 0;
+}
+
+.cv-main {
+ flex: 1;
+ display: flex;
+ align-items: flex-start;
+ justify-content: center;
+ padding: 24px 16px;
+}
+
+/* โโ Calculator card โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ*/
+.cv-calculator {
+ background: var(--cv-bg-surface);
+ border-radius: var(--cv-radius-lg);
+ box-shadow: var(--cv-shadow-lg);
+ border: 1px solid var(--cv-border);
+ width: 100%;
+ max-width: 420px;
+ overflow: hidden;
+}
+
+/* โโ Display panel โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ*/
+.cv-display {
+ background: var(--cv-display-bg);
+ padding: 20px 20px 16px;
+ min-height: 100px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ gap: 4px;
+}
+
+.cv-display__expr {
+ font-family: var(--cv-font-mono);
+ font-size: 13px;
+ color: var(--cv-display-expr);
+ min-height: 18px;
+ word-break: break-all;
+ text-align: right;
+}
+
+.cv-display__value {
+ font-family: var(--cv-font-mono);
+ font-size: 36px;
+ font-weight: 300;
+ color: var(--cv-display-text);
+ word-break: break-all;
+ text-align: right;
+ line-height: 1.2;
+}
+
+/* โโ Button grid โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ*/
+.cv-keypad {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 1px;
+ background: var(--cv-border);
+ padding: 1px;
+}
+
+.cv-keypad--scientific {
+ grid-template-columns: repeat(5, 1fr);
+}
+
+/* โโ Individual buttons โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ*/
+.cv-btn {
+ /* min touch target */
+ min-height: 60px;
+ min-width: 44px;
+ padding: 0 8px;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ font-family: var(--cv-font-ui);
+ font-size: 18px;
+ font-weight: 400;
+ cursor: pointer;
+ border: none;
+ outline: none;
+ border-radius: 0;
+
+ transition:
+ background-color var(--cv-transition-fast),
+ transform var(--cv-transition-fast);
+
+ /* Prevent double-tap zoom on mobile */
+ touch-action: manipulation;
+ user-select: none;
+ -webkit-tap-highlight-color: transparent;
+}
+
+.cv-btn:active {
+ transform: scale(0.94);
+}
+
+.cv-btn:focus-visible {
+ outline: 2px solid var(--cv-accent);
+ outline-offset: -2px;
+ z-index: 1;
+}
+
+/* Button variants */
+.cv-btn--digit {
+ background: var(--cv-btn-digit-bg);
+ color: var(--cv-btn-digit-text);
+}
+.cv-btn--digit:hover { background: var(--cv-btn-digit-hover); }
+
+.cv-btn--operator {
+ background: var(--cv-btn-op-bg);
+ color: var(--cv-btn-op-text);
+ font-weight: 500;
+}
+.cv-btn--operator:hover { background: var(--cv-btn-op-hover); }
+
+.cv-btn--function {
+ background: var(--cv-btn-fn-bg);
+ color: var(--cv-btn-fn-text);
+ font-size: 14px;
+}
+.cv-btn--function:hover { background: var(--cv-btn-fn-hover); }
+
+.cv-btn--equals {
+ background: var(--cv-btn-eq-bg);
+ color: var(--cv-btn-eq-text);
+ font-weight: 600;
+}
+.cv-btn--equals:hover { background: var(--cv-btn-eq-hover); }
+
+.cv-btn--clear {
+ background: var(--cv-btn-clear-bg);
+ color: var(--cv-btn-clear-text);
+ font-weight: 500;
+}
+.cv-btn--clear:hover { background: var(--cv-btn-clear-hover); }
+
+.cv-btn--wide {
+ grid-column: span 2;
+}
+
+/* โโ History panel โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ*/
+.cv-history {
+ background: var(--cv-bg-surface);
+ border: 1px solid var(--cv-border);
+ border-radius: var(--cv-radius-md);
+ overflow: hidden;
+}
+
+.cv-history__header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 10px 16px;
+ border-bottom: 1px solid var(--cv-border);
+ background: var(--cv-bg-raised);
+}
+
+.cv-history__title {
+ font-size: 13px;
+ font-weight: 500;
+ color: var(--cv-text-secondary);
+ margin: 0;
+}
+
+.cv-history__list {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ max-height: 280px;
+ overflow-y: auto;
+ overscroll-behavior: contain;
+}
+
+.cv-history__item {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ gap: 2px;
+ padding: 10px 16px;
+ border-bottom: 1px solid var(--cv-border);
+ cursor: pointer;
+ transition: background var(--cv-transition-fast);
+}
+
+.cv-history__item:last-child { border-bottom: none; }
+.cv-history__item:hover { background: var(--cv-bg-overlay); }
+
+.cv-history__expr {
+ font-size: 12px;
+ color: var(--cv-text-muted);
+ font-family: var(--cv-font-mono);
+}
+
+.cv-history__result {
+ font-size: 16px;
+ color: var(--cv-text-primary);
+ font-family: var(--cv-font-mono);
+}
+
+/* โโ Utility classes โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ*/
+.cv-sr-only {
+ position: absolute;
+ width: 1px; height: 1px;
+ overflow: hidden;
+ clip: rect(0,0,0,0);
+ white-space: nowrap;
+}
+
+.cv-visually-hidden { @extend .cv-sr-only; }
+
+/* โโ Responsive overrides โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+
+/* Tablet: loosen layout a little */
+@media (max-width: 900px) {
+ .cv-main {
+ padding: 20px 12px;
+ }
+ .cv-calculator {
+ max-width: 480px;
+ }
+}
+
+/* Phone: tighter, finger-friendly */
+@media (max-width: 600px) {
+ .cv-header {
+ padding: 10px 14px;
+ }
+ .cv-header-title {
+ font-size: 16px;
+ }
+ .cv-main {
+ padding: 12px 8px;
+ align-items: flex-start;
+ }
+ .cv-calculator {
+ max-width: 100%;
+ border-radius: var(--cv-radius-md);
+ }
+ .cv-display {
+ padding: 16px 16px 12px;
+ min-height: 88px;
+ }
+ .cv-display__value {
+ font-size: 30px;
+ }
+ .cv-btn {
+ min-height: 56px;
+ font-size: 16px;
+ }
+ .cv-btn--function {
+ font-size: 12px;
+ }
+}
+
+/* Very small phones */
+@media (max-width: 400px) {
+ .cv-display__value {
+ font-size: 26px;
+ }
+ .cv-btn {
+ min-height: 52px;
+ font-size: 15px;
+ }
+ .cv-btn--function {
+ font-size: 11px;
+ }
+}
+
+/* โโ Landscape phone: two-column layout with display fixed โโ */
+@media (max-width: 768px) and (orientation: landscape) {
+ .cv-main {
+ padding: 8px;
+ }
+ .cv-calculator {
+ display: grid;
+ grid-template-columns: 1fr 1.6fr;
+ max-width: 640px;
+ max-height: 96dvh;
+ }
+ .cv-display {
+ min-height: unset;
+ justify-content: flex-end;
+ overflow-y: auto;
+ }
+ .cv-keypad {
+ overflow-y: auto;
+ max-height: 96dvh;
+ }
+ .cv-btn {
+ min-height: 48px;
+ }
+}
+
+/* โโ Reduced motion โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+@media (prefers-reduced-motion: reduce) {
+ .cv-btn {
+ transition: none;
+ }
+ .cv-btn:active {
+ transform: none;
+ }
+ body {
+ transition: none;
+ }
+}
diff --git a/src/styles/theme.css b/src/styles/theme.css
new file mode 100644
index 0000000..608a935
--- /dev/null
+++ b/src/styles/theme.css
@@ -0,0 +1,255 @@
+/* ============================================================
+ CalcVoyager โ Theme System
+ Usage: Add data-theme="dark" to to force dark mode.
+ Defaults to OS preference via prefers-color-scheme.
+ ============================================================ */
+
+:root {
+ /* Surfaces */
+ --cv-bg-page: #f5f5f5;
+ --cv-bg-surface: #ffffff;
+ --cv-bg-raised: #ffffff;
+ --cv-bg-sunken: #efefef;
+ --cv-bg-overlay: rgba(0, 0, 0, 0.04);
+
+ /* Borders */
+ --cv-border: rgba(0, 0, 0, 0.12);
+ --cv-border-strong: rgba(0, 0, 0, 0.24);
+
+ /* Text */
+ --cv-text-primary: #111111;
+ --cv-text-secondary: #555555;
+ --cv-text-muted: #888888;
+ --cv-text-inverse: #ffffff;
+
+ /* Brand / Accent */
+ --cv-accent: #2563eb;
+ --cv-accent-hover: #1d4ed8;
+ --cv-accent-light: #dbeafe;
+ --cv-accent-text: #1e40af;
+
+ /* Semantic */
+ --cv-success: #16a34a;
+ --cv-success-light: #dcfce7;
+ --cv-error: #dc2626;
+ --cv-error-light: #fee2e2;
+ --cv-warning: #d97706;
+ --cv-warning-light: #fef3c7;
+
+ /* Calculator-specific button tokens */
+ --cv-btn-digit-bg: #ffffff;
+ --cv-btn-digit-text: #111111;
+ --cv-btn-digit-hover: #f0f0f0;
+ --cv-btn-op-bg: #e8f0fe;
+ --cv-btn-op-text: #1d4ed8;
+ --cv-btn-op-hover: #dbeafe;
+ --cv-btn-fn-bg: #f3f3f3;
+ --cv-btn-fn-text: #444444;
+ --cv-btn-fn-hover: #e8e8e8;
+ --cv-btn-eq-bg: #2563eb;
+ --cv-btn-eq-text: #ffffff;
+ --cv-btn-eq-hover: #1d4ed8;
+ --cv-btn-clear-bg: #fee2e2;
+ --cv-btn-clear-text: #b91c1c;
+ --cv-btn-clear-hover: #fecaca;
+
+ /* Display */
+ --cv-display-bg: #1a1a2e;
+ --cv-display-text: #e2e8f0;
+ --cv-display-expr: #94a3b8;
+ --cv-display-cursor: #60a5fa;
+
+ /* Input / Form */
+ --cv-input-bg: #ffffff;
+ --cv-input-border: rgba(0, 0, 0, 0.18);
+ --cv-input-focus: #2563eb;
+ --cv-input-placeholder: #aaaaaa;
+
+ /* Shadow */
+ --cv-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
+ --cv-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
+ --cv-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
+
+ /* Typography */
+ --cv-font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ --cv-font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
+ --cv-font-math: 'KaTeX_Main', 'Computer Modern', serif;
+
+ /* Motion */
+ --cv-transition-fast: 100ms ease;
+ --cv-transition-base: 180ms ease;
+ --cv-transition-slow: 300ms ease;
+
+ /* Radius */
+ --cv-radius-sm: 6px;
+ --cv-radius-md: 10px;
+ --cv-radius-lg: 16px;
+ --cv-radius-xl: 24px;
+ --cv-radius-pill: 999px;
+}
+
+/* โโ Dark mode via OS preference โโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+@media (prefers-color-scheme: dark) {
+ :root:not([data-theme="light"]) {
+ --cv-bg-page: #0f0f13;
+ --cv-bg-surface: #1a1a22;
+ --cv-bg-raised: #222230;
+ --cv-bg-sunken: #12121a;
+ --cv-bg-overlay: rgba(255, 255, 255, 0.05);
+
+ --cv-border: rgba(255, 255, 255, 0.10);
+ --cv-border-strong: rgba(255, 255, 255, 0.22);
+
+ --cv-text-primary: #f0f0f5;
+ --cv-text-secondary: #a0a0b0;
+ --cv-text-muted: #666680;
+ --cv-text-inverse: #111111;
+
+ --cv-accent: #60a5fa;
+ --cv-accent-hover: #93c5fd;
+ --cv-accent-light: #1e3a5f;
+ --cv-accent-text: #93c5fd;
+
+ --cv-success: #4ade80;
+ --cv-success-light: #14532d;
+ --cv-error: #f87171;
+ --cv-error-light: #7f1d1d;
+ --cv-warning: #fbbf24;
+ --cv-warning-light: #78350f;
+
+ --cv-btn-digit-bg: #222230;
+ --cv-btn-digit-text: #f0f0f5;
+ --cv-btn-digit-hover: #2c2c3e;
+ --cv-btn-op-bg: #1e2d4a;
+ --cv-btn-op-text: #93c5fd;
+ --cv-btn-op-hover: #253a5e;
+ --cv-btn-fn-bg: #1d1d28;
+ --cv-btn-fn-text: #c0c0d0;
+ --cv-btn-fn-hover: #252535;
+ --cv-btn-eq-bg: #3b82f6;
+ --cv-btn-eq-text: #ffffff;
+ --cv-btn-eq-hover: #60a5fa;
+ --cv-btn-clear-bg: #4a1515;
+ --cv-btn-clear-text: #fca5a5;
+ --cv-btn-clear-hover: #5c1c1c;
+
+ --cv-display-bg: #080810;
+ --cv-display-text: #e2e8f0;
+ --cv-display-expr: #64748b;
+ --cv-display-cursor: #60a5fa;
+
+ --cv-input-bg: #1a1a22;
+ --cv-input-border: rgba(255, 255, 255, 0.14);
+ --cv-input-focus: #60a5fa;
+ --cv-input-placeholder: #555566;
+
+ --cv-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40);
+ --cv-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.50);
+ --cv-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.60);
+ }
+}
+
+/* โโ Manual override: force dark โโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+[data-theme="dark"] {
+ --cv-bg-page: #0f0f13;
+ --cv-bg-surface: #1a1a22;
+ --cv-bg-raised: #222230;
+ --cv-bg-sunken: #12121a;
+ --cv-bg-overlay: rgba(255, 255, 255, 0.05);
+
+ --cv-border: rgba(255, 255, 255, 0.10);
+ --cv-border-strong: rgba(255, 255, 255, 0.22);
+
+ --cv-text-primary: #f0f0f5;
+ --cv-text-secondary: #a0a0b0;
+ --cv-text-muted: #666680;
+ --cv-text-inverse: #111111;
+
+ --cv-accent: #60a5fa;
+ --cv-accent-hover: #93c5fd;
+ --cv-accent-light: #1e3a5f;
+ --cv-accent-text: #93c5fd;
+
+ --cv-success: #4ade80;
+ --cv-success-light: #14532d;
+ --cv-error: #f87171;
+ --cv-error-light: #7f1d1d;
+ --cv-warning: #fbbf24;
+ --cv-warning-light: #78350f;
+
+ --cv-btn-digit-bg: #222230;
+ --cv-btn-digit-text: #f0f0f5;
+ --cv-btn-digit-hover: #2c2c3e;
+ --cv-btn-op-bg: #1e2d4a;
+ --cv-btn-op-text: #93c5fd;
+ --cv-btn-op-hover: #253a5e;
+ --cv-btn-fn-bg: #1d1d28;
+ --cv-btn-fn-text: #c0c0d0;
+ --cv-btn-fn-hover: #252535;
+ --cv-btn-eq-bg: #3b82f6;
+ --cv-btn-eq-text: #ffffff;
+ --cv-btn-eq-hover: #60a5fa;
+ --cv-btn-clear-bg: #4a1515;
+ --cv-btn-clear-text: #fca5a5;
+ --cv-btn-clear-hover: #5c1c1c;
+
+ --cv-display-bg: #080810;
+ --cv-display-text: #e2e8f0;
+ --cv-display-expr: #64748b;
+ --cv-display-cursor: #60a5fa;
+
+ --cv-input-bg: #1a1a22;
+ --cv-input-border: rgba(255, 255, 255, 0.14);
+ --cv-input-focus: #60a5fa;
+ --cv-input-placeholder: #555566;
+
+ --cv-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40);
+ --cv-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.50);
+ --cv-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.60);
+}
+
+/* โโ Manual override: force light โโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+[data-theme="light"] {
+ /* explicit resets handled by :root defaults above */
+ color-scheme: light;
+}
+
+/* โโ Base resets using theme tokens โโโโโโโโโโโโโโโโโโโโโโโโ */
+*, *::before, *::after {
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ font-family: var(--cv-font-ui);
+ background-color: var(--cv-bg-page);
+ color: var(--cv-text-primary);
+ transition: background-color var(--cv-transition-slow), color var(--cv-transition-slow);
+ -webkit-font-smoothing: antialiased;
+}
+
+/* โโ Dark mode toggle button (drop anywhere in layout) โโโโโโ */
+.cv-theme-toggle {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 6px 14px;
+ border-radius: var(--cv-radius-pill);
+ border: 1px solid var(--cv-border-strong);
+ background: var(--cv-bg-raised);
+ color: var(--cv-text-secondary);
+ font-size: 13px;
+ font-family: var(--cv-font-ui);
+ cursor: pointer;
+ transition: background var(--cv-transition-fast), color var(--cv-transition-fast);
+}
+
+.cv-theme-toggle:hover {
+ background: var(--cv-bg-sunken);
+ color: var(--cv-text-primary);
+}
+
+.cv-theme-toggle .cv-theme-icon {
+ font-size: 15px;
+ line-height: 1;
+}