/* * Manhali Modern: design tokens. * * Token names follow shadcn/ui so the platform port maps 1:1 onto * `@theme inline` in apps/platform/app/app.css. Extras (canvas, brand, * *-soft, tag-*, shadows, sizing) are documented in README.md. * * Light is the default. Dark applies with `.dark` on (the platform's * ThemeProvider strategy). `.light` / `.dark` also work on any subtree, so a * region can pin a theme (the style guide shows both side by side). * Every text/fill pair is checked for WCAG AA (see README → Contrast). */ :root, .light { color-scheme: light; /* ── Surfaces ─────────────────────────────────────────── */ --canvas: oklch(0.982 0.005 75); /* app backdrop behind the inset panel (#faf8f5) */ --background: oklch(1 0 0); /* main panel */ --foreground: oklch(0.235 0.014 55); --card: oklch(1 0 0); --card-foreground: var(--foreground); --popover: oklch(1 0 0); --popover-foreground: var(--foreground); --surface-2: oklch(0.985 0.004 75); /* table header, inset areas inside cards */ --muted: oklch(0.966 0.006 70); --muted-foreground: oklch(0.505 0.014 55); --subtle-foreground: oklch(0.6 0.012 55); /* icons/placeholders only, never body text */ --hover: oklch(0.972 0.006 70); --selected: oklch(0.955 0.008 70); --border: oklch(0.925 0.007 70); --border-strong: oklch(0.875 0.009 70); --input: oklch(0.89 0.009 70); /* ── Brand ────────────────────────────────────────────── */ --brand: oklch(0.7 0.185 48); /* sunny tangerine: logo, charts, highlights */ --primary: oklch(0.57 0.172 41); /* button fill: white text ≥ 4.5:1 */ --primary-hover: oklch(0.535 0.165 40); --primary-active: oklch(0.49 0.15 39); --primary-foreground: oklch(1 0 0); --primary-soft: oklch(0.962 0.03 60); --primary-soft-hover: oklch(0.935 0.048 58); --primary-soft-foreground: oklch(0.48 0.15 40); --secondary: oklch(0.962 0.006 70); --secondary-foreground: var(--foreground); --accent: var(--hover); --accent-foreground: var(--foreground); --ring: oklch(0.7 0.185 48 / 0.55); /* ── Status (fill + soft pair) ────────────────────────── */ --success: oklch(0.55 0.13 155); --success-foreground: oklch(1 0 0); --success-soft: oklch(0.955 0.04 155); --success-soft-foreground: oklch(0.42 0.1 155); --warning: oklch(0.76 0.15 75); --warning-foreground: oklch(0.25 0.05 60); --warning-soft: oklch(0.965 0.05 85); --warning-soft-foreground: oklch(0.47 0.11 65); --info: oklch(0.56 0.15 250); --info-foreground: oklch(1 0 0); --info-soft: oklch(0.96 0.025 250); --info-soft-foreground: oklch(0.44 0.14 255); --destructive: oklch(0.56 0.2 25); --destructive-foreground: oklch(1 0 0); --destructive-soft: oklch(0.96 0.025 20); --destructive-soft-foreground: oklch(0.47 0.17 25); --neutral-soft: oklch(0.955 0.005 70); --neutral-soft-foreground: oklch(0.44 0.012 55); /* ── Categorical tags (course categories, lesson types, segments) ── */ --tag-orange-bg: oklch(0.955 0.04 55); --tag-orange-fg: oklch(0.5 0.15 42); --tag-amber-bg: oklch(0.96 0.055 88); --tag-amber-fg: oklch(0.48 0.1 70); --tag-green-bg: oklch(0.955 0.045 150); --tag-green-fg: oklch(0.45 0.11 150); --tag-teal-bg: oklch(0.955 0.035 185); --tag-teal-fg: oklch(0.45 0.08 190); --tag-blue-bg: oklch(0.955 0.03 250); --tag-blue-fg: oklch(0.47 0.15 255); --tag-violet-bg: oklch(0.955 0.035 295); --tag-violet-fg: oklch(0.48 0.17 295); --tag-pink-bg: oklch(0.955 0.035 350); --tag-pink-fg: oklch(0.5 0.17 355); --tag-red-bg: oklch(0.955 0.03 22); --tag-red-fg: oklch(0.5 0.18 25); /* ── Charts ───────────────────────────────────────────── */ --chart-1: var(--brand); --chart-2: oklch(0.78 0.14 75); /* honey */ --chart-3: oklch(0.62 0.12 185); /* teal */ --chart-4: oklch(0.6 0.16 280); /* violet */ --chart-5: oklch(0.72 0.12 350); /* rose */ --chart-empty: oklch(0.925 0.007 70); --chart-grid: oklch(0.94 0.006 70); /* ── Sidebar (sits on the canvas) ─────────────────────── */ --sidebar: var(--canvas); --sidebar-foreground: oklch(0.36 0.014 55); --sidebar-muted-foreground: oklch(0.52 0.014 55); --sidebar-accent: oklch(0.955 0.007 70); /* hover */ --sidebar-active: oklch(1 0 0); /* raised white chip */ --sidebar-active-foreground: var(--foreground); --sidebar-border: oklch(0.915 0.008 70); /* ── Elevation (warm-tinted) ──────────────────────────── */ --shadow-color: 40 30% 20%; --shadow-xs: 0 1px 2px hsl(var(--shadow-color) / 0.05); --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.06), 0 1px 3px hsl(var(--shadow-color) / 0.04); --shadow-md: 0 2px 4px hsl(var(--shadow-color) / 0.04), 0 8px 20px -6px hsl(var(--shadow-color) / 0.1); --shadow-lg: 0 4px 8px hsl(var(--shadow-color) / 0.04), 0 20px 44px -10px hsl(var(--shadow-color) / 0.18); --inset-highlight: inset 0 1px 0 oklch(1 0 0 / 0.7); --btn-primary-shadow: 0 1px 2px oklch(0.45 0.15 40 / 0.3), inset 0 1px 0 oklch(1 0 0 / 0.22), inset 0 -1px 0 oklch(0 0 0 / 0.1); --overlay: oklch(0.2 0.02 55 / 0.32); /* ── Radius ───────────────────────────────────────────── */ --radius-xs: 6px; /* kbd, tiny tags */ --radius-sm: 8px; /* tags, checkbox, small buttons */ --radius-md: 10px; /* controls, menu items, nav items */ --radius-lg: 16px; /* cards */ --radius-xl: 20px; /* main panel, dialogs, sheets */ --radius-pill: 999px; --radius: var(--radius-md); /* shadcn base */ /* ── Type ─────────────────────────────────────────────── */ --font-ar: "Thmanyah Sans"; --font-latin: "Inter"; --font-sans: var(--font-ar), var(--font-latin), system-ui, "Segoe UI", sans-serif; --font-display: "Thmanyah Serif Display", var(--font-sans); --font-num: var(--font-latin), var(--font-ar), system-ui, sans-serif; --text-xs: 0.75rem; /* 12: meta, table headers */ --text-sm: 0.8125rem; /* 13: secondary text, controls-sm */ --text-base: 0.9375rem; /* 15: body, controls */ --text-md: 1.0625rem; /* 17: card titles */ --text-lg: 1.25rem; /* 20: section titles */ --text-xl: 1.5rem; /* 24: page titles */ --text-2xl: 1.875rem; /* 30: KPI values */ --text-3xl: 2.25rem; /* 36: hero/greeting */ --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; /* Thmanyah has no 600 */ /* ── Sizing / spacing (4px grid) ──────────────────────── */ --control-h-xs: 28px; --control-h-sm: 32px; --control-h: 38px; --control-h-lg: 44px; --nav-item-h: 36px; --card-pad: 20px; --grid-gap: 16px; --section-gap: 24px; --page-pad: 28px; --sidebar-w: 260px; --sidebar-rail-w: 68px; --topbar-h: 60px; --panel-inset: 8px; --content-max: 1280px; /* ── Motion ───────────────────────────────────────────── */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur: 180ms; --dur-slow: 260ms; } /* ── Dark: warm charcoal, same token names ─────────────────── */ .dark { color-scheme: dark; --canvas: oklch(0.165 0.006 60); --background: oklch(0.2 0.007 60); --foreground: oklch(0.945 0.006 75); --card: oklch(0.225 0.008 60); --popover: oklch(0.245 0.008 60); --surface-2: oklch(0.215 0.007 60); --muted: oklch(0.26 0.008 60); --muted-foreground: oklch(0.72 0.012 70); --subtle-foreground: oklch(0.6 0.01 70); --hover: oklch(0.255 0.008 60); --selected: oklch(0.29 0.01 60); --border: oklch(0.29 0.008 60); --border-strong: oklch(0.36 0.01 60); --input: oklch(0.34 0.01 60); --brand: oklch(0.76 0.16 52); --primary: oklch(0.74 0.155 50); --primary-hover: oklch(0.79 0.14 55); --primary-active: oklch(0.7 0.15 48); --primary-foreground: oklch(0.2 0.03 45); --primary-soft: oklch(0.32 0.06 48 / 0.6); --primary-soft-hover: oklch(0.36 0.07 48 / 0.7); --primary-soft-foreground: oklch(0.83 0.12 58); --secondary: oklch(0.27 0.008 60); --ring: oklch(0.76 0.16 52 / 0.6); --success: oklch(0.72 0.14 155); --success-foreground: oklch(0.2 0.04 155); --success-soft: oklch(0.32 0.05 155 / 0.55); --success-soft-foreground: oklch(0.83 0.11 155); --warning: oklch(0.8 0.14 78); --warning-foreground: oklch(0.22 0.04 60); --warning-soft: oklch(0.34 0.06 75 / 0.55); --warning-soft-foreground: oklch(0.86 0.11 85); --info: oklch(0.72 0.13 250); --info-foreground: oklch(0.2 0.04 250); --info-soft: oklch(0.32 0.06 250 / 0.55); --info-soft-foreground: oklch(0.83 0.09 250); --destructive: oklch(0.68 0.18 25); --destructive-foreground: oklch(0.18 0.04 25); --destructive-soft: oklch(0.33 0.08 25 / 0.55); --destructive-soft-foreground: oklch(0.84 0.1 25); --neutral-soft: oklch(0.29 0.008 60); --neutral-soft-foreground: oklch(0.8 0.01 70); --tag-orange-bg: oklch(0.34 0.07 48 / 0.55); --tag-orange-fg: oklch(0.84 0.11 58); --tag-amber-bg: oklch(0.35 0.06 80 / 0.55); --tag-amber-fg: oklch(0.87 0.11 88); --tag-green-bg: oklch(0.33 0.06 150 / 0.55); --tag-green-fg: oklch(0.84 0.11 150); --tag-teal-bg: oklch(0.33 0.05 185 / 0.55); --tag-teal-fg: oklch(0.84 0.08 185); --tag-blue-bg: oklch(0.33 0.07 255 / 0.55); --tag-blue-fg: oklch(0.83 0.09 250); --tag-violet-bg: oklch(0.33 0.08 295 / 0.55); --tag-violet-fg: oklch(0.84 0.1 295); --tag-pink-bg: oklch(0.34 0.08 350 / 0.55); --tag-pink-fg: oklch(0.85 0.1 350); --tag-red-bg: oklch(0.34 0.08 25 / 0.55); --tag-red-fg: oklch(0.84 0.1 25); --chart-2: oklch(0.8 0.13 80); --chart-3: oklch(0.72 0.11 185); --chart-4: oklch(0.7 0.14 285); --chart-5: oklch(0.76 0.12 350); --chart-empty: oklch(0.3 0.008 60); --chart-grid: oklch(0.27 0.008 60); --sidebar: var(--canvas); --sidebar-foreground: oklch(0.82 0.01 70); --sidebar-muted-foreground: oklch(0.66 0.012 70); --sidebar-accent: oklch(0.22 0.007 60); --sidebar-active: oklch(0.255 0.009 60); --sidebar-border: oklch(0.26 0.008 60); --shadow-color: 30 20% 2%; --shadow-xs: 0 1px 2px hsl(var(--shadow-color) / 0.3); --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.35), 0 1px 3px hsl(var(--shadow-color) / 0.2); --shadow-md: 0 2px 4px hsl(var(--shadow-color) / 0.25), 0 8px 20px -6px hsl(var(--shadow-color) / 0.45); --shadow-lg: 0 4px 8px hsl(var(--shadow-color) / 0.25), 0 20px 44px -10px hsl(var(--shadow-color) / 0.6); --inset-highlight: inset 0 1px 0 oklch(1 0 0 / 0.05); --btn-primary-shadow: 0 1px 2px oklch(0 0 0 / 0.4), inset 0 1px 0 oklch(1 0 0 / 0.25), inset 0 -1px 0 oklch(0 0 0 / 0.12); --overlay: oklch(0.08 0.01 60 / 0.6); }