/* ============================================================ DESIGN TOKENS Three themes: default (light), dark, easy-read Every visual parameter is a variable. Apply theme by adding class to : theme-default, theme-dark, theme-easy ============================================================ */ /* ---------- TYPOGRAPHY SCALE ---------- */ :root { --font-family: 'Nunito Sans', system-ui, sans-serif; --font-size-micro: 9px; --font-size-label: 10px; --font-size-small: 11px; --font-size-body: 12px; --font-size-heading: 14px; --font-size-title: 16px; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semi: 600; --font-weight-bold: 700; --line-height: 1.4; } /* ---------- SPACING SCALE ---------- */ :root { --space-xxs: 2px; --space-xs: 4px; --space-sm: 6px; --space-md: 8px; --space-lg: 12px; --space-xl: 16px; --space-xxl: 24px; } /* ---------- RADIUS ---------- */ :root { --radius-none: 0; --radius-sm: 1px; --radius-md: 3px; --radius-round: 50%; } /* ---------- TRANSITIONS ---------- */ :root { --transition-fast: 0.1s ease; --transition-normal: 0.15s ease; --transition-slow: 0.25s ease; --transition-panel: 0.3s ease; } /* ---------- Z-INDEX SCALE ---------- */ :root { --z-panel: 1; --z-toolbar: 10; --z-dropdown: 50; --z-floating: 100; --z-modal: 200; --z-toast: 300; } /* ---------- PANEL SIZES ---------- */ :root { --panel-min-width: 140px; --panel-max-width: 400px; --panel-default-left: 200px; --panel-default-product: 260px; --panel-default-right: 240px; --toolbar-height: 40px; --statusbar-height: 24px; --zoombar-height: 32px; --resize-handle: 5px; } /* ---------- SHADOWS ---------- */ :root { --shadow-none: none; --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 8px 24px rgba(0,0,0,0.12); --shadow-dropdown: 0 4px 12px rgba(0,0,0,0.08); --shadow-floating: 0 12px 36px rgba(0,0,0,0.15); --shadow-thumb: 0 1px 4px rgba(0,0,0,0.35); } /* ---------- FOCUS ---------- */ :root { --focus-ring-width: 2px; --focus-ring-offset: 1px; } /* ============================================================ THEME: DEFAULT (LIGHT) ============================================================ */ .theme-default, :root { /* Surfaces */ --color-bg: #fafafa; --color-surface: #ffffff; --color-panel: #f5f5f5; --color-hover: #ebebeb; --color-viewport: #e0e0e0; /* Text */ --color-text-primary: #111111; --color-text-secondary: #555555; --color-text-tertiary: #999999; --color-text-inverse: #ffffff; /* Accent (burnt red-orange) */ --color-accent: #c87a5a; --color-accent-hover: #b56a4a; --color-accent-light: #fdf6f3; --color-accent-fill: #fae8e0; --color-accent-ring: rgba(200, 122, 90, 0.2); /* Borders */ --color-border: #e5e5e5; --color-border-strong: #555555; /* Status */ --color-success: #22c55e; --color-warning: #eab308; --color-error: #ef4444; --color-info: #3b82f6; /* Component-specific */ --color-thumb-selected: #555555; --color-thumb-hover: #c87a5a; --color-toggle-off: #d4d4d4; --color-toggle-off-hover: #b5b5b5; --color-toggle-on: var(--color-accent); --color-toggle-on-hover: var(--color-accent-hover); --color-toggle-knob: #ffffff; --color-scrollbar: #d4d4d4; --color-scrollbar-hover: #a3a3a3; --color-dropdown-item-hover: var(--color-accent-light); --color-dropdown-item-text: var(--color-accent); /* Focus */ --color-focus-ring: var(--color-accent); /* Slider */ --color-slider-track: var(--color-accent); --color-slider-thumb: #ffffff; --color-slider-thumb-border: var(--color-accent); --color-slider-thumb-hover: var(--color-accent-fill); --color-slider-endpoint: var(--color-accent); /* BOM / Product title underline */ --color-underline: var(--color-accent); } /* ============================================================ THEME: DARK ============================================================ */ .theme-dark { /* Surfaces */ --color-bg: #1a1a1a; --color-surface: #242424; --color-panel: #2a2a2a; --color-hover: #353535; --color-viewport: #1e1e1e; /* Text */ --color-text-primary: #e8e8e8; --color-text-secondary: #a0a0a0; --color-text-tertiary: #6a6a6a; --color-text-inverse: #ffffff; /* Accent (stronger, more saturated for dark bg) */ --color-accent: #e05a3a; --color-accent-hover: #c94a2c; --color-accent-light: rgba(224, 90, 58, 0.14); --color-accent-fill: rgba(224, 90, 58, 0.22); --color-accent-ring: rgba(224, 90, 58, 0.28); /* Borders */ --color-border: #3a3a3a; --color-border-strong: #a0a0a0; /* Status */ --color-success: #4ade80; --color-warning: #facc15; --color-error: #f87171; --color-info: #60a5fa; /* Component-specific */ --color-thumb-selected: #a0a0a0; --color-thumb-hover: #e09070; --color-toggle-off: #4a4a4a; --color-toggle-off-hover: #555555; --color-toggle-on: var(--color-accent); --color-toggle-on-hover: var(--color-accent-hover); --color-toggle-knob: #1a1a1a; --color-scrollbar: #3a3a3a; --color-scrollbar-hover: #555555; --color-dropdown-item-hover: var(--color-accent-light); --color-dropdown-item-text: var(--color-accent); /* Focus */ --color-focus-ring: var(--color-accent); /* Slider */ --color-slider-track: var(--color-accent); --color-slider-thumb: #242424; --color-slider-thumb-border: var(--color-accent); --color-slider-thumb-hover: var(--color-accent-fill); --color-slider-endpoint: var(--color-accent); /* BOM / Product title underline */ --color-underline: var(--color-accent); /* Shadows (stronger for dark) */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.3); --shadow-lg: 0 8px 24px rgba(0,0,0,0.4); --shadow-dropdown: 0 4px 12px rgba(0,0,0,0.4); --shadow-floating: 0 12px 36px rgba(0,0,0,0.5); --shadow-thumb: 0 1px 4px rgba(0,0,0,0.6); } /* ============================================================ THEME: EASY-READ (warm white, maximum contrast) ============================================================ */ .theme-easy { /* Surfaces — warm whites */ --color-bg: #fef9f4; --color-surface: #ffffff; --color-panel: #faf5ef; --color-hover: #f0e8de; --color-viewport: #ede4d8; /* Text — pure black for max contrast */ --color-text-primary: #000000; --color-text-secondary: #333333; --color-text-tertiary: #666666; --color-text-inverse: #ffffff; /* Accent (deeper, higher contrast) */ --color-accent: #a85a3a; --color-accent-hover: #8c4a2e; --color-accent-light: #fdf0ea; --color-accent-fill: #f8ddd0; --color-accent-ring: rgba(168, 90, 58, 0.25); /* Borders — visible */ --color-border: #d4c4b4; --color-border-strong: #333333; /* Status */ --color-success: #16a34a; --color-warning: #ca8a04; --color-error: #dc2626; --color-info: #2563eb; /* Component-specific */ --color-thumb-selected: #333333; --color-thumb-hover: #a85a3a; --color-toggle-off: #c4b4a4; --color-toggle-off-hover: #a89888; --color-toggle-on: var(--color-accent); --color-toggle-on-hover: var(--color-accent-hover); --color-toggle-knob: #ffffff; --color-scrollbar: #d4c4b4; --color-scrollbar-hover: #a89888; --color-dropdown-item-hover: var(--color-accent-light); --color-dropdown-item-text: var(--color-accent); /* Focus — thick for visibility */ --color-focus-ring: var(--color-accent); --focus-ring-width: 3px; /* Slider */ --color-slider-track: var(--color-accent); --color-slider-thumb: #ffffff; --color-slider-thumb-border: var(--color-accent); --color-slider-thumb-hover: var(--color-accent-fill); --color-slider-endpoint: var(--color-accent); /* BOM / Product title underline */ --color-underline: var(--color-accent); /* Larger text for readability */ --font-size-micro: 10px; --font-size-label: 11px; --font-size-small: 12px; --font-size-body: 13px; --font-size-heading: 15px; --font-size-title: 18px; --font-weight-normal: 400; --font-weight-medium: 600; --font-weight-semi: 700; --font-weight-bold: 800; --line-height: 1.5; }