/* VetConnect — Premium Token Layer (v2) Loaded AFTER tokens.css. Refines the system to Apple / Linear / Stripe level without breaking the existing component contracts. Design principles: - Calm, trustworthy, medical - Warm-cool neutral pairing (warm off-white surfaces, cool charcoal text) - Shadows have a faint cool tint (never pure black) - Motion uses purposeful springs, never bouncy - Sunlight-friendly contrast (>= 7:1 for body text) - Touch targets ≥ 48px (≥ 56px in field-mode) */ :root { /* =========================================================== COLOR — Refined medical palette =========================================================== */ /* Surfaces: warm off-white on the outside, paper-white inside cards */ --color-background: #F8F7F4; /* warm off-white (sunlit-paper feel) */ --color-surface: #FFFFFF; --color-surface-raised: #FFFFFF; --color-surface-sunken: #F2F1ED; /* slightly recessed wells */ --color-surface-tint: rgba(255, 255, 255, 0.72); /* glass overlays */ --color-overlay-scrim: rgba(15, 23, 33, 0.42); /* modal scrim, cool tint */ /* Text — cool charcoal on warm surface = subtle vibrancy */ --color-text-strong: #0A1018; /* near-black, slight blue */ --color-text-primary: #1B2330; --color-text-secondary: #525A66; --color-text-tertiary: #8A93A0; --color-text-disabled: #B8BDC4; --color-text-inverse: #FFFFFF; /* Borders: very faint, cool-leaning */ --color-border-subtle: #ECEAE3; /* hairline on surface */ --color-border-default: #DEDCD4; --color-border-strong: #C8C6BE; --color-border-focus: #1B7A4A; /* Neutrals (override the older blueish set with warm-neutral) */ --color-neutral-50: #FAFAF7; --color-neutral-100: #F4F3EE; --color-neutral-200: #ECEAE3; --color-neutral-300: #DEDCD4; --color-neutral-400: #B8B5AB; --color-neutral-500: #8A877C; --color-neutral-600: #5B594F; --color-neutral-700: #3D3C35; --color-neutral-800: #25241F; --color-neutral-900: #0F0E0B; /* Primary: refined deep medical green — the tone Hugo prefers ("Lancer une consultation") */ --color-primary: #1B7A4A; /* signature deep green, balanced */ --color-primary-hover: #166440; /* hover slightly darker */ --color-primary-active: #11532F; /* press deeper */ --color-primary-dark: #0B3D26; --color-primary-light: #52A579; /* lighter top-of-gradient */ --color-primary-50: #EEF7F1; --color-primary-100: #D9EEE0; --color-primary-200: #B3D8C2; --color-primary-300: #84BFA0; --color-primary-contrast: #FFFFFF; --color-primary-glow: rgba(27, 122, 74, 0.20); /* Secondary: deep marine blue (medical / clinical) */ --color-secondary: #1E5FA8; --color-secondary-light: #4A8AD0; --color-secondary-50: #EEF4FB; --color-secondary-100: #D8E6F5; /* Accent: warm amber (used sparingly for moments of warmth) */ --color-accent: #C97A0F; --color-accent-light: #F2C879; --color-accent-50: #FBF3E4; /* Status — refined for trust */ --color-success: #16834E; --color-success-light: #DAEFE3; --color-success-bg: #EDF7F1; --color-warning: #B86A0A; --color-warning-light: #FBEACE; --color-warning-bg: #FCF5E6; --color-error: #C4322B; --color-error-light: #F8DAD7; --color-error-bg: #FCEEEC; --color-info: #1E5FA8; --color-info-light: #D8E6F5; --color-info-bg: #EEF4FB; /* Severity — medical triage (calm reds, not screaming) */ --severity-green: #16834E; --severity-green-bg: #EDF7F1; --severity-orange: #B86A0A; --severity-orange-bg: #FCF5E6; --severity-red: #C4322B; --severity-red-bg: #FCEEEC; /* =========================================================== TYPOGRAPHY — Apple / Linear-grade =========================================================== */ --font-primary: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif; --font-display: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', ui-monospace, monospace; /* Type scale — tightened, more Apple-like (1.2 ratio, larger body) */ --text-2xs: 0.6875rem; /* 11px — uppercase labels */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px — secondary */ --text-base: 1rem; /* 16px — body */ --text-md: 1.125rem; /* 18px — card title */ --text-lg: 1.375rem; /* 22px — section header */ --text-xl: 1.75rem; /* 28px — page title */ --text-2xl: 2.25rem; /* 36px — kpi */ --text-3xl: 3rem; /* 48px — hero */ --text-4xl: 3.75rem; /* 60px — landing hero */ /* Letter spacing — tighter for display, neutral for body */ --tracking-tighter: -0.04em; /* 36px+ */ --tracking-tight: -0.022em; /* 22-32px headings */ --tracking-normal: -0.011em; /* body — Apple's secret */ --tracking-wide: 0.02em; --tracking-widest: 0.08em; /* uppercase eyebrows */ /* Line heights — controlled for medical legibility */ --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* =========================================================== SPACING — 4px base, generous breathing =========================================================== */ --space-px: 1px; --space-0: 0; --space-0_5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4 */ --space-1_5: 0.375rem; /* 6 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-7: 1.75rem; /* 28 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-14: 3.5rem; /* 56 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ /* =========================================================== RADIUS — modern, generous, tactile =========================================================== */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-2xl: 24px; --radius-3xl: 32px; --radius-pill: 9999px; --radius-circle: 50%; --radius-full: 9999px; /* =========================================================== SHADOWS — Layered, cool-tinted, never harsh Premium look uses two layers: ambient + key directional =========================================================== */ --shadow-xs: 0 1px 1px rgba(15, 23, 33, 0.04), 0 1px 2px rgba(15, 23, 33, 0.04); --shadow-sm: 0 1px 2px rgba(15, 23, 33, 0.04), 0 2px 4px rgba(15, 23, 33, 0.04); --shadow-md: 0 1px 2px rgba(15, 23, 33, 0.04), 0 4px 8px rgba(15, 23, 33, 0.06), 0 12px 24px -8px rgba(15, 23, 33, 0.06); --shadow-lg: 0 1px 2px rgba(15, 23, 33, 0.04), 0 8px 16px rgba(15, 23, 33, 0.06), 0 24px 48px -12px rgba(15, 23, 33, 0.10); --shadow-xl: 0 2px 4px rgba(15, 23, 33, 0.05), 0 16px 32px rgba(15, 23, 33, 0.08), 0 40px 80px -20px rgba(15, 23, 33, 0.14); --shadow-2xl: 0 4px 8px rgba(15, 23, 33, 0.06), 0 28px 56px rgba(15, 23, 33, 0.10), 0 72px 144px -36px rgba(15, 23, 33, 0.18); /* Hover lift — adds a subtle tinted glow */ --shadow-card-hover: 0 1px 2px rgba(15, 23, 33, 0.04), 0 12px 28px -6px rgba(15, 23, 33, 0.10), 0 0 0 1px rgba(23, 106, 68, 0.06); /* Focus ring — accessible, tinted to brand */ --shadow-focus: 0 0 0 3px rgba(23, 106, 68, 0.18), 0 0 0 4px rgba(23, 106, 68, 0.04); --shadow-focus-error: 0 0 0 3px rgba(196, 50, 43, 0.18), 0 0 0 4px rgba(196, 50, 43, 0.04); /* Glow — for selected hotspots in the 3D viewer */ --glow-primary: 0 0 0 4px rgba(23, 106, 68, 0.22), 0 0 24px rgba(23, 106, 68, 0.35); --glow-error: 0 0 0 4px rgba(196, 50, 43, 0.22), 0 0 24px rgba(196, 50, 43, 0.35); /* Inset highlight — gives buttons & cards a subtle "glass" top edge */ --inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6); --inset-highlight-strong: inset 0 1px 0 rgba(255, 255, 255, 0.85); /* =========================================================== MOTION — Spring + signature curves =========================================================== */ --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* Linear.app default */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Apple-like */ --ease-spring: cubic-bezier(0.34, 1.45, 0.5, 1); /* soft spring */ --ease-spring-firm: cubic-bezier(0.5, 1.2, 0.6, 1); /* faster spring */ --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1); /* page transitions */ --duration-instant: 80ms; --duration-fast: 150ms; --duration-base: 240ms; --duration-slow: 380ms; --duration-slower: 560ms; --duration-slowest: 800ms; --transition-fast: var(--duration-fast) var(--ease-out-quart); --transition-base: var(--duration-base) var(--ease-out-expo); --transition-slow: var(--duration-slow) var(--ease-out-expo); --transition-spring: var(--duration-base) var(--ease-spring); /* =========================================================== TOUCH TARGETS — Farm-friendly =========================================================== */ --touch-min: 48px; /* mobile minimum */ --touch-comfort: 56px; /* primary actions */ --touch-field: 64px; /* field-mode (gloves) */ --touch-hero: 72px; /* hero CTAs */ /* =========================================================== LAYOUT =========================================================== */ --sidebar-width: 272px; --navbar-height: 64px; --bottom-nav-height: 72px; --content-max: 1200px; --content-narrow: 720px; --content-reading: 640px; /* =========================================================== BACKGROUNDS — subtle, premium =========================================================== */ --bg-grid: radial-gradient(circle at 20% 0%, rgba(23, 106, 68, 0.04), transparent 50%), radial-gradient(circle at 100% 100%, rgba(30, 95, 168, 0.03), transparent 50%); --bg-mesh: radial-gradient(at 20% 30%, rgba(23, 106, 68, 0.06) 0px, transparent 50%), radial-gradient(at 80% 70%, rgba(30, 95, 168, 0.05) 0px, transparent 50%), radial-gradient(at 50% 100%, rgba(201, 122, 15, 0.03) 0px, transparent 50%); /* Backdrop blur intensities */ --blur-sm: blur(8px) saturate(140%); --blur-md: blur(16px) saturate(160%); --blur-lg: blur(28px) saturate(180%); } /* =========================================================== FIELD MODE — Outdoor, sunlit, gloved-hand operation Calm-but-bold: never shouty, always trustworthy =========================================================== */ [data-field-mode="true"] { --color-background: #FFFFFF; --color-surface: #FFFFFF; --color-text-primary: #050810; --color-text-secondary: #2A3340; --color-border-default: #6B6E72; --color-primary: #0F5A38; --color-error: #9B1F1A; --color-info: #143E78; --touch-min: 56px; --touch-comfort: 64px; --touch-field: 72px; --text-base: 1.125rem; --font-regular: 500; --shadow-sm: 0 0 0 1px rgba(0, 0, 0, 0.18); --shadow-md: 0 0 0 1px rgba(0, 0, 0, 0.22); } /* =========================================================== DARK MODE — Deep, calm, premium night theme =========================================================== */ [data-theme="dark"] { --color-background: #0B0E13; --color-surface: #141921; --color-surface-raised: #1A2029; --color-surface-sunken: #0B0E13; --color-surface-tint: rgba(20, 25, 33, 0.72); --color-overlay-scrim: rgba(0, 0, 0, 0.6); --color-text-strong: #F2F4F8; --color-text-primary: #E4E8EE; --color-text-secondary: #98A0AC; --color-text-tertiary: #5F6773; --color-text-inverse: #0A1018; --color-border-subtle: #1F2630; --color-border-default: #2A323D; --color-border-strong: #404956; --color-neutral-50: #141921; --color-neutral-100: #1A2029; --color-neutral-200: #232B36; --color-neutral-300: #2A323D; --color-neutral-400: #404956; --color-neutral-500: #6B7280; --color-neutral-600: #98A0AC; --color-neutral-700: #C8CFD8; --color-neutral-800: #E4E8EE; --color-neutral-900: #F2F4F8; --color-primary: #3EBA82; --color-primary-hover: #4FC993; --color-primary-light: #6BD9A4; --color-primary-50: rgba(62, 186, 130, 0.10); --color-primary-100: rgba(62, 186, 130, 0.18); /* Dark-mode shadows lean cool, slightly heavier */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.03); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05); --shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06); --inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06); --bg-mesh: radial-gradient(at 20% 30%, rgba(62, 186, 130, 0.06) 0px, transparent 50%), radial-gradient(at 80% 70%, rgba(74, 138, 208, 0.05) 0px, transparent 50%); } /* =========================================================== GLOBAL BASE — Premium feel applied to body & headings =========================================================== */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: var(--font-primary); font-feature-settings: 'cv11', 'ss01', 'ss03', 'cv02'; /* Inter alternates: nicer 1, g, l */ letter-spacing: var(--tracking-normal); color: var(--color-text-primary); background: var(--color-background); line-height: var(--leading-normal); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--color-text-strong); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); font-weight: var(--font-semibold); } h1 { font-size: var(--text-3xl); letter-spacing: var(--tracking-tighter); font-weight: var(--font-bold); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); } h4 { font-size: var(--text-lg); } /* Tabular numerals for KPIs / data */ .tnum, .kpi-number, .number, .text-mono { font-variant-numeric: tabular-nums; } /* Reduced motion preference */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } }