/* * Global styles for portal-shell. * * Tailwind CSS 4 (CSS-first config). Theme tokens (palette, contrast tiers, * spacing, motion) will be defined under @theme via the libs/shared/tokens * library. spartan-ng components copy-pasted into libs/shared/ui will read * from these tokens. */ @import 'tailwindcss'; /* * Class-based dark mode. Tailwind v4 default is media-query-driven * (`prefers-color-scheme`); we override it so a `.dark` class on * (set by `LayoutStateService` from the user's explicit * preference, or computed from the system preference in `auto` mode) * is the single switch. `&:where(.dark, .dark *)` keeps specificity * neutral so utility ordering doesn't shift. */ @custom-variant dark (&:where(.dark, .dark *)); /* * Brand palette — APF charte graphique. * * primary: #12546c (dark teal) — header bar, sidebar active items, * primary buttons, headings on light bg * accent: #f7a919 (warm orange) — CTAs, highlights, focus rings on * branded surfaces * * The two scales below are hand-tuned (each step roughly halves the * delta from the previous toward white / black). Tailwind v4 surfaces * them automatically as utility classes — `bg-brand-primary-700`, * `text-brand-accent-500`, `ring-brand-primary-500`, etc. * * Use the `500` step as the canonical brand value; the lighter / darker * steps are for hover / focus / muted text without dropping out of the * brand family. */ @theme { --color-brand-primary-50: #eaf3f7; --color-brand-primary-100: #cae0e8; --color-brand-primary-200: #9ac4d2; --color-brand-primary-300: #5fa2b6; --color-brand-primary-400: #2f7f96; --color-brand-primary-500: #12546c; --color-brand-primary-600: #0f475c; --color-brand-primary-700: #0c394a; --color-brand-primary-800: #082a36; --color-brand-primary-900: #051c24; --color-brand-primary-950: #020e12; --color-brand-accent-50: #fef5e0; --color-brand-accent-100: #fce6b3; --color-brand-accent-200: #fad17a; --color-brand-accent-300: #f8bb47; --color-brand-accent-400: #f7a919; --color-brand-accent-500: #de9415; --color-brand-accent-600: #b97a11; --color-brand-accent-700: #93600d; --color-brand-accent-800: #6e4709; --color-brand-accent-900: #4a3006; --color-brand-accent-950: #271903; }