/* ============================================================================ KARYOTUTOR DASHBOARD — DESIGN TOKENS The only file in the dashboard design system permitted to contain a raw colour value. Everything in ktd-shell.css and ktd-components.css refers to these tokens. If you are about to type a hex digit in either of those files, add a token here instead. NAMESPACE Every class in this system is prefixed `ktd-` (Karyotutor Dashboard). `kt-` is already taken by the marketing/auth pages — notably `.kt-btn` in assets/css/header.css, which is an indigo gradient button. Reusing `kt-` here would collide the moment the two stylesheets meet on one page. COLOUR SEMANTICS — read this before changing any colour --ktd-accent (teal) is INTERACTIVE CHROME ONLY: primary button, link, focus ring, active nav item, selected tab. It never means "correct", "passed" or "good". --ktd-positive (blue) carries that meaning instead, because the app already renders correct answers blue and incorrect red — see karyotutor.tutor.block-test-review.js:115. This is also why Bootstrap's green success was deliberately repainted navy at workbench-base.css:1. Introducing a conventional green "success" would silently contradict every review and scoring screen in the product. Don't. CONTRAST Ratios noted below are measured against the surface each token sits on. All text tokens meet WCAG AA (4.5:1); all non-text UI tokens meet 3:1. ========================================================================== */ :root { /* ── Neutrals — slate scale ─────────────────────────────────────────── */ --ktd-n-0: #FFFFFF; /* raised surface: cards, table body, modals */ --ktd-n-50: #F8FAFC; /* page background */ --ktd-n-100: #F1F5F9; /* subtle fill: table stripe, hover, inset */ --ktd-n-200: #E2E8F0; /* hairline border — the default border */ --ktd-n-300: #CBD5E1; /* strong border, disabled fill */ --ktd-n-400: #94A3B8; /* placeholder, disabled text, sidebar idle text */ --ktd-n-500: #64748B; /* muted text 4.76:1 on n-0 */ --ktd-n-600: #475569; /* secondary body text 7.44:1 on n-0 */ --ktd-n-700: #334155; /* strong body text */ --ktd-n-800: #1E293B; /* raised dark surface (sidebar hover) */ --ktd-n-900: #0F172A; /* primary text / sidebar ground 17.4:1 on n-0 */ /* ── Interactive accent — chrome only, never semantic ───────────────── */ --ktd-accent: #00857A; /* 4.53:1 on n-0 — AA text + AA UI */ --ktd-accent-hi: #006B62; /* hover/active 6.41:1 on n-0 */ --ktd-accent-fg: #FFFFFF; /* text on accent 4.53:1 */ --ktd-accent-bg: #E6F4F3; /* tint: selected row, badge ground */ --ktd-accent-ring: rgba(0, 133, 122, 0.28); /* focus ring */ /* ── Semantic status — meaning, not decoration ──────────────────────── */ --ktd-positive: #1D4ED8; /* "correct" / success 6.70:1 on n-0 */ --ktd-positive-hi: #1E40AF; /* hover */ --ktd-positive-bg: #E8F0FB; --ktd-negative: #B91C1C; /* "incorrect" / destructive 6.47:1 on n-0 */ --ktd-negative-hi: #991B1B; /* hover */ --ktd-negative-bg: #FEE8E8; --ktd-warning: #B45309; /* 5.02:1 on n-0 */ --ktd-warning-bg: #FEF3C7; --ktd-info: #475569; /* neutral notice */ --ktd-info-bg: #F1F5F9; /* ── Semantic aliases onto the neutral scale ────────────────────────── */ --ktd-bg: var(--ktd-n-50); --ktd-surface: var(--ktd-n-0); --ktd-surface-alt: var(--ktd-n-100); --ktd-border: var(--ktd-n-200); --ktd-border-hi: var(--ktd-n-300); --ktd-text: var(--ktd-n-900); --ktd-text-muted: var(--ktd-n-500); --ktd-text-2: var(--ktd-n-600); /* ── Sidebar ────────────────────────────────────────────────────────── */ --ktd-side-bg: var(--ktd-n-900); --ktd-side-fg: var(--ktd-n-400); /* 7.11:1 on side-bg */ --ktd-side-fg-hi: #FFFFFF; /* 17.4:1 on side-bg */ --ktd-side-hover: var(--ktd-n-800); --ktd-side-active: rgba(0, 133, 122, 0.20); --ktd-side-border: rgba(255, 255, 255, 0.08); /* ── Shell geometry — must match the values page markup assumes ─────── */ --ktd-header-h: 60px; --ktd-side-w: 224px; --ktd-side-rail-w: 64px; /* collapsed rail below 1200px */ /* ── Spacing — 4px base (Carbon/Tabler) ─────────────────────────────── */ --ktd-space-1: 4px; --ktd-space-2: 8px; --ktd-space-3: 12px; --ktd-space-4: 16px; --ktd-space-5: 20px; --ktd-space-6: 24px; --ktd-space-7: 32px; --ktd-space-8: 40px; /* ── Radius — restrained; this is a data tool, not a consumer app ───── */ --ktd-radius-sm: 4px; --ktd-radius-md: 6px; --ktd-radius-lg: 10px; --ktd-radius-pill: 999px; /* ── Elevation — Primer discipline: borders first, shadow sparingly ─── */ --ktd-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06); --ktd-shadow-2: 0 4px 12px rgba(15, 23, 42, 0.10); --ktd-shadow-3: 0 12px 32px rgba(15, 23, 42, 0.16); /* ── Type ───────────────────────────────────────────────────────────── */ --ktd-font: var(--kt-font-sans, "Geist Sans", "Helvetica Neue", Arial, sans-serif); --ktd-fs-xs: 11px; --ktd-fs-sm: 12px; --ktd-fs-md: 13px; /* dashboard body size — dense by design */ --ktd-fs-lg: 14px; --ktd-fs-xl: 16px; --ktd-fs-2xl: 20px; /* page title */ --ktd-fw-normal: 400; --ktd-fw-med: 500; --ktd-fw-semi: 600; --ktd-fw-bold: 700; --ktd-lh-tight: 1.25; --ktd-lh-body: 1.55; /* ── Data-table row heights (Carbon scale) ──────────────────────────── */ --ktd-row-compact: 32px; --ktd-row-default: 40px; --ktd-row-tall: 48px; --ktd-transition: 0.15s ease; } /* ============================================================================ UI REFRESH - TOKEN OVERRIDES The second :root block in this file. Nothing here adds a component: it only re-points existing tokens, so every rule in ktd-shell.css, ktd-components.css and ktd-pages.css picks the new values up without being touched. The pre-refresh values stay readable in the first block above. Where both blocks set a token, this one wins. The colour semantics set out above are unchanged: the accent is interactive chrome only, blue means "correct", red means "incorrect". -- WHERE THE NUMBERS COME FROM ---------------------------------------------- Measured from the stylesheets of eight free, open-source dashboard templates (Tabler, Sneat, Material Dashboard, Soft UI Dashboard, Kaiadmin, Datta Able, TailAdmin, Horizon UI). Where they agree, this file follows them: body text 14px in 5 of 8 (Sneat 15px) was 13px card title 16-20px, semibold, dark, sentence case was 11px caps, grey page title 23-24px, semibold or bold was 20px table header 12-13px uppercase, muted was 11px card radius 10-20px on the rounded ones was 10px card edge borderless + soft wide shadow in 6 of 8 was 1px border page ground #F4F4F5 to #F5F7FD, cool light grey was #F8FAFC button 14px medium, about 38px tall was 13px, 32px sidebar 250-265px wide, 14-15px medium items was 224px, 14px Patterns only - no template code is copied. ASCII-only comments - see the note in ktd-components.css. ========================================================================== */ :root { /* -- Grounds ------------------------------------------------------------ Three steps instead of two: page ground, the main content tray that floats on it, and the white widgets nested inside the tray. The tray sits where the templates put their page background (Kaiadmin #F5F7FD, Horizon #F4F7FE); the page ground is one step deeper so the tray reads as a card of its own. */ --ktd-bg: #E8EDF5; --ktd-tray: #F5F7FB; --ktd-tray-edge: #FFFFFF; --ktd-card-edge: rgba(15, 23, 42, 0.05); /* hairline; the shadow does the work */ /* -- Accent: blue ------------------------------------------------------ Replaces the teal of ktd-tokens.css. It is a sky/azure blue (hue 201) chosen to sit apart from --ktd-positive, the royal blue (hue 224) that means "correct" on the review and scoring screens - the two must stay tellable apart, so do not move this toward #1D4ED8. */ --ktd-accent: #0369A1; /* 5.93:1 on white - AA text + AA UI */ --ktd-accent-hi: #075985; /* hover/active 7.56:1 on white */ --ktd-accent-fg: #FFFFFF; --ktd-accent-bg: #E0F2FE; /* tint: selected row, badge ground */ --ktd-accent-ring: rgba(3, 105, 161, 0.28); /* -- Radius - the old scale was 4 / 6 / 10 ------------------------------ */ --ktd-radius-sm: 8px; --ktd-radius-md: 10px; --ktd-radius-lg: 16px; --ktd-radius-xl: 24px; /* shell cards: sidebar, header, main tray */ /* -- Elevation - soft, wide, low-opacity (Soft UI / Kaiadmin / Horizon) -- */ --ktd-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06); --ktd-shadow-2: 0 2px 4px rgba(15, 23, 42, 0.05), 0 14px 32px rgba(15, 23, 42, 0.10); --ktd-shadow-3: 0 8px 16px rgba(15, 23, 42, 0.08), 0 24px 56px rgba(15, 23, 42, 0.18); --ktd-shadow-accent: 0 2px 4px rgba(3, 105, 161, 0.18), 0 6px 14px rgba(3, 105, 161, 0.22); --ktd-backdrop: rgba(15, 23, 42, 0.45); /* -- Type - one step up across the board --------------------------------- */ --ktd-fs-xs: 12px; /* table header, badge, group label */ --ktd-fs-sm: 13px; /* small button, helper text */ --ktd-fs-md: 14px; /* body, table cell, button */ --ktd-fs-lg: 15px; /* input text, modal body */ --ktd-fs-xl: 18px; /* modal title, brand */ --ktd-fs-2xl: 24px; /* page title */ --ktd-fs-card-title: 16px; --ktd-fs-stat: 28px; --ktd-lh-body: 1.5; /* -- Shell geometry ----------------------------------------------------- */ --ktd-gutter: 16px; /* gap between the screen edge and every shell card */ --ktd-side-w: 256px; --ktd-side-rail-w: 72px; --ktd-content-max: 1560px; /* widgets stop growing past this on very wide screens */ /* -- Sidebar ------------------------------------------------------------ */ /* The menu is a light card, the twin of the main tray beside it: same ground, same white edge, same shadow. These re-point the dark-sidebar tokens of ktd-tokens.css. */ --ktd-side-bg: var(--ktd-tray); --ktd-side-fg: var(--ktd-n-600); /* idle item, 6.9:1 on the tray */ --ktd-side-fg-hi: var(--ktd-n-900); /* brand, hovered item */ --ktd-side-hover: #E6ECF4; --ktd-side-border: var(--ktd-n-200); --ktd-side-active: var(--ktd-accent); /* filled pill, white text 5.9:1 */ --ktd-side-label: var(--ktd-n-500); /* group label, 4.4:1 at 12px bold caps */ --ktd-on-dark-link: #7DD3FC; /* accents on the dark sign-in ground */ /* -- Brand decoration ---------------------------------------------------- V2 lets the accent appear decoratively: the page-header band, the table header, the waves. The rule that protects the scoring screens is unchanged - the accent never means "correct" (the positive blue does) and never means "incorrect" (red does). */ --ktd-hero-bg: linear-gradient(115deg, #0F1F3D 0%, #0B4A7A 58%, #0369A1 100%); --ktd-select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748B'/%3E%3C/svg%3E"); --ktd-auth-bg: linear-gradient(160deg, #0B1730 0%, #0B3A63 55%, #0369A1 100%); /* sign-in pages */ --ktd-hero-fg: #FFFFFF; --ktd-hero-fg-2: rgba(255, 255, 255, 0.86); --ktd-hero-ink: #0B3F66; /* text on a white hero button, 10.6:1 */ --ktd-hero-glass: rgba(255, 255, 255, 0.14); --ktd-hero-glass-hi: rgba(255, 255, 255, 0.24); --ktd-hero-edge: rgba(255, 255, 255, 0.34); --ktd-hero-shadow: 0 2px 4px rgba(11, 74, 122, 0.12), 0 14px 32px rgba(11, 74, 122, 0.24); --ktd-card-head-bg: linear-gradient(180deg, #FFFFFF 0%, #F6F9FC 100%); --ktd-table-head-bg: linear-gradient(180deg, #EAF4FC 0%, #DCECF9 100%); --ktd-table-head-fg: #0B4A75; /* 7.9:1 on the header tint */ --ktd-table-head-rule: rgba(3, 105, 161, 0.30); --ktd-row-hover: #F1F8FD; /* Stat-tile icon fills and their glows. "positive" is the blue. */ --ktd-grad-accent: linear-gradient(135deg, #0284C7 0%, #075985 100%); --ktd-grad-accent-h: linear-gradient(90deg, #0369A1 0%, #38BDF8 100%); /* progress bars */ --ktd-glow-accent: 0 6px 14px rgba(3, 105, 161, 0.30); --ktd-grad-neutral: linear-gradient(135deg, #64748B 0%, #334155 100%); --ktd-grad-positive: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%); --ktd-grad-warning: linear-gradient(135deg, #F59E0B 0%, #B45309 100%); --ktd-grad-negative: linear-gradient(135deg, #EF4444 0%, #B91C1C 100%); --ktd-glow-neutral: 0 6px 14px rgba(51, 65, 85, 0.28); --ktd-glow-positive: 0 6px 14px rgba(29, 78, 216, 0.30); --ktd-glow-warning: 0 6px 14px rgba(180, 83, 9, 0.30); --ktd-glow-negative: 0 6px 14px rgba(185, 28, 28, 0.28); /* Leaderboard medals. Dark ink on all three: 8.9:1, 9.3:1 and 5.2:1. */ --ktd-medal-gold: #F6C445; --ktd-medal-silver: #CBD5E1; --ktd-medal-bronze: #D89B6A; --ktd-medal-ink: #3B2A0A; /* -- Waves --------------------------------------------------------------- Three seamless tiles (start and end share a height and a slope), drawn at 1200x120 and stretched by background-size. Images carry their own colours: the tray set is the accent on light, the hero set is white on dark. */ --ktd-wave-h: 190px; --ktd-wave-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60C200 10 400 10 600 60S1000 110 1200 60V120H0Z' fill='%230369A1' fill-opacity='.10'/%3E%3C/svg%3E"); --ktd-wave-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70C100 30 200 30 300 70S500 110 600 70S800 30 900 70S1100 110 1200 70V120H0Z' fill='%237DD3FC' fill-opacity='.18'/%3E%3C/svg%3E"); --ktd-wave-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60C150 100 450 100 600 60S1050 20 1200 60V120H0Z' fill='%230369A1' fill-opacity='.07'/%3E%3C/svg%3E"); --ktd-hero-wave-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60C200 10 400 10 600 60S1000 110 1200 60V120H0Z' fill='%23fff' fill-opacity='.07'/%3E%3C/svg%3E"); --ktd-hero-wave-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70C100 30 200 30 300 70S500 110 600 70S800 30 900 70S1100 110 1200 70V120H0Z' fill='%237DD3FC' fill-opacity='.14'/%3E%3C/svg%3E"); --ktd-hero-wave-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60C150 100 450 100 600 60S1050 20 1200 60V120H0Z' fill='%23fff' fill-opacity='.06'/%3E%3C/svg%3E"); /* -- Data-table rows - roomier than the Carbon defaults ------------------ */ --ktd-row-compact: 40px; --ktd-row-default: 48px; --ktd-row-tall: 56px; /* -- Chromosome groups A-G (Learn cards). Ink on its own tint is 4.5:1 or better. No red or green: those mean incorrect and (once) correct. --- */ --ktd-grp-a: #0369A1; --ktd-grp-a-bg: #E0F2FE; --ktd-grp-b: #4338CA; --ktd-grp-b-bg: #E0E7FF; --ktd-grp-c: #B45309; --ktd-grp-c-bg: #FEF3C7; --ktd-grp-d: #6D28D9; --ktd-grp-d-bg: #EDE9FE; --ktd-grp-e: #A21CAF; --ktd-grp-e-bg: #FAE8FF; --ktd-grp-f: #0E7490; --ktd-grp-f-bg: #CFFAFE; --ktd-grp-g: #475569; --ktd-grp-g-bg: #E2E8F0; }