/* schr.ag design system — tokens Source of truth: claude.ai/design project "schr.ag Design System" (tokens/colors|typography|spacing|surfaces|motion|base.css, concatenated). Dark is the DEFAULT (:root). Light mode: class="light" on . */ /* ---- colors ---- */ :root, .dark, [data-theme="dark"] { color-scheme: dark; /* neutrals — zinc family */ --background: oklch(0.185 0.004 286); --foreground: oklch(0.93 0.004 286); --card: oklch(0.215 0.005 286); --card-foreground: oklch(0.93 0.004 286); --popover: oklch(0.235 0.005 286); --popover-foreground: oklch(0.93 0.004 286); --muted: oklch(0.26 0.005 286); --muted-foreground: oklch(0.69 0.01 286); --secondary: oklch(0.26 0.005 286); --secondary-foreground: oklch(0.93 0.004 286); --accent: oklch(0.285 0.006 286); --accent-foreground: oklch(0.96 0.004 286); --border: oklch(0.32 0.006 286); --input: oklch(0.32 0.006 286); /* brand primary — orange, muted */ --primary: oklch(0.68 0.13 45); --primary-foreground: oklch(0.18 0.03 45); --ring: oklch(0.68 0.13 45); /* status — desaturated: accents, not alarms */ --destructive: oklch(0.60 0.15 25); --destructive-foreground: oklch(0.97 0.01 25); --success: oklch(0.70 0.10 150); --success-foreground: oklch(0.18 0.04 150); --warning: oklch(0.78 0.10 85); --warning-foreground: oklch(0.22 0.05 85); /* playful accent family — muted; one per context, never all at once */ --accent-orange: oklch(0.68 0.13 45); --accent-lime: oklch(0.76 0.11 130); --accent-cyan: oklch(0.74 0.08 215); --accent-violet: oklch(0.68 0.10 300); --accent-pink: oklch(0.70 0.10 350); --accent-amber: oklch(0.78 0.10 85); --chart-1: var(--accent-orange); --chart-2: var(--accent-cyan); --chart-3: var(--accent-lime); --chart-4: var(--accent-violet); --chart-5: var(--accent-pink); /* semantic aliases */ --surface-page: var(--background); --surface-card: var(--card); --surface-raised: var(--popover); --text-body: var(--foreground); --text-muted: var(--muted-foreground); --text-link: var(--accent-cyan); --selection-bg: oklch(0.68 0.13 45 / 0.30); } .light, [data-theme="light"] { color-scheme: light; --background: oklch(0.985 0.001 286); --foreground: oklch(0.21 0.006 286); --card: oklch(1 0 0); --card-foreground: oklch(0.21 0.006 286); --popover: oklch(1 0 0); --popover-foreground: oklch(0.21 0.006 286); --muted: oklch(0.955 0.002 286); --muted-foreground: oklch(0.50 0.01 286); --secondary: oklch(0.955 0.002 286); --secondary-foreground: oklch(0.21 0.006 286); --accent: oklch(0.93 0.003 286); --accent-foreground: oklch(0.18 0.006 286); --border: oklch(0.89 0.004 286); --input: oklch(0.86 0.004 286); --primary: oklch(0.62 0.14 45); --primary-foreground: oklch(0.99 0.005 45); --ring: oklch(0.62 0.14 45); --destructive: oklch(0.55 0.16 25); --destructive-foreground: oklch(0.99 0.005 25); --success: oklch(0.56 0.11 150); --success-foreground: oklch(0.99 0.005 150); --warning: oklch(0.68 0.11 75); --warning-foreground: oklch(0.22 0.05 85); --accent-orange: oklch(0.62 0.14 45); --accent-lime: oklch(0.62 0.12 130); --accent-cyan: oklch(0.56 0.09 215); --accent-violet: oklch(0.54 0.12 300); --accent-pink: oklch(0.58 0.13 350); --accent-amber: oklch(0.68 0.11 75); --text-link: oklch(0.50 0.10 215); --selection-bg: oklch(0.62 0.14 45 / 0.22); } /* ---- typography ---- */ :root { --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.375rem; --text-5xl: 3rem; --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.08em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --font-display: var(--weight-semibold) var(--text-4xl)/var(--leading-tight) var(--font-sans); --font-heading: var(--weight-semibold) var(--text-2xl)/var(--leading-snug) var(--font-sans); --font-subheading: var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-sans); --font-body-lg: var(--weight-regular) var(--text-lg)/var(--leading-relaxed) var(--font-sans); --font-body: var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-sans); --font-ui: var(--weight-medium) var(--text-sm)/var(--leading-normal) var(--font-sans); --font-code: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-mono); --font-label: var(--weight-medium) var(--text-xs)/var(--leading-normal) var(--font-mono); /* --font-label usage: uppercase + letter-spacing: var(--tracking-wide) */ } /* ---- spacing: 4px base grid ---- */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --measure: 68ch; --content-width: 720px; --page-width: 1120px; --gutter: var(--space-6); } /* ---- radius, borders, shadows, blur ---- */ :root, .dark, [data-theme="dark"] { --radius: 0.5rem; --radius-sm: calc(var(--radius) - 2px); --radius-md: var(--radius); --radius-lg: calc(var(--radius) + 4px); --radius-xl: calc(var(--radius) + 8px); --radius-full: 9999px; --border-w: 1px; --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.28); --shadow-md: 0 4px 12px oklch(0 0 0 / 0.32); --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.42); --shadow-overlay: 0 16px 48px oklch(0 0 0 / 0.5); --backdrop: oklch(0.1 0.005 260 / 0.6); --blur-overlay: 8px; } .light, [data-theme="light"] { --shadow-sm: 0 1px 2px oklch(0.2 0.01 260 / 0.07); --shadow-md: 0 4px 12px oklch(0.2 0.01 260 / 0.09); --shadow-lg: 0 12px 32px oklch(0.2 0.01 260 / 0.13); --shadow-overlay: 0 16px 48px oklch(0.2 0.01 260 / 0.2); --backdrop: oklch(0.25 0.01 260 / 0.4); } /* ---- motion: quick, quiet, no bounce ---- */ :root { --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 280ms; --ease-out: cubic-bezier(0.2, 0, 0, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.15, 1); } /* ---- base element styles ---- */ * { box-sizing: border-box; } body { margin: 0; background: var(--background); color: var(--foreground); font: var(--font-body); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--selection-bg); } a { color: var(--text-link); text-decoration: underline; text-decoration-color: color-mix(in oklch, var(--text-link) 45%, transparent); text-underline-offset: 3px; transition: text-decoration-color var(--duration-fast) var(--ease-out); } a:hover { text-decoration-color: var(--text-link); } code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.9em; } :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } @media print { body { background: white; color: black; } a { color: black; } }