/* ============================================================================ ATELIER — Design tokens for a calm 2D studio ---------------------------------------------------------------------------- Lineage: adapted from the Podesta / Korda design system (stone + ink + oxblood, Source Serif 4 / Inter / JetBrains Mono, 4px grid, soft floating elevation). Adapted for a canvas tool: the chrome is quiet sans + mono; the serif is reserved for documentation/display; a cooler INTERACTION-BLUE is added for live selection, handles, marquee, and snap guides. Token tiers 1. Primitives — raw, theme-independent values (--stone-*, --ink-*, --blue-*) 2. Semantic — purpose-bound, theme-aware (--bg, --fg, --selection, …) 3. Component — set inside component selectors (see components.css) Theming : everything dark-mode swaps by reassigning semantic tokens only. Set data-theme="light" | "dark" on . Dark is canonical here. Density : data-density="touch" (44px controls) | "pointer" (compact, but every interactive hit area is still padded to ≥44px). See §Density. ============================================================================ */ @import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500&family=Inter:wght@400;450;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"); /* ============================================================================ 1. PRIMITIVES ============================================================================ */ :root { /* --- Stone — warm neutral ramp, the chrome surface family --------------- */ --stone-50: #FAF9F5; --stone-100: #F1F0EC; /* light canonical page surface */ --stone-200: #E8E6E0; --stone-300: #D5D2C9; --stone-400: #B6B2A6; --stone-500: #8C887D; --stone-600: #5F5C53; --stone-700: #3F3D37; --stone-800: #2A2925; --stone-900: #161513; /* --- Ink — the signature library blue-black; chrome family in dark ------ */ --ink-50: #E5E8EE; --ink-100: #C4CAD5; --ink-200: #95A0B3; --ink-300: #5F6E89; --ink-400: #36465F; --ink-500: #1A2540; /* canonical ink */ --ink-600: #141C32; --ink-700: #0F1521; /* dark canonical page surface */ --ink-800: #0A0E18; --ink-900: #06080F; /* --- Interaction blue — NEW. Live selection, handles, marquee, guides, focus. Cooler & brighter than ink, distinct from the muted --info. */ --blue-50: #EBF2FE; --blue-100: #D2E2FD; --blue-200: #A6C5FA; --blue-300: #6BA0F4; --blue-400: #3B80EC; --blue-500: #1F6FE5; /* canonical interaction blue */ --blue-600: #1556BE; --blue-700: #114393; /* --- Oxblood — brand accent, used sparingly (links, editorial marks) ---- */ --oxblood-300: #B66572; --oxblood-500: #6B2330; --oxblood-600: #561A26; --oxblood-700: #3F121C; /* --- Signal palette (derived; tuned for AA on stone & ink) -------------- */ --success-500: #2F6F4E; --success-300: #6FB58E; --warning-500: #7A5A18; --warning-300: #C9A24A; --danger-500: #9C2A2A; /* NOT oxblood; oxblood is brand, danger is signal */ --danger-300: #E0837F; --info-500: #2B4F8F; --info-300: #7E9AD0; /* --- Type families ------------------------------------------------------ */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-serif: "Source Serif 4", "Tiempos Headline", "Iowan Old Style", Georgia, serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace; /* --- Type scale — ~1.2 modular ------------------------------------------ */ --fs-11: 0.6875rem; /* 11 — micro caps, tool badges (mono only) */ --fs-12: 0.75rem; /* 12 — eyebrow, dimension labels */ --fs-13: 0.8125rem; /* 13 — secondary UI, inspector rows */ --fs-14: 0.875rem; /* 14 — UI body, controls */ --fs-15: 0.9375rem; /* 15 — comfortable UI body */ --fs-16: 1rem; /* 16 — base */ --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-30: 1.875rem; --fs-38: 2.375rem; --fs-48: 3rem; --fs-64: 4rem; /* --- Line-heights ------------------------------------------------------- */ --lh-display: 1.08; --lh-headline: 1.18; --lh-tight: 1.25; --lh-body: 1.5; --lh-loose: 1.62; /* --- Letter-spacing ----------------------------------------------------- */ --tracking-display: -0.02em; --tracking-headline: -0.01em; --tracking-body: 0; --tracking-ui: 0.005em; --tracking-caps: 0.09em; /* --- Font weights ------------------------------------------------------- */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* --- Spacing — 4px base grid -------------------------------------------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* --- Radii — quiet, architectural; pills forbidden ---------------------- */ --radius-0: 0; --radius-1: 3px; /* micro: chips, tags, swatches */ --radius-2: 6px; /* inputs, small controls, tool buttons */ --radius-3: 10px; /* buttons, list items */ --radius-4: 14px; /* panels, cards, popovers */ --radius-5: 18px; /* modals, large floating surfaces */ /* --- Border widths ------------------------------------------------------ */ --border-width: 1px; --border-width-2: 1.5px; --border-width-3: 2px; /* --- Sizing — control heights, icons, panels ---------------------------- */ --icon-xs: 14px; --icon-sm: 16px; --icon-md: 18px; --icon-lg: 20px; --icon-xl: 24px; --tap-min: 44px; /* enforced minimum interactive hit area */ --panel-w: 280px; /* default docked panel width */ --panel-w-wide: 320px; /* inspector / library panel */ --panel-w-min: 232px; --toolbar-h: 52px; /* top toolbar height */ --content-max: 1248px; /* docs max measure */ --measure-prose: 42rem; /* ~672px reading width for docs */ /* --- Elevation — hairline + low-offset soft shadow ---------------------- */ --shadow-1: 0 1px 2px rgba(8, 12, 24, 0.06), 0 2px 6px -2px rgba(8, 12, 24, 0.08); --shadow-2: 0 2px 4px rgba(8, 12, 24, 0.07), 0 8px 20px -6px rgba(8, 12, 24, 0.12); --shadow-3: 0 4px 8px rgba(8, 12, 24, 0.08), 0 18px 40px -10px rgba(8, 12, 24, 0.20); --shadow-float: 0 1px 2px rgba(8, 12, 24, 0.05), 0 6px 16px -8px rgba(8, 12, 24, 0.12); /* --- Motion — restrained: fades & 1-step shifts, no bounce -------------- */ --ease-out: cubic-bezier(0.2, 0, 0, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 280ms; /* --- Z-index layers ----------------------------------------------------- */ --z-canvas: 0; --z-chrome: 100; /* docked toolbars & panels */ --z-overlay: 200; /* dropdowns, context menus, popovers */ --z-tooltip: 300; --z-modal: 400; /* dialog + scrim */ --z-toast: 500; } /* ============================================================================ 1b. BREAKPOINTS (documented; used as media queries in components/layout) --bp-ipad-portrait : 834px panels begin to collapse to overlays --bp-ipad-landscape: 1112px inspector docks again --bp-desktop : 1280px full dual-panel layout ============================================================================ */ /* ============================================================================ 2. SEMANTIC TOKENS — LIGHT (default fallback) ============================================================================ */ :root, [data-theme="light"] { color-scheme: light; /* Page + chrome surfaces */ --bg: var(--stone-100); /* app background behind chrome */ --bg-recessed: var(--stone-200); /* wells, track grooves */ --surface: var(--stone-50); /* floating panels, toolbars, cards */ --surface-2: #FFFFFF; /* nested floats (menus, inputs) */ --surface-hover: var(--stone-200); /* row/button hover wash */ --surface-active:var(--stone-300); /* pressed wash */ --surface-inverse: var(--ink-500); /* The drawing surface — paper white, framed by stone chrome */ --canvas: #FFFFFF; --canvas-grid: #ECEAE3; --canvas-grid-strong: #DCD9D0; --canvas-edge: rgba(8, 12, 24, 0.10); /* page/artboard outline */ /* Foreground */ --fg: var(--ink-500); --fg-secondary: var(--stone-700); --fg-tertiary: var(--stone-600); --fg-muted: var(--stone-500); --fg-disabled: var(--stone-400); --fg-on-accent: #FFFFFF; --fg-on-inverse: var(--stone-100); /* Borders / dividers */ --border: var(--stone-300); --border-subtle: var(--stone-200); --border-strong: var(--stone-500); --divider: var(--stone-200); /* Brand / primary action */ --brand: var(--ink-500); --brand-hover: var(--ink-600); --brand-press: var(--ink-700); --on-brand: var(--stone-50); /* Oxblood editorial accent (links, doc marks) */ --accent: var(--oxblood-500); --accent-hover: var(--oxblood-600); /* Interaction blue — selection, handles, guides, active tool */ --selection: var(--blue-500); --selection-hover: var(--blue-600); --selection-fill: rgba(31, 111, 229, 0.12); /* marquee / selected wash */ --selection-faint: rgba(31, 111, 229, 0.07); --handle-fill: #FFFFFF; --handle-stroke: var(--blue-500); --guide: var(--blue-500); --guide-soft: rgba(31, 111, 229, 0.45); --tool-active-bg: var(--blue-500); --tool-active-fg: #FFFFFF; --tool-active-soft: rgba(31, 111, 229, 0.12); /* Signals */ --success: var(--success-500); --success-bg: #E4F0E9; --warning: var(--warning-500); --warning-bg: #F4ECD6; --danger: var(--danger-500); --danger-bg: #F6E1E0; --info: var(--info-500); --info-bg: #E3EAF5; /* Links */ --link: var(--ink-500); --link-hover: var(--oxblood-500); --link-underline: var(--oxblood-500); /* Focus ring — consistent everywhere; blue on a bg-matched gap */ --focus-color: var(--blue-500); --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-color); --focus-ring-tight: 0 0 0 2px var(--focus-color); /* Scrim behind modals / sheets */ --scrim: rgba(22, 21, 19, 0.42); /* Dimension labels (mono) */ --dim-fg: var(--blue-700); --dim-bg: rgba(255, 255, 255, 0.92); } /* ============================================================================ 3. SEMANTIC TOKENS — DARK (canonical for the studio) ============================================================================ */ [data-theme="dark"] { color-scheme: dark; --bg: var(--ink-800); --bg-recessed: var(--ink-900); --surface: var(--ink-700); --surface-2: var(--ink-600); --surface-hover: #182138; --surface-active:#1E2945; --surface-inverse: var(--stone-100); --canvas: #0B0E16; --canvas-grid: rgba(197, 209, 235, 0.06); --canvas-grid-strong: rgba(197, 209, 235, 0.12); --canvas-edge: rgba(170, 188, 224, 0.16); --fg: var(--stone-100); --fg-secondary: var(--ink-100); --fg-tertiary: var(--ink-200); --fg-muted: var(--ink-300); --fg-disabled: var(--ink-400); --fg-on-accent: #FFFFFF; --fg-on-inverse: var(--ink-500); --border: #233052; --border-subtle: #1A2440; --border-strong: #34436B; --divider: #1A2440; --brand: var(--blue-500); --brand-hover: var(--blue-400); --brand-press: var(--blue-600); --on-brand: #FFFFFF; --accent: var(--oxblood-300); --accent-hover: #C97c87; --selection: var(--blue-400); --selection-hover: var(--blue-300); --selection-fill: rgba(59, 128, 236, 0.20); --selection-faint: rgba(59, 128, 236, 0.10); --handle-fill: #0B0E16; --handle-stroke: var(--blue-300); --guide: var(--blue-300); --guide-soft: rgba(107, 160, 244, 0.55); --tool-active-bg: var(--blue-500); --tool-active-fg: #FFFFFF; --tool-active-soft: rgba(59, 128, 236, 0.18); --success: var(--success-300); --success-bg: #15281E; --warning: var(--warning-300); --warning-bg: #2C2410; --danger: var(--danger-300); --danger-bg: #2E1514; --info: var(--info-300); --info-bg: #15203A; --link: var(--stone-100); --link-hover: var(--oxblood-300); --link-underline: var(--oxblood-300); --focus-color: var(--blue-300); --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-color); --focus-ring-tight: 0 0 0 2px var(--focus-color); --scrim: rgba(4, 6, 12, 0.62); --dim-fg: var(--blue-200); --dim-bg: rgba(11, 14, 22, 0.92); --shadow-1: 0 1px 2px rgba(0,0,0,0.4), 0 2px 8px -2px rgba(0,0,0,0.5); --shadow-2: 0 2px 4px rgba(0,0,0,0.45), 0 10px 24px -6px rgba(0,0,0,0.6); --shadow-3: 0 4px 10px rgba(0,0,0,0.5), 0 22px 48px -10px rgba(0,0,0,0.7); --shadow-float: 0 1px 2px rgba(0,0,0,0.4), 0 8px 20px -8px rgba(0,0,0,0.55); } /* ============================================================================ 4. DENSITY — control sizing; pointer is compact, touch is generous. In BOTH modes, true interactive hit areas stay ≥ --tap-min (44px) via padded targets in components.css. ============================================================================ */ :root, [data-density="pointer"] { --control-h: 32px; /* default control height (inputs, buttons, selects) */ --control-h-sm: 26px; --control-h-lg: 40px; --tool-btn: 32px; /* visual size of a square tool button */ --control-pad-x: 12px; --control-pad-x-sm: 8px; --control-gap: 8px; --field-fs: var(--fs-13); --row-h: 30px; /* inspector / menu row height */ } [data-density="touch"] { --control-h: 44px; --control-h-sm: 38px; --control-h-lg: 52px; --tool-btn: 44px; --control-pad-x: 16px; --control-pad-x-sm: 12px; --control-gap: 10px; --field-fs: var(--fs-15); --row-h: 44px; } /* ============================================================================ 5. ELEMENT DEFAULTS (kept minimal — components.css owns the rest) ============================================================================ */ * { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--fs-16); line-height: var(--lh-body); letter-spacing: var(--tracking-ui); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::selection { background: var(--selection-fill); } :where(:focus-visible) { outline: none; box-shadow: var(--focus-ring); } /* Honor reduced-motion globally */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Utility: monospace numerics for dimensions / coordinates */ .mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .eyebrow { font: var(--weight-semibold) var(--fs-12)/1.2 var(--font-sans); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-tertiary); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }