/* * IQRA Evaluation — theme tokens (blue / oklch palette). * * Source design tokens follow the Tailwind v4 theme handed over for this app * (radius 0.375rem, Inter/Source Serif 4/JetBrains Mono, layered soft * shadows). Loaded by includes/font_faces.php BEFORE assets/style.css, whose * legacy variables (--bg, --surface, --text, …) are remapped onto the same * palette in that file. Dark mode = .dark on (set by the inline * script in font_faces.php from localStorage('eval_theme') or the OS). */ :root { --background: oklch(1.0000 0 0); --foreground: oklch(0.3211 0 0); --card: oklch(1.0000 0 0); --card-foreground: oklch(0.3211 0 0); --popover: oklch(1.0000 0 0); --popover-foreground: oklch(0.3211 0 0); --primary: oklch(0.6231 0.1880 259.8145); --primary-foreground: oklch(1.0000 0 0); --secondary: oklch(0.9670 0.0029 264.5419); --secondary-foreground: oklch(0.4461 0.0263 256.8018); --muted-bg: oklch(0.9846 0.0017 247.8389); --muted-foreground: oklch(0.5510 0.0234 264.3637); --accent: oklch(0.9514 0.0250 236.8242); --accent-foreground: oklch(0.3791 0.1378 265.5222); --destructive: oklch(0.6368 0.2078 25.3313); --destructive-foreground: oklch(1.0000 0 0); --input: oklch(0.9276 0.0058 264.5313); --ring: oklch(0.6231 0.1880 259.8145); --chart-1: oklch(0.6231 0.1880 259.8145); --chart-2: oklch(0.5461 0.2152 262.8809); --chart-3: oklch(0.4882 0.2172 264.3763); --chart-4: oklch(0.4244 0.1809 265.6377); --chart-5: oklch(0.3791 0.1378 265.5222); --sidebar: oklch(0.9846 0.0017 247.8389); --sidebar-foreground: oklch(0.3211 0 0); --sidebar-primary: oklch(0.6231 0.1880 259.8145); --sidebar-primary-foreground: oklch(1.0000 0 0); --sidebar-accent: oklch(0.9514 0.0250 236.8242); --sidebar-accent-foreground: oklch(0.3791 0.1378 265.5222); --sidebar-border: oklch(0.9276 0.0058 264.5313); --sidebar-ring: oklch(0.6231 0.1880 259.8145); --font-sans: "Inter", "Niramit", "Segoe UI", system-ui, sans-serif; --font-serif: "Source Serif 4", serif; --font-mono: "JetBrains Mono", monospace; --radius: 0.375rem; --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05); --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05); --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10); --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10); --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10); --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25); } /* :root.dark outranks the plain :root blocks here AND in style.css, so dark wins regardless of stylesheet order. Legacy names included so every page styled with var(--bg)/var(--surface)/… flips too. */ :root.dark { --background: oklch(0.2046 0 0); --foreground: oklch(0.9219 0 0); --card: oklch(0.2686 0 0); --card-foreground: oklch(0.9219 0 0); --popover: oklch(0.2686 0 0); --popover-foreground: oklch(0.9219 0 0); --primary: oklch(0.6231 0.1880 259.8145); --primary-foreground: oklch(1.0000 0 0); --secondary: oklch(0.2686 0 0); --secondary-foreground: oklch(0.9219 0 0); --muted-bg: oklch(0.2393 0 0); --muted-foreground: oklch(0.7155 0 0); --accent: oklch(0.3791 0.1378 265.5222); --accent-foreground: oklch(0.8823 0.0571 254.1284); --destructive: oklch(0.6368 0.2078 25.3313); --destructive-foreground: oklch(1.0000 0 0); --input: oklch(0.3715 0 0); --ring: oklch(0.6231 0.1880 259.8145); --chart-1: oklch(0.7137 0.1434 254.6240); --chart-2: oklch(0.6231 0.1880 259.8145); --chart-3: oklch(0.5461 0.2152 262.8809); --chart-4: oklch(0.4882 0.2172 264.3763); --chart-5: oklch(0.4244 0.1809 265.6377); --sidebar: oklch(0.2046 0 0); --sidebar-foreground: oklch(0.9219 0 0); --sidebar-primary: oklch(0.6231 0.1880 259.8145); --sidebar-primary-foreground: oklch(1.0000 0 0); --sidebar-accent: oklch(0.3791 0.1378 265.5222); --sidebar-accent-foreground: oklch(0.8823 0.0571 254.1284); --sidebar-border: oklch(0.3715 0 0); --sidebar-ring: oklch(0.6231 0.1880 259.8145); /* Legacy (style.css / page-inline) variable names */ --bg: oklch(0.2046 0 0); --surface: oklch(0.2686 0 0); --surface-2: oklch(0.2393 0 0); --text: oklch(0.9219 0 0); --muted: oklch(0.7155 0 0); --border: oklch(0.3715 0 0); --accent-1: oklch(0.6231 0.1880 259.8145); --accent-2: oklch(0.7137 0.1434 254.6240); } :root.dark { color-scheme: dark; } :root { color-scheme: light; } /* Base element polish shared by every eval page (pages carry their own layout CSS inline; these only set the theme-level look). */ html { font-family: var(--font-sans); } :root.dark body { background: var(--bg); color: var(--text); }