/* Theme tokens. Dark is the default/base palette (this app was dark-only before the light/dark/system toggle - see js/theme.js) so :root carries the original dark values unchanged; :root[data-theme="light"] overrides them for light mode. js/theme.js always resolves the user's preference (light/dark/system, the latter following the OS prefers-color-scheme live) to a concrete 'light' or 'dark' and sets data-theme on itself, so this file never needs its own prefers-color-scheme query. Not every color here is a token - a few are deliberately fixed across themes because they represent a concept rather than UI chrome: the canvas-transparency checkerboard and its surrounding backdrop, literal black/white paint swatches, the Matrix easter-egg green, and the destructive/success semantic colors (kept close to their dark values so they still read as "danger"/"success" in both themes). Search this file for the raw hex codes if you need to find those. */ :root { /* Tells the browser which native form-control/scrollbar rendering ("dark" = light-on-dark checkboxes, scrollbars, etc.) to use, so unstyled native chrome doesn't stay dark-styled after switching to the light theme (or vice versa). Kept next to the tokens it tracks. */ color-scheme: dark; --color-bg: #1c1c1e; --color-surface: #2c2c2e; --color-surface-alt: #232325; --color-track: #3a3a3d; --color-border: #48484a; --color-text: #f2f2f2; --color-text-secondary: #a0a0a5; --color-text-tertiary: #9a9a9e; --color-text-muted: #6e6e73; --color-text-subtle: #d0d0d5; --color-text-subtle-2: #c0c0c5; --color-accent: #0a84ff; --color-accent-strong: #0a5cad; --color-accent-soft: rgba(10, 132, 255, 0.15); --color-danger: #ff453a; --color-success: #34c759; --color-overlay: rgba(28, 28, 30, 0.92); --color-overlay-soft: rgba(28, 28, 30, 0.75); /* Icon-button size scale (icon-button-size-system) - every icon-only button's width/height is meant to read from one of these five steps instead of a one-off literal. Values are the five distinct sizes already in ad hoc use across the app before this change (Layers panel row buttons, color picker popover header, Color Library header actions [now reassigned to XS - see .color-library-header- actions .icon-button], zoom controls, and the base .icon-button/tool rail/bottom-bar undo-redo), so adopting them as named steps changes no existing rendered size except where a selector below explicitly switches steps. XS is also this scale's accessibility floor - see that selector's own comment for why it doesn't go smaller. */ --icon-size-xs: 1.4rem; --icon-size-s: 1.6rem; --icon-size-m: 1.8rem; --icon-size-l: 2.2rem; --icon-size-xl: 2.6rem; } :root[data-theme="light"] { color-scheme: light; --color-bg: #ececf0; --color-surface: #ffffff; --color-surface-alt: #e4e4e9; --color-track: #c6c6cc; --color-border: #a3a3a9; --color-text: #1c1c1e; --color-text-secondary: #6c6c70; --color-text-tertiary: #707074; --color-text-muted: #75757a; --color-text-subtle: #3c3c43; --color-text-subtle-2: #48484a; --color-accent: #007aff; --color-accent-strong: #0a5cad; --color-accent-soft: rgba(0, 122, 255, 0.12); --color-danger: #ff3b30; --color-success: #0f7a30; --color-overlay: rgba(255, 255, 255, 0.94); --color-overlay-soft: rgba(255, 255, 255, 0.8); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; /* Disables native pinch-zoom of the whole page (e.g. pinching over the right sidebar on iPad zoomed the entire app UI, not the canvas) - the viewport meta's user-scalable=no (index.html) is ignored by iOS Safari 10+ for accessibility, so this touch-action is the actual fix there; kept as pan-x pan-y (not none) so normal scrolling still works everywhere except the canvas, which sets its own stricter touch-action: none and handles pan/zoom entirely itself (see js/canvas-view.js). */ touch-action: pan-x pan-y; } body { font-family: system-ui, sans-serif; background: var(--color-bg); color: var(--color-text); } .hidden { display: none !important; } .screen { height: 100%; display: flex; flex-direction: column; } /* Gallery screen */ #screen-gallery { position: relative; padding: 1rem; gap: 1rem; overflow-y: auto; } /* Bottom-right corner of the Gallery screen only - see index.html's comment for why. Deliberately tiny/low-contrast: a diagnostic, not UI chrome anyone's meant to notice unless they're looking for it. */ .version-badge { position: absolute; right: 0.6rem; bottom: 0.4rem; margin: 0; font-family: ui-monospace, monospace; font-size: 0.65rem; color: var(--color-border); pointer-events: none; } .gallery-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .gallery-header h1 { margin: 0; font-size: 1.4rem; } .gallery-header .primary-button { margin-top: 0; width: auto; padding: 0.6rem 1rem; font-size: 1rem; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0.75rem; } .gallery-tile { position: relative; display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.5rem; overflow: hidden; cursor: pointer; } .gallery-thumbnail { width: 100%; aspect-ratio: 1; object-fit: contain; background: #e2e2e2; image-rendering: pixelated; image-rendering: crisp-edges; display: block; } .gallery-tile-name { padding: 0.4rem; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gallery-tile-delete { position: absolute; top: 0.3rem; right: 0.3rem; width: 1.8rem; height: 1.8rem; border: none; border-radius: 0.3rem; background: var(--color-overlay-soft); color: inherit; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; /* AUD-5: contain the icon-font-failure fallback text (see .icon-button). */ overflow: hidden; } .gallery-tile-delete .material-symbols-outlined { font-size: 1.1rem; } .gallery-empty-state { color: var(--color-text-secondary); text-align: center; margin-top: 2rem; } /* New Canvas screen */ #screen-new-canvas { padding: 1rem; gap: 1rem; overflow-y: auto; } .field-group h2 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary); margin-bottom: 0.5rem; } .preset-row { display: flex; flex-wrap: wrap; gap: 0.5rem; } .preset-button, .tool-button { padding: 0.6rem 1rem; border: 1px solid var(--color-border); border-radius: 0.5rem; background: var(--color-surface); color: inherit; font-size: 1rem; /* Real