/* ───────────────────────────────────────────────────────────────────────── * Diverse CTI · Design Tokens * Single source of truth for color, type, radius, spacing, and elevation. * Light mode = Haven · Graphite. Dark mode = Haven Dark. * * Switch modes: * (default) * * * Every component in components.css reads from these variables. Do not * hard-code colors in app code — extend the token set instead. * ───────────────────────────────────────────────────────────────────────── */ :root, [data-theme="light"] { /* ── Surfaces ─────────────────────────────────────────────────────── */ --dcti-bg: #F4F4F5; /* page background */ --dcti-surface: #FFFFFF; /* cards, panels */ --dcti-surface-2: #E4E4E7; /* nested panels, hovered rows */ --dcti-border: #D4D4D8; /* default dividers */ --dcti-border-strong: #71717A; /* focus rings, emphasized borders */ --dcti-overlay: rgba(9, 9, 11, 0.5); /* modal scrim */ /* ── Text hierarchy ───────────────────────────────────────────────── */ --dcti-text: #09090B; --dcti-text-muted: #3F3F46; --dcti-text-faint: #71717A; --dcti-text-inverse: #FFFFFF; /* ── Brand & accent ───────────────────────────────────────────────── */ --dcti-brand: #18181B; /* near-black anchor */ --dcti-brand-navy: #0F1F3D; /* DCTI logo navy — reserved for logo/brand surfaces */ --dcti-accent: #4A90BD; /* Haven blue */ --dcti-accent-hover: #3578A3; --dcti-accent-muted: rgba(74, 144, 189, 0.14); /* tinted backgrounds */ --dcti-accent-border: rgba(74, 144, 189, 0.30); --dcti-on-accent: #FFFFFF; /* text/icons over --dcti-accent */ /* ── Semantic / status ────────────────────────────────────────────── */ --dcti-success: #0F9E6F; --dcti-success-muted: rgba(15, 158, 111, 0.14); --dcti-success-border: rgba(15, 158, 111, 0.30); --dcti-warn: #C28A4B; --dcti-warn-muted: rgba(194, 138, 75, 0.18); --dcti-warn-border: rgba(194, 138, 75, 0.32); --dcti-danger: #C4625F; --dcti-danger-muted: rgba(196, 98, 95, 0.14); --dcti-danger-border: rgba(196, 98, 95, 0.30); --dcti-info: #4A90BD; --dcti-info-muted: rgba(74, 144, 189, 0.14); --dcti-info-border: rgba(74, 144, 189, 0.30); /* ── Data viz palette ─────────────────────────────────────────────── */ --dcti-chart-1: #4A90BD; --dcti-chart-2: #18181B; --dcti-chart-3: #0D9488; --dcti-chart-4: #D97706; --dcti-chart-5: #C4625F; --dcti-chart-6: #71717A; /* ── Elevation (shadow scale) ─────────────────────────────────────── */ --dcti-shadow-sm: 0 1px 2px rgba(9, 9, 11, 0.06); --dcti-shadow-md: 0 1px 3px rgba(9, 9, 11, 0.08), 0 4px 12px rgba(9, 9, 11, 0.06); --dcti-shadow-lg: 0 8px 24px rgba(9, 9, 11, 0.10), 0 2px 6px rgba(9, 9, 11, 0.06); /* ── Focus ring ───────────────────────────────────────────────────── */ --dcti-focus-ring: 0 0 0 3px rgba(74, 144, 189, 0.35); } [data-theme="dark"] { /* ── Surfaces ─────────────────────────────────────────────────────── */ --dcti-bg: #1B1F26; --dcti-surface: #252A33; --dcti-surface-2: #2F3541; --dcti-border: #3B424F; --dcti-border-strong: #525B6B; --dcti-overlay: rgba(0, 0, 0, 0.6); /* ── Text hierarchy ───────────────────────────────────────────────── */ --dcti-text: #F5F1EA; --dcti-text-muted: #B5B0A6; --dcti-text-faint: #7A7770; --dcti-text-inverse: #18181B; /* ── Brand & accent ───────────────────────────────────────────────── */ --dcti-brand: #F5F1EA; --dcti-brand-navy: #0F1F3D; --dcti-accent: #7AB5DA; --dcti-accent-hover: #94C5E3; --dcti-accent-muted: rgba(122, 181, 218, 0.16); --dcti-accent-border: rgba(122, 181, 218, 0.32); --dcti-on-accent: #1B1F26; /* ── Semantic / status ────────────────────────────────────────────── */ --dcti-success: #7FB89A; --dcti-success-muted: rgba(127, 184, 154, 0.16); --dcti-success-border: rgba(127, 184, 154, 0.32); --dcti-warn: #E0AC76; --dcti-warn-muted: rgba(224, 172, 118, 0.16); --dcti-warn-border: rgba(224, 172, 118, 0.32); --dcti-danger: #D88582; --dcti-danger-muted: rgba(216, 133, 130, 0.16); --dcti-danger-border: rgba(216, 133, 130, 0.32); --dcti-info: #7AB5DA; --dcti-info-muted: rgba(122, 181, 218, 0.16); --dcti-info-border: rgba(122, 181, 218, 0.32); /* ── Data viz palette ─────────────────────────────────────────────── */ --dcti-chart-1: #7AB5DA; --dcti-chart-2: #F5F1EA; --dcti-chart-3: #7FB89A; --dcti-chart-4: #E0AC76; --dcti-chart-5: #D88582; --dcti-chart-6: #B5B0A6; /* ── Elevation ────────────────────────────────────────────────────── */ --dcti-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --dcti-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.35); --dcti-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.40); --dcti-focus-ring: 0 0 0 3px rgba(122, 181, 218, 0.40); } /* ───────────────────────────────────────────────────────────────────── * Mode-invariant tokens — same in light + dark. * ───────────────────────────────────────────────────────────────────── */ :root { /* ── Type stack ───────────────────────────────────────────────────── */ --dcti-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --dcti-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Brand display fonts — reserve for hero / marketing surfaces */ --dcti-font-display: "Porter", "Inter", sans-serif; --dcti-font-brand: "Vector", "Inter", sans-serif; /* ── Type scale (px) — sized for regular density ──────────────────── */ --dcti-text-xs: 11px; /* mono captions, badges */ --dcti-text-sm: 12px; /* helper text, table cells */ --dcti-text-md: 14px; /* body default */ --dcti-text-lg: 16px; /* emphasised body */ --dcti-text-xl: 20px; /* section heading */ --dcti-text-2xl: 28px; /* page heading */ --dcti-text-3xl: 40px; /* hero / display */ /* ── Line heights ─────────────────────────────────────────────────── */ --dcti-leading-tight: 1.2; --dcti-leading-snug: 1.35; --dcti-leading-normal: 1.5; --dcti-leading-loose: 1.7; /* ── Letter spacing ───────────────────────────────────────────────── */ --dcti-tracking-tight: -0.02em; /* large display */ --dcti-tracking-normal: 0; --dcti-tracking-wide: 0.08em; /* uppercase eyebrows */ /* ── Radius scale (crisp) ─────────────────────────────────────────── */ --dcti-radius-none: 0; --dcti-radius-sm: 3px; /* inputs, small buttons */ --dcti-radius-md: 6px; /* default — buttons, fields, cards */ --dcti-radius-lg: 9px; /* large cards, modals */ --dcti-radius-pill: 999px; /* badges, toggles */ /* ── Spacing scale (px) — 4pt grid ────────────────────────────────── */ --dcti-space-1: 4px; --dcti-space-2: 8px; --dcti-space-3: 12px; --dcti-space-4: 16px; --dcti-space-5: 20px; --dcti-space-6: 24px; --dcti-space-8: 32px; --dcti-space-10: 40px; --dcti-space-12: 48px; /* ── Control heights (regular density baseline) ───────────────────── */ --dcti-control-sm: 28px; --dcti-control-md: 34px; /* default */ --dcti-control-lg: 40px; /* ── Layout primitives ────────────────────────────────────────────── */ --dcti-sidebar-w: 248px; --dcti-topbar-h: 56px; --dcti-container: 1280px; /* ── Motion ───────────────────────────────────────────────────────── */ --dcti-duration-fast: 120ms; --dcti-duration-base: 180ms; --dcti-duration-slow: 260ms; --dcti-ease: cubic-bezier(0.2, 0.7, 0.3, 1); /* ── z-index scale ────────────────────────────────────────────────── */ --dcti-z-base: 1; --dcti-z-sticky: 100; --dcti-z-overlay: 200; --dcti-z-modal: 300; --dcti-z-toast: 400; }