@charset "UTF-8"; /* ========================================================================== GHI Portal — Design Tokens Single source of truth for color, type, spacing, radius, shadow, motion. Every other stylesheet reads from these custom properties — no page should declare a raw color, font stack, or one-off spacing value. Theming: every color below is redefined per [data-theme] on (set by an inline blocking script in header.php, before first paint, so there's no flash of the wrong theme). The bare :root block IS the "corporate" theme — the default when no choice has been made yet. Variable NAMES stay identical across themes; only VALUES change, so a component never needs to know which theme is active. ========================================================================== */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/fraunces-600.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-var.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500.woff2') format('woff2'); } :root, html[data-theme="corporate"] { /* ---- Brand color ramps ---- */ --blue-50: #eaf2fa; --blue-100: #d2e5f5; --blue-300: #8cbbe3; --blue-400: #5796cb; --blue-500: #256ba0; --blue-600: #0f4c81; --blue-700: #0b3a63; --blue-800: #082b4a; --blue-900: #061e34; --green-100: #eaf6d6; --green-400: #bcdf63; --green-500: #8fbf1f; --green-600: #749d19; --green-700: #587613; --neutral-0: #ffffff; --neutral-50: #f4f6f9; --neutral-100: #eaeef3; --neutral-200: #dbe2ea; --neutral-400: #98a5b3; --neutral-600: #57687a; --neutral-800: #182430; --neutral-900: #0e1620; --danger-500: #d64545; --success-500: #3f9142; --color-bg: var(--neutral-50); --color-surface: var(--neutral-0); --color-text: var(--neutral-800); --color-text-muted: var(--neutral-600); --color-border: var(--neutral-200); --color-primary: var(--blue-600); --color-primary-dark: var(--blue-700); --color-primary-soft: var(--blue-50); --color-accent: var(--green-500); --color-accent-dark: var(--green-600); --color-accent-soft: var(--green-100); --color-danger: var(--danger-500); --color-focus-ring: var(--blue-500); --tint-violet-bg: #eef2ff; --tint-violet-fg: #4f46e5; --sb-bg: var(--blue-900); --sb-active: #123a5c; --status-good-bg: #dcfce7; --status-good-text: #166534; --status-warn-bg: #fef3c7; --status-warn-text: #8a5a09; --status-danger-bg: #fee2e2; --status-danger-text: #a33131; --status-info-bg: var(--blue-50); --status-info-text: var(--blue-700); --status-neutral-bg: var(--neutral-100); --status-neutral-text: var(--color-text-muted); } html[data-theme="midnight"] { --blue-50: #1c2c40; --blue-100: #233a56; --blue-300: #4d7aa8; --blue-400: #6291bf; --blue-500: #79a6d1; --blue-600: #8fb8e0; --blue-700: #a9cbec; --blue-800: #0e2e4a; --blue-900: #0a0e16; --green-100: #26301c; --green-400: #a8d158; --green-500: #bfe473; --green-600: #d3ec96; --green-700: #e6f5bf; --neutral-0: #182130; --neutral-50: #0f1520; --neutral-100: #212b3a; --neutral-200: #2c3747; --neutral-400: #6c7a8c; --neutral-600: #9aa8b8; --neutral-800: #e7ecf2; --neutral-900: #f5f7fa; --danger-500: #e2685f; --success-500: #4ec98a; --color-bg: var(--neutral-50); --color-surface: var(--neutral-0); --color-text: var(--neutral-800); --color-text-muted: var(--neutral-600); --color-border: var(--neutral-200); --color-primary: var(--blue-600); --color-primary-dark: #0e2e4a; --color-primary-soft: var(--blue-50); --color-accent: var(--green-500); --color-accent-dark: var(--green-600); --color-accent-soft: var(--green-100); --color-danger: var(--danger-500); --color-focus-ring: var(--blue-600); --tint-violet-bg: #29304f; --tint-violet-fg: #b3bdfa; --sb-bg: #0a0e16; --sb-active: #1c2634; --status-good-bg: #123423; --status-good-text: #5fd79a; --status-warn-bg: #3a2c12; --status-warn-text: #eab24f; --status-danger-bg: #3a1c1a; --status-danger-text: #ef8078; --status-info-bg: var(--blue-50); --status-info-text: #9dc4e8; --status-neutral-bg: var(--neutral-100); --status-neutral-text: var(--color-text-muted); } html[data-theme="slate"] { --blue-50: #e7ecf1; --blue-100: #d2dbe4; --blue-300: #8ba0b6; --blue-400: #647f98; --blue-500: #4a6884; --blue-600: #33526e; --blue-700: #24394c; --blue-800: #1a2b3a; --blue-900: #141f29; --green-100: #eef1de; --green-400: #c1cf7c; --green-500: #9ab233; --green-600: #7f942a; --green-700: #647421; --neutral-0: #ffffff; --neutral-50: #eef1f4; --neutral-100: #e2e7ec; --neutral-200: #d1d9e1; --neutral-400: #8b98a8; --neutral-600: #4f5b6b; --neutral-800: #1b2430; --neutral-900: #10161e; --danger-500: #c0463f; --success-500: #3d8a55; --color-bg: var(--neutral-50); --color-surface: var(--neutral-0); --color-text: var(--neutral-800); --color-text-muted: var(--neutral-600); --color-border: var(--neutral-200); --color-primary: var(--blue-600); --color-primary-dark: var(--blue-700); --color-primary-soft: var(--blue-50); --color-accent: var(--green-500); --color-accent-dark: var(--green-600); --color-accent-soft: var(--green-100); --color-danger: var(--danger-500); --color-focus-ring: var(--blue-500); --tint-violet-bg: #e9e7f5; --tint-violet-fg: #4a3fa8; --sb-bg: #202b38; --sb-active: #2c3a49; --status-good-bg: #e2f0e2; --status-good-text: #2f6b3f; --status-warn-bg: #f3ecd8; --status-warn-text: #8a6a1f; --status-danger-bg: #f3dfdb; --status-danger-text: #a3453c; --status-info-bg: var(--blue-50); --status-info-text: var(--blue-700); --status-neutral-bg: var(--neutral-100); --status-neutral-text: var(--color-text-muted); } html[data-theme="sepia"] { --blue-50: #e8eef2; --blue-100: #d3e0e8; --blue-300: #89aabb; --blue-400: #5c8697; --blue-500: #3d6b7d; --blue-600: #2f5d82; --blue-700: #234763; --blue-800: #1a3548; --blue-900: #132631; --green-100: #eef2df; --green-400: #b8cd7a; --green-500: #8aa83f; --green-600: #728c33; --green-700: #596d27; --neutral-0: #fffcf5; --neutral-50: #f6f0e3; --neutral-100: #efe6d2; --neutral-200: #e3d7bd; --neutral-400: #a3936f; --neutral-600: #7d6c52; --neutral-800: #3b3226; --neutral-900: #241f17; --danger-500: #a8493f; --success-500: #4c8a4f; --color-bg: var(--neutral-50); --color-surface: var(--neutral-0); --color-text: var(--neutral-800); --color-text-muted: var(--neutral-600); --color-border: var(--neutral-200); --color-primary: var(--blue-600); --color-primary-dark: var(--blue-700); --color-primary-soft: var(--blue-50); --color-accent: var(--green-500); --color-accent-dark: var(--green-600); --color-accent-soft: var(--green-100); --color-danger: var(--danger-500); --color-focus-ring: var(--blue-500); --tint-violet-bg: #e9e6de; --tint-violet-fg: #4d4390; --sb-bg: #33291f; --sb-active: #443627; --status-good-bg: #e6f0e0; --status-good-text: #3f6e42; --status-warn-bg: #f2e6cc; --status-warn-text: #8a611b; --status-danger-bg: #f2dcd8; --status-danger-text: #96423a; --status-info-bg: var(--blue-50); --status-info-text: var(--blue-700); --status-neutral-bg: var(--neutral-100); --status-neutral-text: var(--color-text-muted); } :root { /* ---- Typography ---- */ --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif; --font-ui: 'Inter', 'Poppins', sans-serif; --font-display: 'Inter', -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: clamp(2.25rem, 5vw + 1rem, 3.5rem); --fw-regular: 400; --fw-medium: 500; --fw-semibold: 650; /* ---- Spacing scale ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* ---- Radius / shadow ---- */ --radius-sm: 9px; --radius-md: 14px; --radius-lg: 18px; --radius-full: 999px; --shadow-sm: 0 1px 3px rgba(10, 20, 35, 0.08); --shadow-md: 0 10px 26px -12px rgba(10, 20, 35, 0.22); --shadow-lg: 0 24px 55px -18px rgba(6, 14, 26, 0.38); /* ---- Motion — short, purposeful, never decorative ---- */ --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; /* ---- Layout ---- */ --sidebar-w-expanded: 246px; --sidebar-w-collapsed: 76px; --topbar-h: 64px; --icon-btn-size: 52px; --icon-menu-gap: 14px; /* ---- Z-index scale ---- */ --z-menu: 20; --z-modal: 50; --z-toast: 60; } /* Stat figures never jitter in width as they update. */ .text-tabular { font-variant-numeric: tabular-nums; font-family: var(--font-mono); } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } }