/* ============================================================================= INSTACALC CORE THEME SYSTEM (Canonical 11) This file contains the foundational variables and base styles. Loaded on every page to prevent FOUC and ensure theme stability. ============================================================================= */ /* Custom InstaCalc hand-drawn font */ @font-face { font-family: InstaCalc; src: url("/img/ui/InstaCalc_v2.otf?v=112622") format("opentype"); size-adjust: 150%; } body, body * { font-family: var(--theme-font-family, 'Fira Sans', 'Fira Sans Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif); } /* Force monospace for code elements to override the aggressive global rule above */ pre, pre *, code, code *, kbd, .font-mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace !important; } :root { /* ================================================ CANONICAL CSS VARIABLES (Minimal Set) ================================================ These are set by theme.js - theme.js sets ONLY these 11 core variables. Defaults here MUST match app.html's dark defaults (Night theme) to prevent a flash of white/light on reload. The early inline script in app.html sets the correct theme via inline styles (highest specificity), but this stylesheet's :root block must not flash a lighter color during the brief CSS recalculation window. ================================================ */ --bg: #1e2336; --bg-alt: #23283d; --text: #b8bfe8; --text-dim: #6a7193; --accent: #c55970; --accent-bright: #ee6e73; --border-color: rgba(255, 255, 255, 0.1); --calc-result-color: #C95A6A; --calc-comment-color: hsla(200, 65%, 35%, 0.9); --calc-row-type-color: #e57373; --calc-row-type-custom-color: #AA4499; /* RGB variants for Tailwind opacity support (e.g., bg-accent/50). Must match the dark defaults above. theme.js updates these at runtime. */ --bg-rgb: 30 35 54; --bg-alt-rgb: 35 40 61; --text-rgb: 184 191 232; --text-dim-rgb: 106 113 147; --accent-rgb: 197 89 112; --accent-bright-rgb: 238 110 115; --border-color-rgb: 255 255 255; --calc-result-color-rgb: 201 90 106; --calc-row-type-color-rgb: 229 115 115; --calc-row-type-custom-color-rgb: 170 68 153; /* --- DERIVED INTERACTION TOKENS --- */ --accent-subtle: var(--accent-subtle); --accent-hover: color-mix(in srgb, var(--accent) 14%, transparent); --accent-pressed: color-mix(in srgb, var(--accent) 22%, transparent); --accent-strong: color-mix(in srgb, var(--accent) 35%, transparent); --accent-bold: color-mix(in srgb, var(--accent) 50%, transparent); --accent-light: var(--accent-subtle); --accent-medium: var(--accent-muted); --ink-ghost: color-mix(in srgb, var(--text) 8%, transparent); --ink-dim: color-mix(in srgb, var(--text) 22%, transparent); --ink-light: color-mix(in srgb, var(--text) 25%, transparent); --ink-medium: color-mix(in srgb, var(--text) 40%, transparent); --ink-strong: color-mix(in srgb, var(--text) 55%, transparent); /* --- PAGE BACKGROUND (separate from card bg for contrast control) --- */ --page-bg: var(--bg); /* --- DERIVED COMPONENT TOKENS --- */ --main-bg-color: var(--page-bg); --calc-bg-color: var(--bg); --calc-row-input-bg-color: var(--bg-alt); /* ===================================================================== Row input tokens — theme-overridable surface. Every theme declares four things for the calc row input: --calc-row-input-bg resting fill --calc-row-input-bg-hover hover fill --calc-row-input-bg-selected selected fill --calc-row-input-border resting border color --calc-row-selected-ring selected-state box-shadow Defaults below are the DARK-theme design (filled pill, no border). Light themes and brutalist/1984 re-declare these in theme.extra.css. Any new theme can override just the tokens it cares about — no new selectors needed in the styling layer. ===================================================================== */ --calc-row-input-bg: color-mix(in srgb, var(--text) 5%, var(--bg-alt)); --calc-row-input-bg-hover: color-mix(in srgb, var(--text) 8%, var(--bg-alt)); --calc-row-input-bg-selected: color-mix(in srgb, var(--text) 11%, var(--bg-alt)); --calc-row-input-border: transparent; --calc-row-selected-ring: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); --calc-row-number: color-mix(in srgb, var(--text) 10%, var(--text-dim)); --calc-font-family: 'Fira Sans', system-ui, -apple-system, sans-serif; --link-color: var(--accent); --link-hover-color: var(--accent-bright); --tab-active-color: var(--accent); --tooltip-color: var(--bg-alt); --tooltip-text-color: var(--text); --soft-border-color: var(--border-color); --border-soft: color-mix(in srgb, var(--border-color) 60%, transparent); --border-default: color-mix(in srgb, var(--border-color) 150%, transparent); --row-border: color-mix(in srgb, var(--border-color) 80%, transparent); --mobile-bottom-nav-height: 60px; /* Text variants */ --text-on-accent: var(--bg); --text-faint: color-mix(in srgb, var(--text-dim) 60%, transparent); --text-error: var(--calc-result-color); /* Surface & tints */ --surface-tint: color-mix(in srgb, var(--text) 6%, transparent); --surface-tint-strong: color-mix(in srgb, var(--text) 12%, transparent); --bg-tertiary: color-mix(in srgb, var(--bg-alt) 60%, var(--bg)); --bg-secondary-mix-40: color-mix(in srgb, var(--bg-alt) 40%, transparent); --bg-glass: var(--surface-dim); --bg-glass-heavy: color-mix(in srgb, var(--bg) 70%, transparent); /* Status tints (for badges/pills using status colors) */ --status-public-bg: color-mix(in srgb, var(--status-public-fg) 10%, transparent); --status-private-bg: color-mix(in srgb, var(--status-private-fg) 10%, transparent); --status-error-tint: color-mix(in srgb, var(--calc-result-color) 10%, transparent); --comment-tint: color-mix(in srgb, var(--calc-comment-color, var(--text-dim)) 10%, transparent); --comment-border: color-mix(in srgb, var(--calc-comment-color, var(--text-dim)) 10%, transparent); /* Accent variants */ --accent-tertiary: var(--calc-result-color); --pill-accent: var(--accent); /* Buttons & Cards */ --button-bg-color-create: var(--accent); --button-text-color-create: var(--bg-alt); --button-primary-fg: var(--bg); --card-bg: var(--bg); --card-border: var(--border-color); --header-card-bg: var(--bg); --header-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); --header-card-border: transparent; --highlight-bg-color: var(--accent); --highlight-text-color: var(--bg); /* Dropdowns */ --dropdown-surface: color-mix(in srgb, var(--bg) 80%, var(--bg-alt) 20%); --dropdown-border-color: color-mix(in srgb, var(--soft-border-color) 80%, transparent); --dropdown-shadow: 0 18px 35px rgba(15, 23, 42, 0.18); /* Calc row log styling */ --calc-row-log-color: var(--text-dim); --calc-row-log-bg-color: var(--bg-alt); --calc-row-log-border-color: var(--border-color); /* Status colors */ --status-public-fg: #059669; --status-public-bg: #34d399; --status-private-fg: #d97706; --status-private-bg: #fbbf24; --status-error-fg: #f87171; /* Background effects */ --gradient-intensity: 0.1; --orb-opacity: 0.1; --dock-gradient-mix: 15%; --present-hero-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%); --present-bg: var(--bg); --wave-1: color-mix(in srgb, var(--page-bg) 88%, var(--accent)); --wave-2: color-mix(in srgb, var(--page-bg) 85%, var(--accent)); --wave-3: color-mix(in srgb, var(--page-bg) 90%, var(--accent)); --wave-4: color-mix(in srgb, var(--page-bg) 82%, var(--accent)); --wave-5: color-mix(in srgb, var(--page-bg) 92%, var(--accent)); /* --- LAYOUT CONSTANTS --- */ --radius-control: 0.625rem; --radius-base: 0.75rem; --radius-card: 1rem; --radius-surface: 1.25rem; --radius-sidebar: 1.5rem; --duration-fast: 150ms; --duration-normal: 200ms; --duration-medium: 300ms; --duration-slow: 500ms; --sidebar-width: 280px; } /* Daylight theme: inputs should be pure white, not bg-alt gray */ body[data-theme="theme-daylight"] { --calc-row-input-bg-color: var(--bg); --calc-row-selected-input-bg-color: var(--bg); } body[data-theme="theme-daylight"] [data-calc-input] input { border-color: var(--border-color); } /* Dark themes: stronger card shadow + subtle ring for depth (B1) */ body.theme-dark { --calc-card-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 7%, transparent), 0 0 24px rgba(0, 0, 0, 0.35), 0 8px 32px rgba(0, 0, 0, 0.2); /* Low-opacity accent blends into dark bg; bump ring for visibility */ --calc-row-selected-ring: 0 0 0 2px color-mix(in srgb, var(--accent) 75%, transparent); } /* Base resets for themed colors */ body { color: var(--text); background-color: var(--bg); } /* Wave/grid backgrounds are rendered as body backgroundImage by bgPlay.js. The AppShell wrapper must be transparent so the body background shows through. Uses !important to override Tailwind's bg-surface class which loads later. */ html[data-bg-style="waves"] [data-view-context], html[data-bg-style="grid"] [data-view-context] { background-color: transparent !important; } /* Compact size style — reduces row height, gap, padding, and font size. Targets Svelte calc components. Uses !important to override inline styles set on InstaCalc.svelte (inline styles have higher specificity than selectors). */ html[data-size-style="compact"] .icreact, html[data-size-style="compact"] .calc-ready { --calc-gap-y: 0.125rem !important; --calc-grid-gap-y: 0.125rem !important; --calc-row-height: 1.75rem; --calc-padding-y-mobile: 0.75rem; --calc-padding-y-desktop: 0.75rem; font-size: 15px; } html[data-size-style="compact"] .icreact:not(.view-embed), html[data-size-style="compact"] .calc-ready:not(.view-embed) { padding-top: 2rem; } html[data-size-style="compact"] .icreact row, html[data-size-style="compact"] .calc-ready row { min-height: 25px; margin-bottom: 2px; } html[data-size-style="compact"] .icreact input, html[data-size-style="compact"] .calc-ready input { height: 25.5px; padding-top: 1px; padding-bottom: 1px; line-height: 19.5px; } @media (max-width: 768px) { html[data-size-style="compact"] .icreact, html[data-size-style="compact"] .calc-ready { font-size: 14px; --calc-row-height: 1.5rem; } html[data-size-style="compact"] .icreact row, html[data-size-style="compact"] .calc-ready row { min-height: 20px; margin-bottom: 1px; } html[data-size-style="compact"] .icreact input, html[data-size-style="compact"] .calc-ready input { height: 22px; padding-top: 0; padding-bottom: 0; line-height: 18px; } html[data-size-style="compact"] .icreact result, html[data-size-style="compact"] .calc-ready result { font-size: 14px; line-height: 20px; } html[data-size-style="compact"] .icreact number, html[data-size-style="compact"] .calc-ready number { font-size: 11px; min-width: 18px; } } /* --- Compatibility Aliases --- */ :root { --accent-primary: var(--accent); --accent-secondary: var(--accent-bright); --theme-accent: var(--accent); --theme-bg: var(--bg); --theme-text: var(--text); --border-default: var(--border-color); --bg-secondary: var(--bg-alt); --text-muted: var(--text-dim); --text-secondary: var(--text-dim); }