/* ============================================================ ORBIO · COLORS Dark-first veterinary UI. Deep navy canvas, teal→cyan accent, translucent white surfaces. Light theme ("svetlo") scoped below. ============================================================ */ :root { /* ---- Brand ramp: teal → cyan (the Orbio gradient) ---- */ --teal-300: #5ce7cf; --teal-400: #2bdcbb; --teal-500: #00d4aa; /* PRIMARY accent — pulse dots, active states, CTAs */ --teal-600: #00b894; --cyan-500: #2cc8df; /* marketing cyan (headings on biz surfaces) */ --cyan-600: #0099cc; /* logo gradient end */ --cyan-700: #0e7490; /* light-theme accent */ --accent-rgb: 0, 212, 170; /* @kind other */ --cyan-rgb: 0, 153, 204; /* @kind other */ /* ---- Blue (info / secondary accent) ---- */ --blue-400: #4aa3ff; --blue-300: #93c5fd; --blue-rgb: 74, 163, 255; /* @kind other */ /* ---- Violet (laboratory domain) ---- */ --violet-400: #b29dff; --violet-300: #be82ff; /* ---- Navy canvas ramp (dark theme) ---- */ --navy-950: #07101f; --navy-900: #0a1628; /* app background / theme_color */ --navy-850: #0a1929; /* alt deep (marketing docs) */ --navy-800: #0f1f3a; /* raised panel base */ --navy-700: #16294a; /* ---- Neutral text ramp (cool blue-white) ---- */ --white: #ffffff; --ink-100: #e8f4f8; /* brightest text */ --ink-200: #e0e8f0; /* body text (solid) */ --slate-400: #8899b3; /* muted blue-grey label */ --slate-700: #475569; --slate-900: #1e293b; /* light-theme ink */ /* ---- Semantic status ---- */ --danger-500: #ef4444; --danger-300: #fca5a5; --warn-500: #ff9f43; --warn-amber: #ffd43b; --warn-300: #fcd34d; --success-500: #34d399; --success-600: #51cf66; --info-500: #4aa3ff; /* ============================================================ SEMANTIC ALIASES — reference these in components, not the ramp ============================================================ */ /* Accent */ --accent: var(--teal-500); --accent-strong: var(--teal-600); --accent-2: var(--blue-400); --accent-soft: rgba(0, 212, 170, 0.08); --accent-line: rgba(0, 212, 170, 0.25); /* Surfaces (translucent — sit over the navy canvas or a glass panel) */ --bg-app: var(--navy-900); --bg-deep: var(--navy-950); --surface-glass: rgba(15, 31, 58, 0.72); /* blurred floating panels */ --surface-1: rgba(255, 255, 255, 0.02); /* faintest raised */ --surface-2: rgba(255, 255, 255, 0.03); /* cards / fields */ --surface-3: rgba(255, 255, 255, 0.045); /* hover */ --surface-panel: var(--navy-800); /* Text */ --text: rgba(224, 232, 240, 0.92); --text-dim: rgba(224, 232, 240, 0.55); --text-muted: rgba(224, 232, 240, 0.40); --text-faint: rgba(200, 215, 235, 0.35); /* placeholders */ --text-on-accent: #001218; /* near-black on teal buttons */ /* Borders */ --border: rgba(255, 255, 255, 0.08); --border-soft: rgba(255, 255, 255, 0.06); --border-accent: rgba(0, 212, 170, 0.40); /* Status (semantic) */ --danger: var(--danger-500); --warn: var(--warn-500); --success: var(--success-500); --info: var(--info-500); --lab: var(--violet-400); } /* ============================================================ LIGHT THEME — "svetlo". Opt in with [data-theme="svetlo"]. Mirrors the codebase's html[data-theme="svetlo"] overrides. ============================================================ */ [data-theme="svetlo"] { --accent: var(--cyan-700); --accent-strong: #0b5e74; --accent-rgb: 14, 116, 144; /* @kind other */ --accent-soft: rgba(14, 116, 144, 0.08); --accent-line: rgba(14, 116, 144, 0.30); --bg-app: #f4f8fb; --bg-deep: #e9f1f6; --surface-glass: rgba(255, 255, 255, 0.92); --surface-1: rgba(0, 40, 80, 0.02); --surface-2: rgba(0, 40, 80, 0.04); --surface-3: rgba(14, 116, 144, 0.06); --surface-panel: #ffffff; --text: #1e293b; --text-dim: #475569; --text-muted: #64748b; --text-faint: #94a3b8; --text-on-accent: #ffffff; --border: rgba(0, 40, 80, 0.10); --border-soft: rgba(0, 40, 80, 0.07); --border-accent: rgba(14, 116, 144, 0.35); } /* ============================================================ ORBIO · TYPOGRAPHY Native system stack — Orbio deliberately uses the OS UI font (SF Pro on Apple, Segoe UI on Windows). No webfont download. Mono reserved for code / cost figures / IDs. ============================================================ */ :root { /* Families — native system UI stack (no webfont download by design) */ --font-sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Type scale (px → rem at 16px root). UI is dense: 11–14px is the working range; headings step up modestly. */ --text-2xs: 0.594rem; /* 9.5px — micro labels, badge captions */ --text-xs: 0.656rem; /* 10.5px — uppercase section eyebrows */ --text-sm: 0.719rem; /* 11.5px — meta, chip text */ --text-base: 0.75rem; /* 12px — default UI body */ --text-md: 0.813rem; /* 13px — comfortable body / chat */ --text-lg: 0.875rem; /* 14px — input text, card titles */ --text-xl: 1.125rem; /* 18px — panel headings */ --text-2xl: 1.25rem; /* 20px — section headings */ --text-3xl: 1.75rem; /* 28px — page / marketing H1 */ --text-4xl: 2.25rem; /* 36px — hero figures (pricing) */ /* Weights — UI lives at 500/600; 700 for emphasis, 800 for hero numerals */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-heavy: 800; /* Line heights */ --leading-tight: 1.2; --leading-snug: 1.4; --leading-normal: 1.5; --leading-relaxed: 1.65; /* long-form marketing copy */ /* Letter-spacing — eyebrows/labels get the wide tracking signature */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.10em; --tracking-widest: 0.12em; /* uppercase section labels */ /* ---- Semantic roles ---- */ --eyebrow-size: var(--text-xs); --eyebrow-weight: var(--weight-semibold); --eyebrow-tracking: var(--tracking-widest); } /* Base element defaults (consumers inherit if they don't reset) */ :where(body) { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* The uppercase eyebrow used everywhere (panel headers, kicker labels) */ .orbio-eyebrow { font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--text-muted); } /* ============================================================ ORBIO · SPACING, RADII, LAYOUT Tight 4px-based rhythm. Generous pill rounding on chips, 10–14px rounding on cards/panels. ============================================================ */ :root { /* Spacing scale — 4px base, dense UI */ --space-0: 0; --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 10px; --space-6: 12px; --space-7: 14px; --space-8: 16px; --space-10: 20px; --space-12: 24px; --space-16: 32px; --space-20: 40px; --space-24: 48px; /* Radii */ --radius-xs: 4px; /* tiny badges, code chips */ --radius-sm: 6px; /* buttons, small controls */ --radius-md: 8px; /* inputs, list items */ --radius-lg: 10px; /* cards, fields */ --radius-xl: 12px; /* dialogs, toasts */ --radius-2xl: 14px; /* hero cards, input bar */ --radius-pill: 999px;/* chips, status dots wrappers, avatars */ /* Borders */ --border-width: 1px; --border-width-thick: 1.5px; /* status dots, emphasised cards */ /* Control sizing — keep tap targets >= 36px in product UI */ --control-h-sm: 28px; --control-h-md: 34px; --control-h-lg: 40px; --send-btn: 40px; /* round send button */ /* Layout */ --col-left: 260px; /* ambulant diagnostic tree */ --col-right: 320px; /* live summary panel */ --header-h: 44px; --app-max: 1240px; /* marketing / doc content width */ } /* ============================================================ ORBIO · EFFECTS — shadows, glows, blur, motion Signature: teal glow on active/focus, soft drop shadows on floating glass, shimmer for loading. Fast 0.15s transitions. ============================================================ */ :root { /* Drop shadows (dark canvas — deep, low-spread) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); /* Teal glow — the brand's light source. Used on active dots, focused inputs, primary buttons, the brand status indicator. */ --glow-dot: 0 0 6px rgba(var(--accent-rgb), 0.5); --glow-soft: 0 0 16px rgba(var(--accent-rgb), 0.2); --glow-strong: 0 0 16px rgba(var(--accent-rgb), 0.4); --glow-focus: 0 0 0 3px rgba(var(--accent-rgb), 0.15); /* Status glows */ --glow-danger: 0 0 0 2px rgba(239, 68, 68, 0.3), 0 0 16px rgba(239, 68, 68, 0.5); --glow-warn: 0 0 0 2px rgba(255, 159, 67, 0.3), 0 0 14px rgba(255, 159, 67, 0.45); /* Glass blur */ --blur-panel: blur(12px); /* @kind other */ --blur-bar: blur(8px); /* @kind other */ /* Motion — quick & functional, ease-out. No bounces. */ --ease: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --ease-out: cubic-bezier(0, 0, 0.2, 1); /* @kind other */ --dur-fast: 0.15s; /* @kind other */ --dur-base: 0.2s; /* @kind other */ --dur-slow: 0.3s; /* @kind other */ --dur-pulse: 1.6s; /* @kind other */ /* Gradients */ --grad-brand: linear-gradient(135deg, #00d4aa 0%, #0099cc 100%); /* @kind other */ --grad-accent-btn: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); /* @kind other */ --grad-input: linear-gradient(135deg, rgba(0,212,170,0.08), rgba(0,153,204,0.06)); /* @kind other */ /* Sticky-header fade (so scrolled content dissolves under a tab bar) */ --grad-header-fade: linear-gradient(180deg, rgba(15,31,58,0.95) 70%, rgba(15,31,58,0)); /* @kind other */ } /* ---- Shared keyframes consumers can use by name ---- */ @keyframes orbio-spin { to { transform: rotate(360deg); } } @keyframes orbio-pulse-high { 0%, 100% { box-shadow: 0 0 0 2px rgba(239,68,68,0.3), 0 0 14px rgba(239,68,68,0.4); } 50% { box-shadow: 0 0 0 4px rgba(239,68,68,0.5), 0 0 22px rgba(239,68,68,0.7); } } @keyframes orbio-shimmer { 0% { background-position: -100% 0; } 100% { background-position: 100% 0; } } @keyframes orbio-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ ORBIO · BRIDGE — §178.22ic (2026-06-10) Premostenie EXISTUJÚCICH premenných appky (--bg, --glass, --text, --accent, --input-bg…) na nový dizajn systém. Tento súbor je linkovaný PO inline