/* Scan this package so consumers only need to @import this file (no extra @source) */ @source './components/**/*.{svelte,js}'; @source './utils/**/*.{svelte,js}'; /* Match theme tokens (:root.dark) — not prefers-color-scheme alone */ @custom-variant dark (&:where(.dark, .dark *)); /* ───────────────────────────────────────────────────────────────────────────── R2DigiSolutions Design System — Tailwind 4 @theme ─────────────────────────────────────────────────────────────────────────── */ @theme { /* Brand colors */ --color-brand-50: oklch(97% 0.02 265); --color-brand-100: oklch(93% 0.05 265); --color-brand-200: oklch(86% 0.1 265); --color-brand-300: oklch(76% 0.15 265); --color-brand-400: oklch(65% 0.2 265); --color-brand-500: oklch(55% 0.25 265); --color-brand-600: oklch(47% 0.26 265); --color-brand-700: oklch(39% 0.24 265); --color-brand-800: oklch(31% 0.2 265); --color-brand-900: oklch(22% 0.14 265); --color-brand-950: oklch(15% 0.08 265); /* Semantic surface tokens */ --color-surface: var(--surface); --color-surface-elevated: var(--surface-elevated); --color-surface-overlay: var(--surface-overlay); --color-border: var(--border); --color-border-strong: var(--border-strong); --color-text-primary: var(--text-primary); --color-text-secondary: var(--text-secondary); --color-text-muted: var(--text-muted); --color-text-inverse: var(--text-inverse); /* Typography */ --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Radii */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 3px 0 oklch(0% 0 0 / 0.08), 0 1px 2px -1px oklch(0% 0 0 / 0.06); --shadow-md: 0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -2px oklch(0% 0 0 / 0.08); --shadow-lg: 0 10px 15px -3px oklch(0% 0 0 / 0.12), 0 4px 6px -4px oklch(0% 0 0 / 0.08); --shadow-xl: 0 20px 25px -5px oklch(0% 0 0 / 0.14), 0 8px 10px -6px oklch(0% 0 0 / 0.08); /* Transitions */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); } /* ───────────────────────────────────────────────────────────────────────────── Gray palette — slate (default): cool indigo cast (hue 265) neutral: chroma 0, same family as Tailwind `neutral` ─────────────────────────────────────────────────────────────────────────── */ :root { --r2-gray-h: 265; --r2-gray-c: 0.02; } :root[data-theme='slate'] { --r2-gray-h: 265; --r2-gray-c: 0.02; } :root[data-theme='neutral'] { --r2-gray-h: 0; --r2-gray-c: 0; } /* ───────────────────────────────────────────────────────────────────────────── Light mode (default) ─────────────────────────────────────────────────────────────────────────── */ :root { color-scheme: light; --surface: oklch(99% calc(var(--r2-gray-c) * 0.25) var(--r2-gray-h)); --surface-elevated: oklch(100% 0 0); --surface-overlay: oklch(97% calc(var(--r2-gray-c) * 0.5) var(--r2-gray-h)); --border: oklch(88% var(--r2-gray-c) var(--r2-gray-h)); --border-strong: oklch(75% calc(var(--r2-gray-c) * 2) var(--r2-gray-h)); --text-primary: oklch(15% var(--r2-gray-c) var(--r2-gray-h)); --text-secondary: oklch(35% calc(var(--r2-gray-c) * 1.5) var(--r2-gray-h)); --text-muted: oklch(45% var(--r2-gray-c) var(--r2-gray-h)); --text-inverse: oklch(99% 0 0); /* Alert tones */ --alert-info-bg: oklch(96% 0.03 240); --alert-info-border: oklch(82% 0.06 240); --alert-info-fg: oklch(28% 0.08 240); --alert-info-muted: oklch(40% 0.06 240); --alert-info-icon: oklch(52% 0.14 240); --alert-info-accent: oklch(55% 0.16 240); --alert-success-bg: oklch(96% 0.04 150); --alert-success-border: oklch(82% 0.07 150); --alert-success-fg: oklch(28% 0.08 150); --alert-success-muted: oklch(38% 0.06 150); --alert-success-icon: oklch(50% 0.14 150); --alert-success-accent: oklch(55% 0.16 150); --alert-warning-bg: oklch(96% 0.05 85); --alert-warning-border: oklch(84% 0.1 85); --alert-warning-fg: oklch(30% 0.08 75); --alert-warning-muted: oklch(42% 0.07 75); --alert-warning-icon: oklch(58% 0.15 75); --alert-warning-accent: oklch(68% 0.16 75); --alert-error-bg: oklch(96% 0.03 25); --alert-error-border: oklch(84% 0.08 25); --alert-error-fg: oklch(30% 0.1 25); --alert-error-muted: oklch(42% 0.08 25); --alert-error-icon: oklch(55% 0.18 25); --alert-error-accent: oklch(58% 0.2 25); } /* ───────────────────────────────────────────────────────────────────────────── Dark mode ─────────────────────────────────────────────────────────────────────────── */ :root.dark { color-scheme: dark; --surface: oklch(14% var(--r2-gray-c) var(--r2-gray-h)); --surface-elevated: oklch(18% calc(var(--r2-gray-c) * 1.25) var(--r2-gray-h)); --surface-overlay: oklch(20% calc(var(--r2-gray-c) * 1.5) var(--r2-gray-h)); --border: oklch(28% calc(var(--r2-gray-c) * 1.5) var(--r2-gray-h)); --border-strong: oklch(40% calc(var(--r2-gray-c) * 2) var(--r2-gray-h)); --text-primary: oklch(96% calc(var(--r2-gray-c) * 0.5) var(--r2-gray-h)); --text-secondary: oklch(75% calc(var(--r2-gray-c) * 1.5) var(--r2-gray-h)); --text-muted: oklch(55% calc(var(--r2-gray-c) * 1.5) var(--r2-gray-h)); --text-inverse: oklch(15% var(--r2-gray-c) var(--r2-gray-h)); /* Alert tones */ --alert-info-bg: oklch(24% 0.04 240); --alert-info-border: oklch(38% 0.06 240); --alert-info-fg: oklch(92% 0.03 240); --alert-info-muted: oklch(78% 0.04 240); --alert-info-icon: oklch(72% 0.12 240); --alert-info-accent: oklch(65% 0.14 240); --alert-success-bg: oklch(24% 0.04 150); --alert-success-border: oklch(38% 0.06 150); --alert-success-fg: oklch(92% 0.03 150); --alert-success-muted: oklch(78% 0.04 150); --alert-success-icon: oklch(72% 0.12 150); --alert-success-accent: oklch(65% 0.14 150); --alert-warning-bg: oklch(25% 0.04 85); --alert-warning-border: oklch(40% 0.07 85); --alert-warning-fg: oklch(93% 0.03 85); --alert-warning-muted: oklch(80% 0.04 85); --alert-warning-icon: oklch(78% 0.12 85); --alert-warning-accent: oklch(72% 0.14 85); --alert-error-bg: oklch(24% 0.05 25); --alert-error-border: oklch(40% 0.08 25); --alert-error-fg: oklch(93% 0.03 25); --alert-error-muted: oklch(80% 0.04 25); --alert-error-icon: oklch(72% 0.14 25); --alert-error-accent: oklch(65% 0.18 25); } /* ───────────────────────────────────────────────────────────────────────────── Base styles ─────────────────────────────────────────────────────────────────────────── */ @layer base { *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } body { margin: 0; background-color: var(--surface); color: var(--text-primary); font-family: var(--font-sans); line-height: 1.6; transition: background-color 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth); } /* Focus visible styles */ :focus-visible { outline: 2px solid oklch(55% 0.25 265); outline-offset: 2px; border-radius: var(--radius-sm); } /* Selection */ ::selection { background-color: oklch(55% 0.25 265 / 0.25); } } /* ───────────────────────────────────────────────────────────────────────────── Utility layer ─────────────────────────────────────────────────────────────────────────── */ @layer utilities { /* Touch-friendly minimum tap target */ .touch-target { min-height: 44px; min-width: 44px; } /* Smooth transitions */ .transition-smooth { transition: all 0.2s var(--ease-smooth); } .transition-spring { transition: all 0.3s var(--ease-spring); } /* Glass morphism */ .glass { backdrop-filter: blur(12px) saturate(180%); background-color: oklch(100% 0 0 / 0.08); border: 1px solid oklch(100% 0 0 / 0.12); } .dark .glass { background-color: oklch(0% 0 0 / 0.2); border-color: oklch(100% 0 0 / 0.08); } /* Surface utilities */ .bg-surface { background-color: var(--surface); } .bg-surface-elevated { background-color: var(--surface-elevated); } .bg-surface-overlay { background-color: var(--surface-overlay); } .border-border { border-color: var(--border); } .border-border-strong { border-color: var(--border-strong); } .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-muted { color: var(--text-muted); } /* SVG chart labels — Tailwind fill-* needs these (text-* alone does not paint ) */ .fill-primary { fill: var(--text-primary); } .fill-secondary { fill: var(--text-secondary); } .fill-muted { fill: var(--text-muted); } .stroke-border { stroke: var(--border); } }