/* ============================================================ FishDog Design System — Tokens ============================================================ Single source of truth for all design tokens. Load this file BEFORE style.css so tokens cascade everywhere. Colour principle: "Red = Do, Teal = Go" - Red (--accent-primary) → buttons, CTAs, actions - Teal (--accent-nav) → links, navigation, focus, highlights - Danger red → destructive actions only (menus/modals) - Status colours → independent semantic system Created: 13 April 2026 Reference: Design_System_Guide.md ============================================================ */ /* ============================================================ LIGHT MODE (default) ============================================================ */ :root, [data-bs-theme="light"], [data-app-theme="light"] { /* --- Action Colours (Red Family) --- Primary CTA buttons, secondary button outlines. "Click this to make something happen." */ --fd-accent-primary: #E63946; --fd-accent-primary-hover: #CF2F3D; --fd-accent-primary-text: #FFFFFF; --fd-accent-primary-subtle: #FEF2F2; /* --- Navigation Colours (Teal Family) --- Links, active nav, table row hover, focus rings, checkboxes. "Click this to go somewhere or see something." */ --fd-accent-nav: #0F766E; --fd-accent-nav-hover: #0D6B63; --fd-accent-nav-subtle: #F0FDFA; --fd-accent-nav-border: #0F766E; /* --- Danger Colours --- Delete text in menus, error states, destructive modal buttons. NEVER on the page surface as a prominent element. */ --fd-danger: #DC2626; --fd-danger-hover: #B91C1C; --fd-danger-bg: #FEF2F2; --fd-danger-button: #DC2626; --fd-danger-button-hover: #B91C1C; /* --- Status Colours --- Independent system. Not derived from either accent. */ --fd-status-draft-text: #6B7280; --fd-status-draft-bg: #F3F4F6; --fd-status-progress-text: #B45309; --fd-status-progress-bg: #FEF3C7; --fd-status-complete-text: #059669; --fd-status-complete-bg: #ECFDF5; --fd-status-archived-text: #9CA3AF; --fd-status-archived-bg: #F3F4F6; /* --- Neutral Colours --- */ --fd-text-primary: #111827; --fd-text-secondary: #6B7280; --fd-text-tertiary: #9CA3AF; --fd-border: #D5D8DE; /* Card borders, table dividers — strengthened from #E5E7EB for light-mode definition */ --fd-border-subtle: #E5E7EB; /* Lighter variant for internal dividers (e.g. between table rows) */ --fd-surface-0: #F3F4F6; /* Page background — MUST differ from surface-1 */ --fd-surface-1: #FFFFFF; /* Cards, tables, panels */ --fd-surface-2: #FFFFFF; /* Dropdowns, modals, popovers */ --fd-surface-hover: #F9FAFB; /* Table row hover bg */ --fd-surface-nav: #F8F9FB; /* Nav sidebar background — fractionally cooler than surface-0 */ /* --- Shadows --- */ --fd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --fd-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --fd-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); } /* ============================================================ DARK MODE ============================================================ */ [data-bs-theme="dark"], [data-app-theme="dark"] { /* --- Action Colours (Red Family) --- */ --fd-accent-primary: #E63946; --fd-accent-primary-hover: #F04A56; --fd-accent-primary-text: #FFFFFF; --fd-accent-primary-subtle: rgba(230, 57, 70, 0.15); /* --- Navigation Colours (Teal Family) --- */ --fd-accent-nav: #14B8A6; --fd-accent-nav-hover: #2DD4BF; --fd-accent-nav-subtle: rgba(15, 118, 110, 0.12); --fd-accent-nav-border: #14B8A6; /* --- Danger Colours --- */ --fd-danger: #EF4444; --fd-danger-hover: #F87171; --fd-danger-bg: rgba(220, 38, 38, 0.15); --fd-danger-button: #EF4444; --fd-danger-button-hover: #F87171; /* --- Status Colours --- */ --fd-status-draft-text: #9CA3AF; --fd-status-draft-bg: #374151; --fd-status-progress-text: #FBBF24; --fd-status-progress-bg: #4A2F0B; --fd-status-complete-text: #10B981; --fd-status-complete-bg: #064E3B; --fd-status-archived-text: #6B7280; --fd-status-archived-bg: #1F2937; /* --- Neutral Colours --- */ --fd-text-primary: #F9FAFB; --fd-text-secondary: #9CA3AF; --fd-text-tertiary: #6B7280; --fd-border: #374151; --fd-border-subtle: #2D3748; /* Lighter variant for internal row dividers */ --fd-surface-0: #111827; --fd-surface-1: #1F2937; --fd-surface-2: #374151; --fd-surface-hover: #283548; --fd-surface-nav: #1F2937; /* Nav sidebar — same as surface-1 in dark mode */ /* --- Shadows --- */ --fd-shadow-sm: none; --fd-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3); --fd-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4); } /* ============================================================ TYPOGRAPHY TOKENS Font: DM Sans (400, 500, 600, 700) + DM Mono (tabular data) ============================================================ */ :root { /* Font families */ --fd-font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --fd-font-mono: 'DM Mono', 'SF Mono', 'Fira Code', monospace; /* Type scale */ --fd-text-display: 28px; /* Dashboard hero numbers */ --fd-text-h1: 24px; /* Page titles */ --fd-text-h2: 18px; /* Card headers, section titles */ --fd-text-h3: 16px; /* Table titles, subsection headers */ --fd-text-body: 14px; /* Default text, table cells */ --fd-text-small: 13px; /* Descriptions, metadata */ --fd-text-caption: 12px; /* Badge text, helper text, labels */ --fd-text-overline: 11px; /* Nav section labels (uppercase) */ /* Font weights */ --fd-weight-regular: 400; --fd-weight-medium: 500; --fd-weight-semibold: 600; --fd-weight-bold: 700; /* Line heights */ --fd-leading-tight: 1.2; --fd-leading-snug: 1.3; --fd-leading-normal: 1.4; --fd-leading-relaxed: 1.5; /* Letter spacing */ --fd-tracking-tight: -0.02em; --fd-tracking-snug: -0.01em; --fd-tracking-normal: 0; --fd-tracking-wide: 0.04em; --fd-tracking-wider: 0.08em; } /* ============================================================ SPACING TOKENS Base unit: 4px ============================================================ */ :root { --fd-space-xs: 4px; --fd-space-sm: 8px; --fd-space-md: 12px; --fd-space-base: 16px; --fd-space-lg: 24px; --fd-space-xl: 32px; --fd-space-2xl: 48px; } /* ============================================================ BORDER RADIUS TOKENS ============================================================ */ :root { --fd-radius-sm: 4px; /* Small elements, checkboxes */ --fd-radius-md: 6px; /* Buttons, inputs, nav items */ --fd-radius-lg: 8px; /* Cards, tables, dropdowns */ --fd-radius-full: 9999px; /* Badges (pill shape) */ } /* ============================================================ TRANSITION TOKENS ============================================================ */ :root { --fd-transition-fast: 0.1s ease; --fd-transition-base: 0.15s ease; --fd-transition-slow: 0.25s ease; }