/* ============================================================================ TheReceiptHound — Premium Design System Tokens "Modern trail-tracker fintech" — the Hound brand (Hayden-Fisher Technologies) Brand palette is built on two raw ramps: • Hound Green — earthy green, the primary brand colour (trust, growth, money) • Trail Navy — deep navy accent (ink, contrast, Hound moments) AA notes (see epic 04 technical_notes.color_aa): • --hound-600 (#5a7a3a) is AA-safe for buttons/text on white (4.91:1). • --hound-500 (#6c8b41) is NOT AA for body text (~3.9:1) — use it only for large fills / icons. Use --navy-700 (#273a59) for navy TEXT accents. Never convey status/confidence/money by colour alone (icon + label + sign). ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); :root { /* ── Raw brand ramps ─────────────────────────────────────────────────── */ /* Hound Green (earthy green) */ --hound-50: #f2f6ec; --hound-100: #dfe9cd; --hound-200: #c2d5a2; --hound-300: #a3be76; --hound-400: #82a24f; --hound-500: #6c8b41; /* large fills / icons only — NOT AA text */ --hound-600: #5a7a3a; /* AA on white — buttons + text */ --hound-700: #48622e; --hound-800: #364a23; --hound-900: #223016; /* Trail Navy (deep ink) */ --navy-50: #eef1f6; --navy-100: #d8dee9; --navy-200: #b3bfd3; --navy-300: #8b9cb9; --navy-400: #64789e; --navy-500: #475d85; --navy-600: #33486c; --navy-700: #273a59; /* AA navy TEXT on white */ --navy-800: #1b2a41; /* the kit's navy — accent fills */ --navy-900: #111c2d; /* ── Brand colour aliases (theme-overridable by white-label loader) ───── */ /* Hound green with trail-navy accent */ --color-primary: var(--hound-600); --color-primary-hover: var(--hound-700); --color-primary-light: var(--hound-50); --color-primary-dark: var(--hound-800); --color-primary-50: var(--hound-50); --color-primary-100: var(--hound-100); --color-primary-500: var(--hound-500); --color-primary-600: var(--hound-600); --color-primary-700: var(--hound-700); --color-primary-gradient: linear-gradient(135deg, #6c8b41 0%, #5a7a3a 100%); --color-primary-gradient-hover: linear-gradient(135deg, #5a7a3a 0%, #48622e 100%); /* Accent - Trail Navy for ink / highlights */ --color-accent: var(--navy-800); --color-accent-light: var(--navy-100); --color-accent-text: var(--navy-700); /* AA navy text */ /* Semantic Colors */ --color-success: #0f9d6e; --color-success-light: #d1fae5; --color-success-dark: #047857; --color-warning: #d97706; /* amber — recoverable / low-confidence */ --color-warning-light: #fef3c7; --color-warning-dark: #b45309; --color-danger: #dc2626; --color-danger-light: #fee2e2; --color-danger-dark: #b91c1c; /* Destructive-action button gradients (raw hexes live here only — tokens-only rule outside variables.css). */ --color-danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); --color-danger-gradient-hover: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); --shadow-danger: 0 4px 14px -2px rgba(239, 68, 68, 0.35); --color-info: #2563eb; --color-info-light: #dbeafe; --color-info-dark: #1d4ed8; /* Neutrals - Slightly warmer than pure gray (bark-tinted slate) */ --color-white: #ffffff; --color-gray-50: #f8faf9; --color-gray-100: #f1f4f2; --color-gray-200: #e3e8e5; --color-gray-300: #cbd3ce; --color-gray-400: #94a09a; --color-gray-500: #647069; --color-gray-600: #475048; --color-gray-700: #333b35; --color-gray-800: #1e251f; --color-gray-900: #0f1410; /* Text */ --text-primary: #14202e; --text-secondary: #475048; --text-muted: #7d8a83; --text-inverse: #ffffff; --text-on-primary: #ffffff; /* Background - warm cream body */ --bg-body: #f6f4ec; --bg-card: #ffffff; --bg-navbar: #ffffff; --bg-elevated: #ffffff; --bg-subtle: var(--hound-50); /* Borders */ --border-color: #e3e8e5; --border-color-light: #f1f4f2; --border-radius: 10px; --border-radius-sm: 6px; --border-radius-lg: 14px; --border-radius-xl: 20px; --border-radius-full: 9999px; /* Shadows - layered, warm-tinted */ --shadow-sm: 0 1px 2px rgba(15, 32, 24, 0.04); --shadow: 0 1px 3px rgba(15, 32, 24, 0.06), 0 1px 2px rgba(15, 32, 24, 0.04); --shadow-md: 0 4px 6px -1px rgba(15, 32, 24, 0.08), 0 2px 4px -2px rgba(15, 32, 24, 0.05); --shadow-lg: 0 10px 15px -3px rgba(15, 32, 24, 0.08), 0 4px 6px -4px rgba(15, 32, 24, 0.04); --shadow-xl: 0 20px 25px -5px rgba(15, 32, 24, 0.1), 0 8px 10px -6px rgba(15, 32, 24, 0.06); --shadow-primary: 0 4px 14px -2px rgba(90, 122, 58, 0.3); --shadow-card: 0 1px 3px rgba(15, 32, 24, 0.04), 0 1px 2px rgba(15, 32, 24, 0.02); --shadow-card-hover: 0 8px 25px -5px rgba(15, 32, 24, 0.1), 0 4px 10px -5px rgba(15, 32, 24, 0.04); /* ── Typography ──────────────────────────────────────────────────────── */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --leading-tight: 1.25; --leading-snug: 1.4; --leading-normal: 1.6; --leading-relaxed: 1.75; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; /* 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; /* Container */ --container-max-width: 1200px; /* Transitions */ --transition-fast: 150ms ease; --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1); --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1); /* Accessibility — WCAG 2.2 AA */ --focus-ring-color: var(--hound-700); --focus-ring-width: 2px; --focus-ring-offset: 2px; /* Soft 3px halo behind focused fields (rgba of --hound-600); repainted per-tenant by theme.js applyRamp. */ --focus-ring-soft: rgba(90, 122, 58, 0.15); --tap-target-min: 44px; /* 2.5.8 — meets the enhanced 44px target */ /* Z-index */ --z-dropdown: 100; --z-navbar: 200; --z-modal: 300; --z-toast: 400; }