@charset "UTF-8"; /* ============================================================ Riestro · Design tokens ------------------------------------------------------------ Theme switching via [data-theme="light|dark"] on . Bridges to Bootstrap variables so existing components inherit the new palette without recompiling Sass. ============================================================ */ :root { /* ---------- Brand (orange) ---------- */ --brand-50: #fff5ed; --brand-100: #ffe4cf; --brand-200: #ffc69e; --brand-300: #ffa56e; --brand-400: #ff8847; --brand-500: #fe6b2a; /* primary */ --brand-600: #ed4f0d; --brand-700: #c43d0a; --brand-800: #9c310a; --brand-900: #7c280b; /* ---------- Neutral ---------- */ --neutral-0: #ffffff; --neutral-50: #f9f7f4; --neutral-100: #f1ede7; --neutral-200: #e3ddd3; --neutral-300: #cdc6ba; --neutral-400: #aaa194; --neutral-500: #847b6f; --neutral-600: #5d564e; --neutral-700: #3d3934; --neutral-800: #25221f; --neutral-900: #14120f; /* ---------- Semantic — light theme defaults ---------- */ --color-bg-canvas: var(--neutral-50); --color-bg-surface: #ffffff; --color-bg-elevated: #ffffff; --color-bg-subtle: var(--neutral-100); --color-bg-hover: rgba(254, 107, 42, 0.08); --color-bg-pressed: rgba(254, 107, 42, 0.16); --color-bg-overlay: rgba(20, 18, 15, 0.5); --color-bg-gray-100: #f8f9fa; --color-bg-gray-200: #e9ecef; --color-bg-gray-300: #dee2e6; --color-bg-gray-400: #ced4da; --color-bg-gray-500: #adb5bd; --color-text-primary: var(--neutral-900); --color-text-secondary: var(--neutral-600); --color-text-tertiary: var(--neutral-500); --color-text-on-brand: #ffffff; --color-text-link: var(--brand-700); --color-border-subtle: var(--neutral-200); --color-border-default: var(--neutral-300); --color-border-strong: var(--neutral-500); --color-accent: var(--brand-500); --color-accent-hover: var(--brand-600); --color-accent-pressed: var(--brand-700); --color-accent-soft: var(--brand-50); --color-accent-soft-hover: var(--brand-100); --color-success: #15a36a; --color-info: #2c6ad5; --color-warning: #c98402; --color-danger: #d63a3a; --color-success-soft: #e6f5ee; --color-danger-soft: #fbeaea; /* ---------- Radii ---------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 9999px; --radius-circle: 50%; /* ---------- Shadows (light) ---------- */ --shadow-xs: 0 1px 2px rgba(20, 18, 15, 0.04); --shadow-sm: 0 2px 4px rgba(20, 18, 15, 0.06), 0 1px 2px rgba(20, 18, 15, 0.04); --shadow-md: 0 6px 16px -4px rgba(20, 18, 15, 0.10), 0 2px 6px -2px rgba(20, 18, 15, 0.06); --shadow-lg: 0 18px 48px -12px rgba(20, 18, 15, 0.18), 0 4px 12px -2px rgba(20, 18, 15, 0.08); --shadow-xl: 0 28px 64px -20px rgba(20, 18, 15, 0.28); /* ---------- Focus ring ---------- */ --focus-ring-color: rgba(254, 107, 42, 0.45); --focus-ring: 0 0 0 3px var(--focus-ring-color); /* ---------- Type scale ---------- */ --font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-md: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.375rem; --font-size-2xl: 1.75rem; --font-size-3xl: 2.25rem; --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-relaxed: 1.7; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ---------- Spacing ---------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; /* ---------- Layout ---------- */ --nav-rail-width: 248px; --nav-mobile-height: 64px; /* ---------- Bridge to Bootstrap variables ---------- */ --bs-primary: var(--color-accent); --bs-primary-rgb: 254, 107, 42; --bs-body-bg: var(--color-bg-canvas); --bs-body-bg-rgb: 249, 247, 244; --bs-body-color: var(--color-text-primary); --bs-body-color-rgb: 20, 18, 15; --bs-border-color: var(--color-border-default); --bs-secondary-color: var(--color-text-secondary); --bs-success: var(--color-success); --bs-info: var(--color-info); --bs-warning: var(--color-warning); --bs-danger: var(--color-danger); --bs-link-color: var(--color-text-link); --bs-link-hover-color: var(--color-accent-hover); } /* ---------- Dark theme ---------- */ [data-theme=dark] { --color-bg-canvas: #0c0c0e; --color-bg-surface: #16171a; --color-bg-elevated: #1d1f23; --color-bg-subtle: #1a1b1e; --color-bg-hover: rgba(254, 107, 42, 0.14); --color-bg-pressed: rgba(254, 107, 42, 0.22); --color-bg-overlay: rgba(0, 0, 0, 0.65); --color-bg-gray-100: #212529; --color-bg-gray-200: #343a40; --color-bg-gray-300: #495057; --color-bg-gray-400: #6c757d; --color-bg-gray-500: #adb5bd; --color-text-primary: #f5f3ef; --color-text-secondary: #b8b4ac; --color-text-tertiary: #8a857c; --color-text-on-brand: #ffffff; --color-text-link: var(--brand-300); --color-border-subtle: rgba(255, 255, 255, 0.06); --color-border-default: rgba(255, 255, 255, 0.12); --color-border-strong: rgba(255, 255, 255, 0.22); --color-accent: var(--brand-500); --color-accent-hover: var(--brand-400); --color-accent-pressed: var(--brand-300); --color-accent-soft: rgba(254, 107, 42, 0.12); --color-accent-soft-hover: rgba(254, 107, 42, 0.20); --color-success-soft: rgba(21, 163, 106, 0.16); --color-danger-soft: rgba(214, 58, 58, 0.18); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 8px 22px -6px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35); --shadow-lg: 0 22px 60px -16px rgba(0, 0, 0, 0.7); --shadow-xl: 0 36px 80px -24px rgba(0, 0, 0, 0.85); --focus-ring-color: rgba(254, 107, 42, 0.55); --bs-body-bg-rgb: 12, 12, 14; --bs-body-color-rgb: 245, 243, 239; } /* Map color-scheme so native form controls / scrollbars adapt */ :root { color-scheme: light; } [data-theme=dark] { color-scheme: dark; } /* Respect reduced-motion preference */ @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }