/* * Spirit of Christmas -- theme definitions (Section 15). * Every theme defines the same set of CSS custom properties; components in * base.css only ever reference var(--...), never a literal color, so a new * theme is just a new block here (Section 7: no inline styles, no * hardcoded values in components). * * Palette and component language follow the same theme-token approach used * by the org's other internal tools (dark sticky header, accent-driven nav, * Barlow Condensed display type over Inter body text) so staff moving * between internal apps get a consistent look. Colors themselves are this * app's own -- only the *pattern* (token set, header style, table style) is * shared. * * Themes: light, dark, blue, green, red, purple, teal, and a high-contrast * ADA-compliant variant. Default is set via data-theme on ; the * selector in the header (theme-switcher.js) updates it and posts the * choice back to /theme so it persists to the logged-in user's profile. * * --brand-teal-color and --brand-ink-color are sampled directly from * FofFK_logo.jpg (the Friends of Foster Kids logo) -- see * public/assets/img/FofFK_logo.jpg. Unlike every other token here they're * deliberately identical across all 8 themes: they're the org's fixed * brand identity, not something that should shift with the reader's theme * choice. Adjust both here, in one place, if the logo's colors ever change. */ @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap'); :root, [data-theme="light"] { --color-bg: #f0f2f5; --color-bg-elevated: #ffffff; --color-bg-inset: #dde1e7; --color-fg: #111827; --color-fg-muted: #4b5563; --color-fg-subtle: #64748b; --color-border: #000000; --color-border-muted: #6b7280; --color-primary: #1565c0; --color-primary-fg: #ffffff; --color-primary-hover: #0d47a1; --color-accent: #c05400; --color-accent-hover: #9c4400; --color-accent-bg: #fff1e6; --color-danger: #991b1b; --color-danger-bg: #fee2e2; --color-success: #166534; --color-success-bg: #dcfce7; --color-warning: #92400e; --color-warning-bg: #fef3c7; --color-info: #075985; --color-info-bg: #e0f2fe; --color-focus-ring: #1565c0; --color-link: #1565c0; --color-header-bg: #111827; --color-header-fg: #ffffff; --color-nav-highlight: #fb923c; --shadow-sm: 0 1px 4px rgba(0,0,0,.12); --shadow-md: 0 4px 14px rgba(0,0,0,.14); --shadow-lg: 0 10px 30px rgba(0,0,0,.18); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --font-display: 'Barlow Condensed', system-ui, sans-serif; --font-body: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --brand-teal-color: #1cb9da; --brand-ink-color: #545454; } [data-theme="dark"] { --color-bg: #0f1117; --color-bg-elevated: #1e2232; --color-bg-inset: #2d3350; --color-fg: #f1f5f9; --color-fg-muted: #cbd5e1; --color-fg-subtle: #94a3b8; --color-border: #ffffff; --color-border-muted: #4b5680; --color-primary: #60a5fa; --color-primary-fg: #08111f; --color-primary-hover: #93c5fd; --color-accent: #fb923c; --color-accent-hover: #f97316; --color-accent-bg: #2a1500; --color-danger: #f87171; --color-danger-bg: #1f0505; --color-success: #4ade80; --color-success-bg: #052e16; --color-warning: #fbbf24; --color-warning-bg: #1c1000; --color-info: #38bdf8; --color-info-bg: #001e30; --color-focus-ring: #60a5fa; --color-link: #60a5fa; --color-header-bg: #0a0c14; --color-header-fg: #f1f5f9; --color-nav-highlight: #fb923c; --shadow-sm: 0 1px 4px rgba(0,0,0,.45); --shadow-md: 0 4px 14px rgba(0,0,0,.55); --shadow-lg: 0 10px 32px rgba(0,0,0,.65); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --font-display: 'Barlow Condensed', system-ui, sans-serif; --font-body: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --brand-teal-color: #1cb9da; --brand-ink-color: #545454; } [data-theme="blue"] { --color-bg: #f0f4fb; --color-bg-elevated: #ffffff; --color-bg-inset: #bfdbfe; --color-fg: #0d1b2e; --color-fg-muted: #1e3a5f; --color-fg-subtle: #4d6d90; --color-border: #1565c0; --color-border-muted: #1976d2; --color-primary: #1565c0; --color-primary-fg: #ffffff; --color-primary-hover: #0d47a1; --color-accent: #1565c0; --color-accent-hover: #0d47a1; --color-accent-bg: #dbeafe; --color-danger: #991b1b; --color-danger-bg: #fee2e2; --color-success: #166534; --color-success-bg: #dcfce7; --color-warning: #78350f; --color-warning-bg: #fef3c7; --color-info: #075985; --color-info-bg: #e0f2fe; --color-focus-ring: #1565c0; --color-link: #1565c0; --color-header-bg: #0d47a1; --color-header-fg: #ffffff; --color-nav-highlight: #bfdbfe; --shadow-sm: 0 1px 4px rgba(0,0,80,.10); --shadow-md: 0 4px 14px rgba(0,0,80,.13); --shadow-lg: 0 10px 30px rgba(0,0,80,.16); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --font-display: 'Barlow Condensed', system-ui, sans-serif; --font-body: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --brand-teal-color: #1cb9da; --brand-ink-color: #545454; } [data-theme="green"] { --color-bg: #f1f7f2; --color-bg-elevated: #ffffff; --color-bg-inset: #bbf7d0; --color-fg: #052e16; --color-fg-muted: #1a4d1e; --color-fg-subtle: #2e6b35; --color-border: #388e3c; --color-border-muted: #2e7d32; --color-primary: #166534; --color-primary-fg: #ffffff; --color-primary-hover: #14532d; --color-accent: #166534; --color-accent-hover: #14532d; --color-accent-bg: #dcfce7; --color-danger: #991b1b; --color-danger-bg: #fee2e2; --color-success: #166534; --color-success-bg: #dcfce7; --color-warning: #78350f; --color-warning-bg: #fef3c7; --color-info: #075985; --color-info-bg: #e0f2fe; --color-focus-ring: #166534; --color-link: #14532d; --color-header-bg: #14532d; --color-header-fg: #ffffff; --color-nav-highlight: #bbf7d0; --shadow-sm: 0 1px 4px rgba(0,50,0,.10); --shadow-md: 0 4px 14px rgba(0,50,0,.13); --shadow-lg: 0 10px 30px rgba(0,50,0,.16); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --font-display: 'Barlow Condensed', system-ui, sans-serif; --font-body: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --brand-teal-color: #1cb9da; --brand-ink-color: #545454; } [data-theme="red"] { --color-bg: #fdf0f0; --color-bg-elevated: #ffffff; --color-bg-inset: #fecaca; --color-fg: #2c0a0a; --color-fg-muted: #7f1d1d; --color-fg-subtle: #8a6868; --color-border: #b91c1c; --color-border-muted: #991b1b; --color-primary: #991b1b; --color-primary-fg: #ffffff; --color-primary-hover: #7f1d1d; --color-accent: #991b1b; --color-accent-hover: #7f1d1d; --color-accent-bg: #fee2e2; --color-danger: #991b1b; --color-danger-bg: #fee2e2; --color-success: #166534; --color-success-bg: #dcfce7; --color-warning: #78350f; --color-warning-bg: #fef3c7; --color-info: #075985; --color-info-bg: #e0f2fe; --color-focus-ring: #991b1b; --color-link: #991b1b; --color-header-bg: #7f0000; --color-header-fg: #ffffff; --color-nav-highlight: #fecaca; --shadow-sm: 0 1px 4px rgba(80,0,0,.10); --shadow-md: 0 4px 14px rgba(80,0,0,.13); --shadow-lg: 0 10px 30px rgba(80,0,0,.16); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --font-display: 'Barlow Condensed', system-ui, sans-serif; --font-body: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --brand-teal-color: #1cb9da; --brand-ink-color: #545454; } [data-theme="purple"] { --color-bg: #f5f0fb; --color-bg-elevated: #ffffff; --color-bg-inset: #e9d5ff; --color-fg: #1a0a28; --color-fg-muted: #6a4a84; --color-fg-subtle: #7a5a96; --color-border: #6a1b9a; --color-border-muted: #7b1fa2; --color-primary: #6a1b9a; --color-primary-fg: #ffffff; --color-primary-hover: #4a0072; --color-accent: #6a1b9a; --color-accent-hover: #4a0072; --color-accent-bg: #f3e5f5; --color-danger: #991b1b; --color-danger-bg: #fee2e2; --color-success: #166534; --color-success-bg: #dcfce7; --color-warning: #78350f; --color-warning-bg: #fef3c7; --color-info: #075985; --color-info-bg: #e0f2fe; --color-focus-ring: #6a1b9a; --color-link: #6a1b9a; --color-header-bg: #3b0764; --color-header-fg: #ffffff; --color-nav-highlight: #e9d5ff; --shadow-sm: 0 1px 4px rgba(50,0,80,.10); --shadow-md: 0 4px 14px rgba(50,0,80,.13); --shadow-lg: 0 10px 30px rgba(50,0,80,.16); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --font-display: 'Barlow Condensed', system-ui, sans-serif; --font-body: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --brand-teal-color: #1cb9da; --brand-ink-color: #545454; } /* Teal has no counterpart in the reference palette; derived in the same pattern as the other themes (dark saturated header, vivid surface2). Its --color-primary is pinned to --brand-teal-color itself (by request) rather than the darker #0f766e originally picked for AA+ text contrast, so --color-primary-fg is the theme's own dark ink (--color-fg) instead of white -- white on #1cb9da is only ~2.3:1, below WCAG AA's 4.5:1. */ [data-theme="teal"] { --color-bg: #f0f9f8; --color-bg-elevated: #ffffff; --color-bg-inset: #99f6e4; --color-fg: #062b28; --color-fg-muted: #115e59; --color-fg-subtle: #0f766e; --color-border: #0f766e; --color-border-muted: #14b8a6; --color-primary: var(--brand-teal-color); --color-primary-fg: var(--color-fg); --color-primary-hover: #115e59; --color-accent: #0d9488; --color-accent-hover: #0f766e; --color-accent-bg: #ccfbf1; --color-danger: #991b1b; --color-danger-bg: #fee2e2; --color-success: #166534; --color-success-bg: #dcfce7; --color-warning: #78350f; --color-warning-bg: #fef3c7; --color-info: #075985; --color-info-bg: #e0f2fe; --color-focus-ring: #0f766e; --color-link: #0f766e; --color-header-bg: #042f2e; --color-header-fg: #ffffff; --color-nav-highlight: #5eead4; --shadow-sm: 0 1px 4px rgba(0,50,45,.10); --shadow-md: 0 4px 14px rgba(0,50,45,.13); --shadow-lg: 0 10px 30px rgba(0,50,45,.16); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --font-display: 'Barlow Condensed', system-ui, sans-serif; --font-body: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --brand-teal-color: #1cb9da; --brand-ink-color: #545454; } /* * High-contrast ADA variant: pure black/white, no mid-tone grays for text, * thicker focus indicators. Every pairing below meets or exceeds WCAG 2.1 * AA (4.5:1 for text, 3:1 for UI components) -- most exceed AAA (7:1). */ [data-theme="high_contrast"] { --color-bg: #f0f0f0; --color-bg-elevated: #ffffff; --color-bg-inset: #c8c8c8; --color-fg: #000000; --color-fg-muted: #000000; --color-fg-subtle: #1a1a1a; --color-border: #000000; --color-border-muted: #000000; --color-primary: #0000cc; --color-primary-fg: #ffffff; --color-primary-hover: #00008b; --color-accent: #0000cc; --color-accent-hover: #00008b; --color-accent-bg: #c8c8ff; --color-danger: #991b1b; --color-danger-bg: #ff8080; --color-success: #003300; --color-success-bg: #80ff80; --color-warning: #4a2500; --color-warning-bg: #ffe860; --color-info: #000066; --color-info-bg: #8080ff; --color-focus-ring: #0000ff; --color-link: #0000ee; --color-header-bg: #000000; --color-header-fg: #ffffff; --color-nav-highlight: #ffff00; --shadow-sm: 0 2px 6px rgba(0,0,0,.40); --shadow-md: 0 4px 16px rgba(0,0,0,.50); --shadow-lg: 0 10px 32px rgba(0,0,0,.60); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --font-display: 'Barlow Condensed', system-ui, sans-serif; --font-body: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --brand-teal-color: #1cb9da; --brand-ink-color: #545454; }