/* ========================================================================== Silkway Studio — Design Tokens GENERATED by brand/tools/mint-palette.py — do not hand-edit colour values. Every dye sits at a fixed OKLCH lightness per tier; only hue rotates, so every slot is WCAG AA correct by construction. Run --verify for the proof. ======================================================================== */ :root { /* ── Neutrals — oklch(L 74° h, c 0.005): grey chosen, not inherited ── */ --sw-paper-0: #FCFAF6; --sw-paper-1: #F5F3F0; --sw-paper-2: #ECEAE7; --sw-paper-3: #E0DDDA; --sw-ink-0: #13100D; --sw-ink-1: #22201D; --sw-ink-2: #54524F; --sw-ink-3: #6B6866; /* ── The dye index. Allocate strictly in this order; never skip ahead. ── */ /* HOUSE — reserved for silkway.studio + store. Never a product line. */ --sw-madder-wash: #FEE7E3; --sw-madder-bright: #DE9589; --sw-madder-deep: #874A40; --sw-madder-shade: #3D1B16; /* line 1. taken — GraphKit SDK · Converge */ --sw-lapis-wash: #D7F3F8; --sw-lapis-bright: #5FBACA; --sw-lapis-deep: #166975; --sw-lapis-shade: #052C32; /* line 2. taken — DiagramKit SDK · Diagrammar */ --sw-verdigris-wash: #DFF3E2; --sw-verdigris-bright: #81BB8D; --sw-verdigris-deep: #376B43; --sw-verdigris-shade: #0F2E17; /* line 3. free */ --sw-mulberry-wash: #F9E6F7; --sw-mulberry-bright: #CC96C6; --sw-mulberry-deep: #784B74; --sw-mulberry-shade: #351C33; /* line 4. free */ --sw-indigo-wash: #E6EDFE; --sw-indigo-bright: #95A8E4; --sw-indigo-deep: #4B5B8E; --sw-indigo-shade: #1C2441; /* line 5. free */ --sw-saffron-wash: #F5ECD7; --sw-saffron-bright: #C1A966; --sw-saffron-deep: #705B1B; --sw-saffron-shade: #302503; /* line 6. free */ --sw-myrtle-wash: #EAF0DA; --sw-myrtle-bright: #A3B472; --sw-myrtle-deep: #576429; --sw-myrtle-shade: #232A07; /* line 7. free */ --sw-amethyst-wash: #EFE9FE; --sw-amethyst-bright: #B39EDC; --sw-amethyst-deep: #655286; --sw-amethyst-shade: #2B203D; /* line 8. free */ --sw-ochre-wash: #FDE9D9; --sw-ochre-bright: #D59D70; --sw-ochre-deep: #805127; --sw-ochre-shade: #3A1F06; /* line 9. free */ --sw-woad-wash: #DDF0FE; --sw-woad-bright: #74B3DE; --sw-woad-deep: #296389; --sw-woad-shade: #06293E; /* line 10. free */ --sw-celadon-wash: #D8F4ED; --sw-celadon-bright: #64BEAD; --sw-celadon-deep: #166C5F; --sw-celadon-shade: #052E27; /* line 11. free */ --sw-cochineal-wash: #FEE6EC; --sw-cochineal-bright: #DA93A8; --sw-cochineal-deep: #84485C; --sw-cochineal-shade: #3C1A25; /* ── Semantic roles. Components read ONLY these. ── */ --sw-bg: var(--sw-paper-1); --sw-bg-raised: var(--sw-paper-0); --sw-bg-sunken: var(--sw-paper-2); --sw-line: rgba(34, 32, 29, 0.11); --sw-line-strong: rgba(34, 32, 29, 0.20); --sw-fg: var(--sw-ink-1); --sw-fg-secondary: var(--sw-ink-2); --sw-fg-muted: var(--sw-ink-3); --sw-on-dye: var(--sw-paper-0); /* Default line = the house dye. Override with [data-line] on . */ --sw-dye-wash: var(--sw-madder-wash); --sw-dye-bright: var(--sw-madder-bright); --sw-dye-deep: var(--sw-madder-deep); --sw-dye-shade: var(--sw-madder-shade); --sw-dye-text: var(--sw-dye-deep); /* links, emphasis */ --sw-dye-fill: var(--sw-dye-deep); /* buttons, marks */ --sw-dye-tint: var(--sw-dye-wash); /* chips, callouts */ /* ── Type. Three voices from two superfamilies. ── */ --sw-font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif; --sw-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; --sw-font-serif: 'Newsreader', Georgia, 'Times New Roman', serif; /* Display scales with viewport; body never does. */ --sw-text-display: clamp(2.75rem, 1.6rem + 4.2vw, 5.25rem); --sw-text-title: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); --sw-text-heading: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); --sw-text-lead: 1.1875rem; --sw-text-body: 1rem; --sw-text-small: 0.875rem; --sw-text-label: 0.6875rem; --sw-leading-display: 1.04; --sw-leading-title: 1.12; --sw-leading-body: 1.6; --sw-leading-relaxed: 1.72; --sw-tracking-display: -0.03em; --sw-tracking-title: -0.022em; --sw-tracking-label: 0.14em; --sw-weight-regular: 400; --sw-weight-medium: 500; --sw-weight-semi: 600; /* heaviest in the system — there is no bold */ /* ── Space. 8px base; 4px only inside controls. ── */ --sw-space-1: 0.25rem; --sw-space-2: 0.5rem; --sw-space-3: 0.75rem; --sw-space-4: 1rem; --sw-space-6: 1.5rem; --sw-space-8: 2rem; --sw-space-12: 3rem; --sw-space-16: 4rem; --sw-space-24: 6rem; --sw-space-32: 8rem; /* ── Measure ── */ --sw-width-page: 1240px; --sw-width-text: 68ch; --sw-width-code: 92ch; --sw-gutter: clamp(1.25rem, 4vw, 3rem); /* ── Radius. Three tiers: controls, cards, surfaces. Pills: tags + nav island. ── */ --sw-radius-sm: 4px; --sw-radius-md: 8px; --sw-radius-lg: 12px; --sw-radius-xl: 20px; --sw-radius-2xl: 24px; --sw-radius-full: 999px; /* ── Elevation: warm-tinted, low opacity, wide blur. ── */ --sw-shadow-sm: 0 1px 2px rgba(40, 34, 28, 0.06); --sw-shadow-md: 0 4px 12px -2px rgba(40, 34, 28, 0.08), 0 2px 4px -2px rgba(40, 34, 28, 0.05); --sw-shadow-lg: 0 24px 48px -16px rgba(40, 34, 28, 0.13), 0 8px 16px -8px rgba(40, 34, 28, 0.07); /* ── Motion. Confirms actions; never performs. ── */ --sw-ease: cubic-bezier(0.32, 0.72, 0, 1); --sw-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --sw-dur-instant: 90ms; --sw-dur-fast: 160ms; --sw-dur-base: 240ms; --sw-dur-slow: 360ms; --sw-focus-ring: 0 0 0 2px var(--sw-bg), 0 0 0 4px var(--sw-dye-fill); } /* ── Line bindings. One attribute repaints an entire property. ── */ [data-line='graph'] { /* GraphKit SDK · Converge */ --sw-dye-wash: var(--sw-lapis-wash); --sw-dye-bright: var(--sw-lapis-bright); --sw-dye-deep: var(--sw-lapis-deep); --sw-dye-shade: var(--sw-lapis-shade); } [data-line='diagram'] { /* DiagramKit SDK · Diagrammar */ --sw-dye-wash: var(--sw-verdigris-wash); --sw-dye-bright: var(--sw-verdigris-bright); --sw-dye-deep: var(--sw-verdigris-deep); --sw-dye-shade: var(--sw-verdigris-shade); } /* ── Dark mode: a mode, not a second identity. bright/shade promoted. ── */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --sw-bg: var(--sw-ink-0); --sw-bg-raised: #22201D; --sw-bg-sunken: #090705; --sw-line: rgba(245, 243, 240, 0.11); --sw-line-strong: rgba(245, 243, 240, 0.22); --sw-fg: #F5F3F0; --sw-fg-secondary: #BAB7B4; --sw-fg-muted: #93908E; --sw-dye-text: var(--sw-dye-bright); --sw-dye-fill: var(--sw-dye-bright); --sw-dye-tint: var(--sw-dye-shade); --sw-on-dye: var(--sw-ink-0); } } :root[data-theme='dark'] { --sw-bg: var(--sw-ink-0); --sw-bg-raised: #22201D; --sw-bg-sunken: #090705; --sw-line: rgba(245, 243, 240, 0.11); --sw-line-strong: rgba(245, 243, 240, 0.22); --sw-fg: #F5F3F0; --sw-fg-secondary: #BAB7B4; --sw-fg-muted: #93908E; --sw-dye-text: var(--sw-dye-bright); --sw-dye-fill: var(--sw-dye-bright); --sw-dye-tint: var(--sw-dye-shade); --sw-on-dye: var(--sw-ink-0); } @media (prefers-reduced-motion: reduce) { :root { --sw-dur-instant: 1ms; --sw-dur-fast: 1ms; --sw-dur-base: 1ms; --sw-dur-slow: 1ms; } }