/* ============================================================ FISH TRANSLATOR DESIGN TOKENS v1.0.0 Food Chain Intelligence — Aquatic Design System Single source of truth for all visual primitives. Import this file BEFORE fish-foundation.css. ============================================================ */ /* ------------------------------------------------------------ 1. COLOR PALETTE — Aquatic Depth Layers ------------------------------------------------------------ */ :root { /* Background depth scale (darkest to lightest) */ --fish-bg-deep: #040d14; --fish-bg: #0a1628; --fish-bg-raised: #0d2137; --fish-bg-elevated: #112a45; --fish-bg-surface: #163352; --fish-bg-overlay: rgba(4, 13, 20, 0.85); /* Primary accent — Cyan family */ --fish-accent: #06b6d4; --fish-accent-bright: #22d3ee; --fish-accent-dim: #0891b2; --fish-accent-ultra: #67e8f9; --fish-accent-ghost: rgba(6, 182, 212, 0.12); --fish-accent-glow: rgba(6, 182, 212, 0.35); /* Semantic colors */ --fish-gold: #f59e0b; --fish-gold-bright: #fbbf24; --fish-gold-dim: #d97706; --fish-green: #10b981; --fish-green-bright: #34d399; --fish-green-dim: #059669; --fish-red: #ef4444; --fish-red-bright: #f87171; --fish-red-dim: #dc2626; --fish-orange: #f97316; --fish-purple: #8b5cf6; --fish-blue: #3b82f6; --fish-pink: #ec4899; /* Text hierarchy */ --fish-text: #e0e8f0; --fish-text-muted: #94a3b8; --fish-text-dim: #64748b; --fish-text-disabled: #475569; --fish-text-inverse: #0a1628; --fish-text-link: #22d3ee; --fish-text-link-hover: #67e8f9; /* Card surfaces */ --fish-card: rgba(255, 255, 255, 0.04); --fish-card-border: rgba(255, 255, 255, 0.08); --fish-card-hover: rgba(6, 182, 212, 0.06); --fish-card-border-hover: rgba(6, 182, 212, 0.2); --fish-card-active: rgba(6, 182, 212, 0.10); --fish-card-border-active:rgba(6, 182, 212, 0.35); /* Glass morphism */ --fish-glass: rgba(10, 22, 40, 0.65); --fish-glass-border: rgba(255, 255, 255, 0.06); --fish-glass-blur: 12px; --fish-glass-heavy: rgba(4, 13, 20, 0.80); --fish-glass-heavy-blur: 20px; /* Dividers & outlines */ --fish-divider: rgba(255, 255, 255, 0.06); --fish-outline: rgba(255, 255, 255, 0.10); --fish-outline-focus: rgba(6, 182, 212, 0.50); /* Shadows — layered depth */ --fish-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --fish-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); --fish-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.40); --fish-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.50); --fish-shadow-glow: 0 0 20px rgba(6, 182, 212, 0.15); --fish-shadow-glow-lg:0 0 40px rgba(6, 182, 212, 0.25); --fish-shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.25); /* Scrollbar */ --fish-scrollbar-track: var(--fish-bg); --fish-scrollbar-thumb: var(--fish-bg-elevated); --fish-scrollbar-thumb-hover: var(--fish-accent-dim); /* ------------------------------------------------------------ 2. TYPOGRAPHY ------------------------------------------------------------ */ /* Font stacks */ --fish-font-display: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --fish-font-body: 'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --fish-font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace; /* Font sizes — modular scale (1.25 ratio) */ --fish-text-2xs: 0.625rem; /* 10px */ --fish-text-xs: 0.75rem; /* 12px */ --fish-text-sm: 0.875rem; /* 14px */ --fish-text-base: 1rem; /* 16px */ --fish-text-md: 1.125rem; /* 18px */ --fish-text-lg: 1.25rem; /* 20px */ --fish-text-xl: 1.5rem; /* 24px */ --fish-text-2xl: 1.875rem; /* 30px */ --fish-text-3xl: 2.25rem; /* 36px */ --fish-text-4xl: 3rem; /* 48px */ --fish-text-5xl: 3.75rem; /* 60px */ --fish-text-6xl: 4.5rem; /* 72px */ /* Font weights */ --fish-weight-light: 300; --fish-weight-normal: 400; --fish-weight-medium: 500; --fish-weight-semibold: 600; --fish-weight-bold: 700; --fish-weight-black: 900; /* Line heights */ --fish-leading-none: 1; --fish-leading-tight: 1.15; --fish-leading-snug: 1.3; --fish-leading-normal: 1.5; --fish-leading-relaxed: 1.65; --fish-leading-loose: 2; /* Letter spacing */ --fish-tracking-tighter: -0.04em; --fish-tracking-tight: -0.02em; --fish-tracking-normal: 0; --fish-tracking-wide: 0.025em; --fish-tracking-wider: 0.05em; --fish-tracking-widest: 0.1em; /* ------------------------------------------------------------ 3. SPACING SCALE (4px base unit) ------------------------------------------------------------ */ --fish-space-0: 0; --fish-space-px: 1px; --fish-space-0_5: 0.125rem; /* 2px */ --fish-space-1: 0.25rem; /* 4px */ --fish-space-1_5: 0.375rem; /* 6px */ --fish-space-2: 0.5rem; /* 8px */ --fish-space-2_5: 0.625rem; /* 10px */ --fish-space-3: 0.75rem; /* 12px */ --fish-space-4: 1rem; /* 16px */ --fish-space-5: 1.25rem; /* 20px */ --fish-space-6: 1.5rem; /* 24px */ --fish-space-8: 2rem; /* 32px */ --fish-space-10: 2.5rem; /* 40px */ --fish-space-12: 3rem; /* 48px */ --fish-space-14: 3.5rem; /* 56px */ --fish-space-16: 4rem; /* 64px */ --fish-space-20: 5rem; /* 80px */ --fish-space-24: 6rem; /* 96px */ --fish-space-32: 8rem; /* 128px */ --fish-space-40: 10rem; /* 160px */ --fish-space-48: 12rem; /* 192px */ --fish-space-56: 14rem; /* 224px */ --fish-space-64: 16rem; /* 256px */ /* ------------------------------------------------------------ 4. BORDER RADIUS ------------------------------------------------------------ */ --fish-radius-none: 0; --fish-radius-sm: 0.25rem; /* 4px */ --fish-radius-md: 0.5rem; /* 8px */ --fish-radius-lg: 0.75rem; /* 12px */ --fish-radius-xl: 1rem; /* 16px */ --fish-radius-2xl: 1.5rem; /* 24px */ --fish-radius-3xl: 2rem; /* 32px */ --fish-radius-full: 9999px; --fish-radius-card: var(--fish-radius-lg); --fish-radius-btn: var(--fish-radius-md); --fish-radius-input: var(--fish-radius-md); --fish-radius-badge: var(--fish-radius-full); --fish-radius-modal: var(--fish-radius-xl); /* ------------------------------------------------------------ 5. TRANSITIONS & ANIMATION ------------------------------------------------------------ */ --fish-duration-instant: 75ms; --fish-duration-fast: 150ms; --fish-duration-normal: 250ms; --fish-duration-slow: 400ms; --fish-duration-slower: 600ms; --fish-duration-glacial: 1000ms; --fish-ease-default: cubic-bezier(0.4, 0, 0.2, 1); --fish-ease-in: cubic-bezier(0.4, 0, 1, 1); --fish-ease-out: cubic-bezier(0, 0, 0.2, 1); --fish-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --fish-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --fish-ease-spring: cubic-bezier(0.22, 1.4, 0.36, 1); --fish-ease-water: cubic-bezier(0.25, 0.46, 0.45, 0.94); --fish-transition-color: color var(--fish-duration-normal) var(--fish-ease-default); --fish-transition-bg: background-color var(--fish-duration-normal) var(--fish-ease-default); --fish-transition-border: border-color var(--fish-duration-normal) var(--fish-ease-default); --fish-transition-shadow: box-shadow var(--fish-duration-normal) var(--fish-ease-default); --fish-transition-transform: transform var(--fish-duration-normal) var(--fish-ease-default); --fish-transition-opacity: opacity var(--fish-duration-normal) var(--fish-ease-default); --fish-transition-all: all var(--fish-duration-normal) var(--fish-ease-default); /* ------------------------------------------------------------ 6. Z-INDEX LAYERS ------------------------------------------------------------ */ --fish-z-below: -1; --fish-z-base: 0; --fish-z-raised: 10; --fish-z-dropdown: 100; --fish-z-sticky: 200; --fish-z-sidebar: 300; --fish-z-nav: 400; --fish-z-overlay: 500; --fish-z-modal: 600; --fish-z-popover: 700; --fish-z-toast: 800; --fish-z-tooltip: 900; --fish-z-hud: 950; --fish-z-max: 9999; /* ------------------------------------------------------------ 7. BREAKPOINTS (reference values — use in media queries) ------------------------------------------------------------ */ /* --fish-bp-xs: 320px (small phones) --fish-bp-sm: 480px (phones landscape) --fish-bp-md: 768px (tablets) --fish-bp-lg: 1024px (laptops) --fish-bp-xl: 1280px (desktops) --fish-bp-2xl: 1536px (wide screens) --fish-bp-3xl: 1920px (ultra wide) Note: CSS custom properties cannot be used in media queries. These are documented here for reference; fish-foundation.css uses the raw pixel values in @media rules. */ /* ------------------------------------------------------------ 8. LAYOUT DIMENSIONS ------------------------------------------------------------ */ --fish-container-sm: 640px; --fish-container-md: 768px; --fish-container-lg: 1024px; --fish-container-xl: 1280px; --fish-container-2xl: 1440px; --fish-container-full: 100%; --fish-sidebar-width: 280px; --fish-sidebar-collapsed: 64px; --fish-nav-height: 64px; --fish-nav-height-mobile: 56px; --fish-footer-height: 80px; --fish-modal-sm: 400px; --fish-modal-md: 560px; --fish-modal-lg: 720px; --fish-modal-xl: 960px; /* ------------------------------------------------------------ 9. CONTENT WIDTHS ------------------------------------------------------------ */ --fish-prose-width: 65ch; --fish-label-width: 120px; --fish-input-height: 44px; --fish-btn-height: 44px; --fish-btn-height-sm:36px; --fish-btn-height-lg:52px; --fish-icon-sm: 16px; --fish-icon-md: 20px; --fish-icon-lg: 24px; --fish-icon-xl: 32px; /* ------------------------------------------------------------ 10. AQUATIC EFFECT TOKENS ------------------------------------------------------------ */ --fish-caustics-opacity: 0.04; --fish-bubble-speed: 8s; --fish-wave-amplitude: 4px; --fish-wave-frequency: 3s; --fish-current-speed: 12s; --fish-depth-gradient: linear-gradient(180deg, var(--fish-bg-elevated) 0%, var(--fish-bg) 40%, var(--fish-bg-deep) 100%); --fish-surface-shimmer: linear-gradient(135deg, rgba(6,182,212,0.05) 0%, transparent 50%, rgba(6,182,212,0.03) 100%); } /* ============================================================ 11. SPECIES THEME OVERRIDES Each species gets a unique accent family. Apply via or
. All other tokens remain unchanged — only accents shift. ============================================================ */ /* Bass — Forest Green */ [data-species="bass"] { --fish-accent: #22c55e; --fish-accent-bright: #4ade80; --fish-accent-dim: #16a34a; --fish-accent-ultra: #86efac; --fish-accent-ghost: rgba(34, 197, 94, 0.12); --fish-accent-glow: rgba(34, 197, 94, 0.35); --fish-card-hover: rgba(34, 197, 94, 0.06); --fish-card-border-hover: rgba(34, 197, 94, 0.2); --fish-card-active: rgba(34, 197, 94, 0.10); --fish-card-border-active:rgba(34, 197, 94, 0.35); --fish-outline-focus: rgba(34, 197, 94, 0.50); --fish-shadow-glow: 0 0 20px rgba(34, 197, 94, 0.15); --fish-shadow-glow-lg: 0 0 40px rgba(34, 197, 94, 0.25); --fish-text-link: #4ade80; --fish-text-link-hover: #86efac; --fish-surface-shimmer: linear-gradient(135deg, rgba(34,197,94,0.05) 0%, transparent 50%, rgba(34,197,94,0.03) 100%); } /* Trout — Rose / Coral Pink */ [data-species="trout"] { --fish-accent: #f43f5e; --fish-accent-bright: #fb7185; --fish-accent-dim: #e11d48; --fish-accent-ultra: #fda4af; --fish-accent-ghost: rgba(244, 63, 94, 0.12); --fish-accent-glow: rgba(244, 63, 94, 0.35); --fish-card-hover: rgba(244, 63, 94, 0.06); --fish-card-border-hover: rgba(244, 63, 94, 0.2); --fish-card-active: rgba(244, 63, 94, 0.10); --fish-card-border-active:rgba(244, 63, 94, 0.35); --fish-outline-focus: rgba(244, 63, 94, 0.50); --fish-shadow-glow: 0 0 20px rgba(244, 63, 94, 0.15); --fish-shadow-glow-lg: 0 0 40px rgba(244, 63, 94, 0.25); --fish-text-link: #fb7185; --fish-text-link-hover: #fda4af; --fish-surface-shimmer: linear-gradient(135deg, rgba(244,63,94,0.05) 0%, transparent 50%, rgba(244,63,94,0.03) 100%); } /* Walleye — Amber / Gold */ [data-species="walleye"] { --fish-accent: #f59e0b; --fish-accent-bright: #fbbf24; --fish-accent-dim: #d97706; --fish-accent-ultra: #fcd34d; --fish-accent-ghost: rgba(245, 158, 11, 0.12); --fish-accent-glow: rgba(245, 158, 11, 0.35); --fish-card-hover: rgba(245, 158, 11, 0.06); --fish-card-border-hover: rgba(245, 158, 11, 0.2); --fish-card-active: rgba(245, 158, 11, 0.10); --fish-card-border-active:rgba(245, 158, 11, 0.35); --fish-outline-focus: rgba(245, 158, 11, 0.50); --fish-shadow-glow: 0 0 20px rgba(245, 158, 11, 0.15); --fish-shadow-glow-lg: 0 0 40px rgba(245, 158, 11, 0.25); --fish-text-link: #fbbf24; --fish-text-link-hover: #fcd34d; --fish-surface-shimmer: linear-gradient(135deg, rgba(245,158,11,0.05) 0%, transparent 50%, rgba(245,158,11,0.03) 100%); } /* Catfish — Warm Brown / Sienna */ [data-species="catfish"] { --fish-accent: #a87c4f; --fish-accent-bright: #c9a06c; --fish-accent-dim: #8b6439; --fish-accent-ultra: #ddbf94; --fish-accent-ghost: rgba(168, 124, 79, 0.12); --fish-accent-glow: rgba(168, 124, 79, 0.35); --fish-card-hover: rgba(168, 124, 79, 0.06); --fish-card-border-hover: rgba(168, 124, 79, 0.2); --fish-card-active: rgba(168, 124, 79, 0.10); --fish-card-border-active:rgba(168, 124, 79, 0.35); --fish-outline-focus: rgba(168, 124, 79, 0.50); --fish-shadow-glow: 0 0 20px rgba(168, 124, 79, 0.15); --fish-shadow-glow-lg: 0 0 40px rgba(168, 124, 79, 0.25); --fish-text-link: #c9a06c; --fish-text-link-hover: #ddbf94; --fish-surface-shimmer: linear-gradient(135deg, rgba(168,124,79,0.05) 0%, transparent 50%, rgba(168,124,79,0.03) 100%); --fish-bg-deep: #0a0806; --fish-bg: #161008; --fish-bg-raised: #201a0e; --fish-bg-elevated: #2a2214; } /* Crappie — Lavender / Violet */ [data-species="crappie"] { --fish-accent: #a78bfa; --fish-accent-bright: #c4b5fd; --fish-accent-dim: #8b5cf6; --fish-accent-ultra: #ddd6fe; --fish-accent-ghost: rgba(167, 139, 250, 0.12); --fish-accent-glow: rgba(167, 139, 250, 0.35); --fish-card-hover: rgba(167, 139, 250, 0.06); --fish-card-border-hover: rgba(167, 139, 250, 0.2); --fish-card-active: rgba(167, 139, 250, 0.10); --fish-card-border-active:rgba(167, 139, 250, 0.35); --fish-outline-focus: rgba(167, 139, 250, 0.50); --fish-shadow-glow: 0 0 20px rgba(167, 139, 250, 0.15); --fish-shadow-glow-lg: 0 0 40px rgba(167, 139, 250, 0.25); --fish-text-link: #c4b5fd; --fish-text-link-hover: #ddd6fe; --fish-surface-shimmer: linear-gradient(135deg, rgba(167,139,250,0.05) 0%, transparent 50%, rgba(167,139,250,0.03) 100%); } /* Salmon — Warm Coral / Salmon Pink */ [data-species="salmon"] { --fish-accent: #fb923c; --fish-accent-bright: #fdba74; --fish-accent-dim: #ea580c; --fish-accent-ultra: #fed7aa; --fish-accent-ghost: rgba(251, 146, 60, 0.12); --fish-accent-glow: rgba(251, 146, 60, 0.35); --fish-card-hover: rgba(251, 146, 60, 0.06); --fish-card-border-hover: rgba(251, 146, 60, 0.2); --fish-card-active: rgba(251, 146, 60, 0.10); --fish-card-border-active:rgba(251, 146, 60, 0.35); --fish-outline-focus: rgba(251, 146, 60, 0.50); --fish-shadow-glow: 0 0 20px rgba(251, 146, 60, 0.15); --fish-shadow-glow-lg: 0 0 40px rgba(251, 146, 60, 0.25); --fish-text-link: #fdba74; --fish-text-link-hover: #fed7aa; --fish-surface-shimmer: linear-gradient(135deg, rgba(251,146,60,0.05) 0%, transparent 50%, rgba(251,146,60,0.03) 100%); } /* Pike — Steel Blue / Gunmetal */ [data-species="pike"] { --fish-accent: #64748b; --fish-accent-bright: #94a3b8; --fish-accent-dim: #475569; --fish-accent-ultra: #cbd5e1; --fish-accent-ghost: rgba(100, 116, 139, 0.12); --fish-accent-glow: rgba(100, 116, 139, 0.35); --fish-card-hover: rgba(100, 116, 139, 0.06); --fish-card-border-hover: rgba(100, 116, 139, 0.2); --fish-card-active: rgba(100, 116, 139, 0.10); --fish-card-border-active:rgba(100, 116, 139, 0.35); --fish-outline-focus: rgba(100, 116, 139, 0.50); --fish-shadow-glow: 0 0 20px rgba(100, 116, 139, 0.15); --fish-shadow-glow-lg: 0 0 40px rgba(100, 116, 139, 0.25); --fish-text-link: #94a3b8; --fish-text-link-hover: #cbd5e1; --fish-surface-shimmer: linear-gradient(135deg, rgba(100,116,139,0.05) 0%, transparent 50%, rgba(100,116,139,0.03) 100%); --fish-bg-deep: #030507; --fish-bg: #0a0e14; --fish-bg-raised: #111820; --fish-bg-elevated: #1a222e; } /* Panfish — Sunny Yellow / Lime */ [data-species="panfish"] { --fish-accent: #84cc16; --fish-accent-bright: #a3e635; --fish-accent-dim: #65a30d; --fish-accent-ultra: #bef264; --fish-accent-ghost: rgba(132, 204, 22, 0.12); --fish-accent-glow: rgba(132, 204, 22, 0.35); --fish-card-hover: rgba(132, 204, 22, 0.06); --fish-card-border-hover: rgba(132, 204, 22, 0.2); --fish-card-active: rgba(132, 204, 22, 0.10); --fish-card-border-active:rgba(132, 204, 22, 0.35); --fish-outline-focus: rgba(132, 204, 22, 0.50); --fish-shadow-glow: 0 0 20px rgba(132, 204, 22, 0.15); --fish-shadow-glow-lg: 0 0 40px rgba(132, 204, 22, 0.25); --fish-text-link: #a3e635; --fish-text-link-hover: #bef264; --fish-surface-shimmer: linear-gradient(135deg, rgba(132,204,22,0.05) 0%, transparent 50%, rgba(132,204,22,0.03) 100%); } /* Redfish — Deep Red / Rust */ [data-species="redfish"] { --fish-accent: #dc2626; --fish-accent-bright: #ef4444; --fish-accent-dim: #b91c1c; --fish-accent-ultra: #f87171; --fish-accent-ghost: rgba(220, 38, 38, 0.12); --fish-accent-glow: rgba(220, 38, 38, 0.35); --fish-card-hover: rgba(220, 38, 38, 0.06); --fish-card-border-hover: rgba(220, 38, 38, 0.2); --fish-card-active: rgba(220, 38, 38, 0.10); --fish-card-border-active:rgba(220, 38, 38, 0.35); --fish-outline-focus: rgba(220, 38, 38, 0.50); --fish-shadow-glow: 0 0 20px rgba(220, 38, 38, 0.15); --fish-shadow-glow-lg: 0 0 40px rgba(220, 38, 38, 0.25); --fish-text-link: #ef4444; --fish-text-link-hover: #f87171; --fish-surface-shimmer: linear-gradient(135deg, rgba(220,38,38,0.05) 0%, transparent 50%, rgba(220,38,38,0.03) 100%); --fish-bg-deep: #0a0404; --fish-bg: #160808; --fish-bg-raised: #200d0d; --fish-bg-elevated: #2a1414; } /* Tuna — Ocean Blue / Cobalt */ [data-species="tuna"] { --fish-accent: #2563eb; --fish-accent-bright: #3b82f6; --fish-accent-dim: #1d4ed8; --fish-accent-ultra: #60a5fa; --fish-accent-ghost: rgba(37, 99, 235, 0.12); --fish-accent-glow: rgba(37, 99, 235, 0.35); --fish-card-hover: rgba(37, 99, 235, 0.06); --fish-card-border-hover: rgba(37, 99, 235, 0.2); --fish-card-active: rgba(37, 99, 235, 0.10); --fish-card-border-active:rgba(37, 99, 235, 0.35); --fish-outline-focus: rgba(37, 99, 235, 0.50); --fish-shadow-glow: 0 0 20px rgba(37, 99, 235, 0.15); --fish-shadow-glow-lg: 0 0 40px rgba(37, 99, 235, 0.25); --fish-text-link: #3b82f6; --fish-text-link-hover: #60a5fa; --fish-surface-shimmer: linear-gradient(135deg, rgba(37,99,235,0.05) 0%, transparent 50%, rgba(37,99,235,0.03) 100%); } /* ============================================================ 12. REDUCED MOTION PREFERENCE ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --fish-duration-instant: 0ms; --fish-duration-fast: 0ms; --fish-duration-normal: 0ms; --fish-duration-slow: 0ms; --fish-duration-slower: 0ms; --fish-duration-glacial: 0ms; --fish-bubble-speed: 0s; --fish-wave-frequency: 0s; --fish-current-speed: 0s; --fish-caustics-opacity: 0; } } /* ============================================================ 13. HIGH CONTRAST PREFERENCE ============================================================ */ @media (prefers-contrast: high) { :root { --fish-card-border: rgba(255, 255, 255, 0.20); --fish-card-border-hover: rgba(6, 182, 212, 0.50); --fish-divider: rgba(255, 255, 255, 0.15); --fish-outline: rgba(255, 255, 255, 0.25); --fish-text-muted: #b8c4d0; --fish-text-dim: #8896a6; } }