/* ========================================================================== DaanMatch FieldWorker - Unified CSS Variables ============================================================================ This file defines the single source of truth for all colors, spacing, and common values used throughout the application. Import this file first in all stylesheets that need access to these variables. ========================================================================== */ :root { /* ========================================================================= PRIMARY COLOR PALETTE - Minimal, Consistent Colors ========================================================================= */ /* Primary Brand Colors */ --color-primary: #fc3; /* Main yellow/gold - brand accent */ --color-primary-light: #ffd700; /* Lighter gold for hover states */ --color-primary-dark: #e0a800; /* Darker gold for active states */ /* Secondary Brand Color (Orange accent) */ --color-secondary: #ff9933; /* Orange accent color */ --color-secondary-light: #ffaa4d; --color-secondary-dark: #e07f1b; /* Background Colors - Dark Theme */ --color-bg-darkest: #0a0a23; /* Body background */ --color-bg-dark: #1a1a2a; /* Card/section backgrounds */ --color-bg-medium: #2a2a3a; /* Elevated surfaces */ --color-bg-light: #3a3a4a; /* Input backgrounds, borders */ --color-bg-lighter: #3a3a53; /* Subtle highlight areas */ /* Text Colors */ --color-text-primary: #fc3; /* Primary text (matches brand) */ --color-text-light: #fff; /* White text on dark backgrounds */ --color-text-muted: #888; /* Muted/secondary text */ --color-text-dark: #0a0a23; /* Text on light backgrounds */ --color-text-subtle: #666; /* Very subtle text */ /* Status Colors */ --color-success: #4caf50; /* Green for success/active states */ --color-success-light: #6bc06f; --color-success-dark: #388e3c; --color-warning: #ff9800; /* Orange for warnings */ --color-warning-light: #ffb74d; --color-warning-dark: #f57c00; --color-danger: #f44336; /* Red for errors/danger */ --color-danger-light: #e57373; --color-danger-dark: #d32f2f; --color-info: #17a2b8; /* Blue for info */ --color-info-light: #4fc3dc; --color-info-dark: #0c5460; /* Border Colors */ --color-border: #3a3a4a; /* Standard border */ --color-border-light: rgba(255, 204, 51, 0.2); /* Subtle gold border */ --color-border-accent: #fc3; /* Accent border */ /* ========================================================================= TYPOGRAPHY ========================================================================= */ --font-family-primary: 'Ubuntu', 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-family-mono: 'Courier New', Consolas, monospace; --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-md: 1.1rem; /* ~18px */ --font-size-lg: 1.2rem; /* ~19px */ --font-size-xl: 1.5rem; /* 24px */ --font-size-2xl: 2rem; /* 32px */ --font-size-3xl: 2.5rem; /* 40px */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-black: 900; --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-relaxed: 1.6; /* ========================================================================= SPACING ========================================================================= */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 16px; --spacing-xl: 20px; --spacing-2xl: 30px; --spacing-3xl: 40px; /* ========================================================================= BORDERS & RADIUS ========================================================================= */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 50%; --border-width-thin: 1px; --border-width-medium: 2px; --border-width-thick: 3px; /* ========================================================================= SHADOWS ========================================================================= */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.3); --shadow-xl: 0 12px 34px -8px rgba(0, 0, 0, 0.28); --shadow-glow: 0 0 8px rgba(255, 204, 51, 0.4); --shadow-glow-strong: 0 0 12px rgba(255, 204, 51, 0.6); --shadow-gold: 0 5px 20px rgba(252, 195, 0, 0.5); /* ========================================================================= TRANSITIONS ========================================================================= */ --transition-fast: 0.15s ease; --transition-normal: 0.2s ease; --transition-slow: 0.3s ease; --transition-slower: 0.5s ease; /* ========================================================================= Z-INDEX LAYERS ========================================================================= */ --z-dropdown: 100; --z-sticky: 500; --z-fixed: 900; --z-modal-backdrop: 1000; --z-modal: 2000; --z-tooltip: 3000; --z-toast: 4000; /* ========================================================================= BUTTON VARIABLES ========================================================================= */ /* Primary Button (Gold) */ --btn-primary-bg: var(--color-primary); --btn-primary-bg-hover: var(--color-primary-light); --btn-primary-bg-active: var(--color-primary-dark); --btn-primary-text: var(--color-text-dark); /* Secondary Button (Dark) */ --btn-secondary-bg: var(--color-bg-light); --btn-secondary-bg-hover: #4a4a6a; --btn-secondary-bg-active: #2e2e44; --btn-secondary-text: var(--color-text-light); /* Success Button (Green) */ --btn-success-bg: var(--color-success); --btn-success-bg-hover: var(--color-success-light); --btn-success-bg-active: var(--color-success-dark); --btn-success-text: var(--color-text-light); /* Warning Button (Orange) */ --btn-warning-bg: var(--color-warning); --btn-warning-bg-hover: var(--color-warning-light); --btn-warning-bg-active: var(--color-warning-dark); --btn-warning-text: var(--color-text-dark); /* Danger Button (Red) */ --btn-danger-bg: var(--color-danger); --btn-danger-bg-hover: var(--color-danger-light); --btn-danger-bg-active: var(--color-danger-dark); --btn-danger-text: var(--color-text-light); /* Info Button (Blue) */ --btn-info-bg: var(--color-info); --btn-info-bg-hover: var(--color-info-light); --btn-info-bg-active: var(--color-info-dark); --btn-info-text: var(--color-text-light); /* Button Sizing */ --btn-padding-sm: 6px 12px; --btn-padding-md: 10px 20px; --btn-padding-lg: 14px 28px; --btn-padding-xl: 20px 40px; --btn-font-sm: var(--font-size-xs); --btn-font-md: var(--font-size-sm); --btn-font-lg: var(--font-size-base); --btn-font-xl: var(--font-size-lg); --btn-min-height-sm: 36px; --btn-min-height-md: 44px; --btn-min-height-lg: 52px; --btn-min-height-xl: 64px; /* ========================================================================= INPUT VARIABLES ========================================================================= */ --input-bg: var(--color-primary); --input-bg-focus: var(--color-primary-light); --input-text: var(--color-text-dark); --input-placeholder: #555; --input-border: var(--color-primary); --input-border-focus: var(--color-primary-light); --input-shadow: var(--shadow-glow); --input-shadow-focus: var(--shadow-glow-strong); /* ========================================================================= LAYOUT ========================================================================= */ --max-width-content: 1200px; --max-width-form: 800px; --max-width-narrow: 600px; --nav-height: 60px; --footer-height: 45px; --mobile-nav-height: 65px; } /* ========================================================================= MEDIA QUERY BREAKPOINTS (for reference, use in media queries) - Mobile: max-width: 480px - Tablet: max-width: 768px - Desktop: min-width: 769px - Large: min-width: 1024px ========================================================================= */