/* ============================================================================ LLMIC design tokens Web translation of LLMIC/LLMICDesignSystem.swift. The application uses dynamic macOS system colours; this theme uses the corresponding stable web values so contrast is deterministic across browsers and platforms. ========================================================================== */ :root { /* Brand and semantic colours. LLMIC's brand baseline is monochrome. */ --llmic-color-brand: #000000; --llmic-color-accent: #007aff; --llmic-color-accent-hover: #0066d6; --llmic-color-accent-soft: rgba(0, 122, 255, 0.10); --llmic-color-success: #248a3d; --llmic-color-warning: #c93400; --llmic-color-danger: #d70015; /* Native-system typography, matching the app's SF Pro preference on Apple. */ --llmic-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --llmic-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --llmic-font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace; --llmic-font-size-xs: 0.75rem; --llmic-font-size-sm: 0.875rem; --llmic-font-size-md: 1rem; --llmic-font-size-lg: 1.125rem; --llmic-font-size-xl: 1.375rem; --llmic-font-size-2xl: 1.75rem; --llmic-font-size-3xl: clamp(2rem, 1.55rem + 2.1vw, 3.5rem); --llmic-weight-regular: 400; --llmic-weight-medium: 500; --llmic-weight-semibold: 600; --llmic-weight-bold: 700; --llmic-leading-tight: 1.15; --llmic-leading-snug: 1.35; --llmic-leading-body: 1.7; --llmic-tracking-tight: -0.02em; --llmic-tracking-wide: 0.04em; /* App Grid values: 4, 8, 12, 16, 20, 24, 32, 40 and 60. */ --llmic-space-1: 0.25rem; --llmic-space-2: 0.5rem; --llmic-space-3: 0.75rem; --llmic-space-4: 1rem; --llmic-space-5: 1.25rem; --llmic-space-6: 1.5rem; --llmic-space-8: 2rem; --llmic-space-10: 2.5rem; --llmic-space-15: 3.75rem; /* App Radii values: card 12, chip 8, pill/capsule. */ --llmic-radius-chip: 8px; --llmic-radius-card: 12px; --llmic-radius-pill: 999px; /* App card and glass-card depth. */ --llmic-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.04); --llmic-shadow-glass: 0 6px 28px rgba(0, 0, 0, 0.10); /* App Motion.duration is 0.2 seconds. */ --llmic-duration: 200ms; --llmic-ease: ease-in-out; /* Editorial adaptations: wider shell, readable article measure. */ --llmic-container: 1200px; --llmic-measure: 68ch; --llmic-z-header: 100; --llmic-z-progress: 200; --llmic-z-floating: 300; --llmic-z-overlay: 1000; /* Compatibility aliases used by the component styles. */ --brand-500: var(--llmic-color-accent); --brand-600: var(--llmic-color-accent-hover); --brand-400: #0a84ff; --brand-050: var(--llmic-color-accent-soft); --font-sans: var(--llmic-font-sans); --font-display: var(--llmic-font-display); --font-mono: var(--llmic-font-mono); --step--1: var(--llmic-font-size-sm); --step-0: clamp(1rem, 0.96rem + 0.20vw, 1.125rem); --step-1: clamp(1.125rem, 1.07rem + 0.28vw, 1.25rem); --step-2: clamp(1.375rem, 1.25rem + 0.62vw, 1.75rem); --step-3: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem); --step-4: clamp(2rem, 1.6rem + 2vw, 3.25rem); --step-5: clamp(2.25rem, 1.7rem + 2.75vw, 4rem); --leading-tight: var(--llmic-leading-tight); --leading-snug: var(--llmic-leading-snug); --leading-body: var(--llmic-leading-body); --tracking-tight: var(--llmic-tracking-tight); --tracking-flat: 0; --tracking-wide: var(--llmic-tracking-wide); --measure: var(--llmic-measure); --space-3xs: var(--llmic-space-1); --space-2xs: var(--llmic-space-2); --space-xs: var(--llmic-space-3); --space-s: var(--llmic-space-4); --space-m: var(--llmic-space-6); --space-l: var(--llmic-space-10); --space-xl: var(--llmic-space-15); --space-2xl: 5rem; --space-3xl: 7.5rem; --radius-s: var(--llmic-radius-chip); --radius-m: var(--llmic-radius-chip); --radius-l: var(--llmic-radius-card); --radius-xl: var(--llmic-radius-card); --radius-pill: var(--llmic-radius-pill); --ease-out: var(--llmic-ease); --ease-inout: var(--llmic-ease); --ease-spring: var(--llmic-ease); --dur-fast: var(--llmic-duration); --dur-base: var(--llmic-duration); --dur-slow: var(--llmic-duration); --content-max: var(--llmic-container); --chrome-blur: 16px; } :root, [data-theme="light"] { color-scheme: light; --bg: #f5f5f7; --surface-1: #ffffff; --surface-2: #f2f2f7; --surface-glass: rgba(245, 245, 247, 0.82); --ink: #1d1d1f; --ink-2: #48484a; --ink-3: #6e6e73; --line: rgba(60, 60, 67, 0.18); --line-strong: rgba(60, 60, 67, 0.29); --accent: var(--llmic-color-accent); --accent-strong: #0057b8; --accent-hover: var(--llmic-color-accent-hover); --accent-ink: #ffffff; --accent-wash: var(--llmic-color-accent-soft); --success: var(--llmic-color-success); --warning: var(--llmic-color-warning); --danger: var(--llmic-color-danger); --shadow-1: var(--llmic-shadow-card); --shadow-2: var(--llmic-shadow-glass); --code-bg: #eef0f4; --code-ink: #1d1d1f; --selection: rgba(0, 122, 255, 0.20); } [data-theme="dark"] { color-scheme: dark; --llmic-color-brand: #ffffff; --llmic-color-accent: #0a84ff; --llmic-color-accent-hover: #409cff; --llmic-color-accent-soft: rgba(10, 132, 255, 0.16); --llmic-color-success: #30d158; --llmic-color-warning: #ff9f0a; --llmic-color-danger: #ff453a; --bg: #1c1c1e; --surface-1: #2c2c2e; --surface-2: #3a3a3c; --surface-glass: rgba(28, 28, 30, 0.82); --ink: #f5f5f7; --ink-2: #d1d1d6; --ink-3: #98989d; --line: rgba(255, 255, 255, 0.12); --line-strong: rgba(255, 255, 255, 0.24); --accent: var(--llmic-color-accent); --accent-strong: #64a8ff; --accent-hover: var(--llmic-color-accent-hover); --accent-ink: #001b38; --accent-wash: var(--llmic-color-accent-soft); --success: var(--llmic-color-success); --warning: var(--llmic-color-warning); --danger: var(--llmic-color-danger); --shadow-1: 0 4px 20px rgba(0, 0, 0, 0.28); --shadow-2: 0 6px 28px rgba(0, 0, 0, 0.42); --code-bg: #242428; --code-ink: #f5f5f7; --selection: rgba(10, 132, 255, 0.30); } @media (prefers-reduced-motion: reduce) { :root { --llmic-duration: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }