/* ────────────────────────────────────────────────────────────────────── Moonkey design tokens ────────────────────────────────────────────────────────────────────── Single source of truth for brand colors, neutrals, radii, shadows, typography rhythm, layout dimensions and motion timings. These tokens describe the existing visual language verbatim — adopting them in a new declaration must not produce a visual change. Any color/value that recurs across more than two files belongs here, not inlined. New work should consume `var(--mk-*)` exclusively. Loaded BEFORE `style.css` and every Vue scoped block, so any declaration in the cascade can read these values without an import. ──────────────────────────────────────────────────────────────────── */ :root { /* ── Brand ─────────────────────────────────────────────────────── */ --mk-navy: rgb(0, 73, 118); --mk-navy-rgb: 0, 73, 118; --mk-navy-soft: rgba(0, 73, 118, 0.04); --mk-navy-tint: rgba(0, 73, 118, 0.08); --mk-navy-mute: rgba(0, 73, 118, 0.18); --mk-navy-line: rgba(0, 73, 118, 0.35); --mk-navy-deep: rgb(0, 56, 92); --mk-navy-darker: rgb(0, 47, 76); --mk-navy-darkest: rgb(0, 31, 51); --mk-navy-bright: rgb(0, 113, 161); --mk-orange: rgb(255, 105, 0); --mk-orange-rgb: 255, 105, 0; --mk-orange-soft: rgba(255, 105, 0, 0.08); --mk-orange-mute: rgba(255, 105, 0, 0.18); --mk-orange-line: rgba(255, 105, 0, 0.30); /* ── Surfaces ──────────────────────────────────────────────────── */ --mk-surface: #ffffff; --mk-surface-raised: #ffffff; --mk-surface-sunken: #fbfdff; --mk-bg-app: #f5f6f9; --mk-bg-muted: #f8fafc; --mk-bg-subtle: #f4f6f9; --mk-bg-breadcrumb: #f8f9fa; /* ── Text ──────────────────────────────────────────────────────── */ --mk-text-strong: #0f172a; --mk-text-body: #1e293b; --mk-text-default: #334155; --mk-text-soft: #475569; --mk-text-muted: #64748b; --mk-text-fainter: #94a3b8; --mk-text-disabled: #a0aec0; --mk-text-inverse: #ffffff; --mk-text-inverse-soft: rgba(255, 255, 255, 0.85); --mk-text-inverse-muted: rgba(255, 255, 255, 0.65); /* ── Borders ───────────────────────────────────────────────────── */ --mk-border-subtle: #edf2f7; --mk-border-default: #e2e8f0; --mk-border-strong: #cbd5e1; --mk-border-legacy: #dddde5; --mk-divider: rgba(15, 23, 42, 0.08); /* ── Semantic ──────────────────────────────────────────────────── */ --mk-success: #047857; --mk-success-bg: rgba(4, 120, 87, 0.10); --mk-success-border: rgba(4, 120, 87, 0.25); --mk-success-chip-bg: #ecfdf5; --mk-success-chip-border: #a7f3d0; --mk-success-chip-text: #065f46; --mk-warning: #b45309; --mk-warning-strong: #d97706; --mk-warning-bg: #fffbea; --mk-warning-border: #fde68a; --mk-warning-text: #92580f; --mk-danger: #b91c1c; --mk-danger-strong: #dc2626; --mk-danger-bg: #fef2f2; --mk-danger-border: #fcd0cc; --mk-danger-soft: #fff5f5; --mk-info: var(--mk-navy); --mk-info-bg: #f0f7ff; /* ── Radii ─────────────────────────────────────────────────────── */ --mk-radius-sm: 4px; --mk-radius-md: 6px; --mk-radius-lg: 8px; --mk-radius-xl: 10px; --mk-radius-2xl: 12px; --mk-radius-3xl: 14px; --mk-radius-pill: 999px; /* ── Shadows ───────────────────────────────────────────────────── */ --mk-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --mk-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --mk-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); --mk-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12); --mk-shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.15); --mk-shadow-sticky: 0 2px 8px rgba(15, 23, 42, 0.06); --mk-shadow-popover: 0 8px 24px rgba(15, 23, 42, 0.12); /* ── Focus rings ───────────────────────────────────────────────── */ --mk-focus-ring: 0 0 0 3px rgba(0, 73, 118, 0.22); --mk-focus-ring-orange: 0 0 0 3px rgba(255, 105, 0, 0.28); --mk-focus-ring-danger: 0 0 0 3px rgba(185, 28, 28, 0.22); /* ── Typography ────────────────────────────────────────────────── */ --mk-font-base: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --mk-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --mk-text-2xs: 0.68rem; --mk-text-xs: 0.72rem; --mk-text-sm: 0.78rem; --mk-text-base: 0.85rem; --mk-text-md: 0.92rem; --mk-text-lg: 1.05rem; --mk-text-xl: 1.25rem; --mk-text-2xl: 1.4rem; --mk-leading-tight: 1.2; --mk-leading-snug: 1.35; --mk-leading-normal: 1.5; --mk-tracking-wide: 0.06em; --mk-tracking-eyebrow: 0.14em; --mk-weight-regular: 400; --mk-weight-medium: 500; --mk-weight-semibold: 600; --mk-weight-bold: 700; /* ── Spacing scale ─────────────────────────────────────────────── */ --mk-space-0: 0; --mk-space-1: 0.25rem; --mk-space-2: 0.5rem; --mk-space-3: 0.75rem; --mk-space-4: 1rem; --mk-space-5: 1.25rem; --mk-space-6: 1.5rem; --mk-space-8: 2rem; /* ── Layout ────────────────────────────────────────────────────── */ --mk-sidebar-width: 340px; --mk-sidebar-collapsed-width: 56px; --mk-input-height: 36px; /* App.vue still defines --app-breadcrumb-height on .app-content for legacy compatibility; this token mirrors it so new declarations can reach the same value without crossing scoped boundaries. */ --mk-breadcrumb-height: 50px; /* ── Motion ────────────────────────────────────────────────────── */ --mk-duration-fast: 120ms; --mk-duration-base: 150ms; --mk-duration-slow: 220ms; --mk-ease: cubic-bezier(0.4, 0, 0.2, 1); --mk-transition-fast: var(--mk-duration-fast) var(--mk-ease); --mk-transition-base: var(--mk-duration-base) var(--mk-ease); --mk-transition-slow: var(--mk-duration-slow) var(--mk-ease); /* ── Brand gradients ───────────────────────────────────────────── */ --mk-gradient-navy: linear-gradient( 180deg, rgb(0, 56, 92) 0%, rgb(0, 73, 118) 60%, rgb(0, 47, 76) 100% ); --mk-gradient-login: linear-gradient( 150deg, rgb(0, 31, 51) 0%, rgb(0, 56, 92) 55%, rgb(0, 39, 64) 100% ); /* ── Legacy alias (kept for the input-height variable referenced directly in style.css) ──────────────────────────────────────── */ --moon-input-height: var(--mk-input-height); }