/* ============================================================================ OneCanvas visual system · tokens ---------------------------------------------------------------------------- Load order: FIRST, before any redesign stylesheet. - React pages : import after app/globals.css (or in layout.tsx ) - Canvas HTML : after /prototype/onecanvas-ai-connect.css Light is the default. Dark is opted in with html[data-theme="dark"] (already how the standalone canvas switches themes) or a .oc-dark wrapper. All colors are oklch; hex comments are approximations for design tools. ============================================================================ */ :root { /* — typography — */ --oc-font: "Pretendard Variable", Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; --oc-mono: ui-monospace, "D2Coding", "JetBrains Mono", Consolas, monospace; --oc-fs-display: clamp(32px, 3.2vw, 42px); /* page headline (home) */ --oc-fs-title: 28px; /* section / settings page title */ --oc-fs-h3: 20px; /* card title, dialog title */ --oc-fs-lead: 18px; /* hero lead */ --oc-fs-body: 16px; /* main reading text — never below */ --oc-fs-ui: 14px; /* frequent UI controls */ --oc-fs-meta: 13px; /* metadata */ --oc-fs-micro: 12px; /* absolute floor (badges, keys) */ --oc-lh-tight: 1.2; --oc-lh-ui: 1.4; --oc-lh-body: 1.65; --oc-track-tight: -0.02em; /* — spacing (4px grid) — */ --oc-s1: 4px; --oc-s2: 8px; --oc-s3: 12px; --oc-s4: 16px; --oc-s5: 20px; --oc-s6: 24px; --oc-s8: 32px; --oc-s10: 40px; --oc-s12: 48px; --oc-s16: 64px; /* — radius — */ --oc-r-control: 8px; --oc-r-card: 12px; --oc-r-panel: 14px; --oc-r-pill: 999px; /* — control metrics — */ --oc-control-h: 40px; /* buttons, inputs (desktop) */ --oc-control-h-sm: 32px; /* dense toolbars */ --oc-touch-h: 44px; /* mobile minimum hit target */ /* — light palette · cool neutral — */ --oc-bg: oklch(97.8% 0.004 250); /* #f6f7f9 page */ --oc-surface: oklch(100% 0 0); /* #ffffff cards, shell */ --oc-surface-2: oklch(96.2% 0.006 250); /* #f1f3f6 recessed */ --oc-surface-3: oklch(93.2% 0.008 250); /* #e8ebef hover on recessed */ --oc-line: oklch(89.6% 0.008 250); /* #dfe2e7 */ --oc-line-strong: oklch(80% 0.012 250); /* #c3c8d1 */ --oc-text: oklch(23% 0.02 262); /* #1d2230 */ --oc-text-2: oklch(47% 0.02 260); /* #5b6270 */ --oc-text-3: oklch(60% 0.015 260); /* #7f8592 */ --oc-grid-dot: oklch(86% 0.01 250); /* canvas dot grid */ --oc-accent: oklch(53% 0.19 262); /* #2e5fe0 */ --oc-accent-strong: oklch(46% 0.19 262); /* #1f4bc4 hover / pressed */ --oc-accent-ink: #ffffff; /* text on accent */ --oc-accent-soft: oklch(95.5% 0.025 262);/* #eaf0fd selected rows, chips */ --oc-accent-line: oklch(82% 0.08 262); /* #b5c7f2 */ --oc-ok: oklch(60% 0.15 155); /* #1fa86a connected / saved */ --oc-ok-soft: oklch(95.5% 0.04 155); --oc-ok-text: oklch(40% 0.12 155); --oc-warn: oklch(72% 0.15 75); /* #e0a11b beta / temporary */ --oc-warn-soft: oklch(96.5% 0.045 85); --oc-warn-line: oklch(85% 0.09 85); --oc-warn-text: oklch(42% 0.10 65); --oc-danger: oklch(55% 0.19 25); /* #d6382b */ --oc-danger-soft: oklch(95.5% 0.03 25); --oc-danger-text: oklch(42% 0.16 25); --oc-focus-ring: 0 0 0 3px oklch(53% 0.19 262 / 0.32); --oc-shadow-1: 0 1px 2px oklch(20% 0.02 260 / .06), 0 1px 1px oklch(20% 0.02 260 / .04); --oc-shadow-2: 0 6px 20px oklch(20% 0.02 260 / .10), 0 1px 3px oklch(20% 0.02 260 / .06); --oc-shadow-3: 0 18px 48px oklch(20% 0.02 260 / .18), 0 2px 6px oklch(20% 0.02 260 / .08); --oc-overlay: oklch(20% 0.02 260 / .48); /* — motion — */ --oc-motion-fast: 140ms; --oc-motion: 220ms; --oc-ease: cubic-bezier(.2, .7, .2, 1); } :root[data-theme="dark"], .oc-dark { --oc-bg: oklch(17.5% 0.008 260); /* #15171b canvas stage */ --oc-surface: oklch(21.5% 0.008 260); /* #1d2025 shell panels */ --oc-surface-2: oklch(25.5% 0.009 260); /* #25282e */ --oc-surface-3: oklch(30% 0.01 260); /* #2e3138 */ --oc-line: oklch(31% 0.01 260); /* #30333a */ --oc-line-strong: oklch(41% 0.012 260); --oc-text: oklch(93% 0.005 260); /* #e9eaee */ --oc-text-2: oklch(69% 0.012 260); /* #9ea3ac */ --oc-text-3: oklch(56% 0.012 260); --oc-grid-dot: oklch(26% 0.01 260); --oc-accent: oklch(62% 0.17 262); /* #4b7cec */ --oc-accent-strong: oklch(68% 0.16 262); --oc-accent-ink: #ffffff; --oc-accent-soft: oklch(62% 0.17 262 / .16); --oc-accent-line: oklch(62% 0.17 262 / .5); --oc-ok: oklch(68% 0.15 155); --oc-ok-soft: oklch(68% 0.15 155 / .14); --oc-ok-text: oklch(80% 0.12 155); --oc-warn: oklch(76% 0.15 80); --oc-warn-soft: oklch(76% 0.15 80 / .14); --oc-warn-line: oklch(76% 0.15 80 / .4); --oc-warn-text: oklch(86% 0.10 85); --oc-danger: oklch(64% 0.19 25); --oc-danger-soft: oklch(64% 0.19 25 / .14); --oc-danger-text: oklch(80% 0.12 25); --oc-focus-ring: 0 0 0 3px oklch(62% 0.17 262 / 0.42); --oc-shadow-1: 0 1px 2px oklch(0% 0 0 / .3); --oc-shadow-2: 0 8px 24px oklch(0% 0 0 / .38), 0 1px 3px oklch(0% 0 0 / .3); --oc-shadow-3: 0 20px 56px oklch(0% 0 0 / .5), 0 2px 6px oklch(0% 0 0 / .35); --oc-overlay: oklch(5% 0.01 260 / .6); } @media (prefers-reduced-motion: reduce) { :root { --oc-motion-fast: 0ms; --oc-motion: 0ms; } }