/* ========================================================================== Jimble Design System — Colors & Type Importe este arquivo em qualquer HTML para ter a paleta e a tipografia prontas. Funciona em light e dark mode via classe `.dark` no . ========================================================================== */ /* ---------- Fonts ---------- DM Sans (variable) is the Jimble primary family — shipped as TTFs in /fonts. JetBrains Mono (via Google Fonts) is the monospace companion for plates, IDs, coordinates and numeric readouts. Swap at will if licensing dictates. ---------------------------------------------------------------------- */ @font-face { font-family: 'DM Sans'; src: url('fonts/DMSans-VariableFont_opsz_wght.ttf') format('truetype-variations'), url('fonts/DMSans-VariableFont_opsz_wght.ttf') format('truetype'); font-weight: 100 1000; font-stretch: 25% 151%; font-style: normal; font-display: swap; } @font-face { font-family: 'DM Sans'; src: url('fonts/DMSans-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'), url('fonts/DMSans-Italic-VariableFont_opsz_wght.ttf') format('truetype'); font-weight: 100 1000; font-stretch: 25% 151%; font-style: italic; font-display: swap; } @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ========================================================================== TOKENS — LIGHT (default) ========================================================================== */ :root { /* --- Font families --- */ --font-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace; --font-heading: var(--font-sans); /* --- Type scale (px values, use with rem as needed) --- */ --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 36px; --text-display: 48px; --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; /* --- Brand color primitives --- */ --jimble-green-50: oklch(0.97 0.04 145); --jimble-green-100: oklch(0.93 0.08 145); --jimble-green-200: oklch(0.87 0.12 145); --jimble-green-300: oklch(0.80 0.15 145); --jimble-green-400: oklch(0.76 0.17 145); --jimble-green-500: oklch(0.72 0.18 145); /* PRIMARY */ --jimble-green-600: oklch(0.64 0.17 145); --jimble-green-700: oklch(0.54 0.15 145); --jimble-green-800: oklch(0.42 0.12 145); --jimble-green-900: oklch(0.30 0.09 145); --jimble-green-950: oklch(0.20 0.06 145); /* Cool neutrals (very slight blue cast) */ --neutral-0: oklch(1 0 240); --neutral-50: oklch(0.985 0.003 240); --neutral-100: oklch(0.970 0.004 240); --neutral-150: oklch(0.955 0.005 240); --neutral-200: oklch(0.925 0.007 240); --neutral-300: oklch(0.870 0.009 240); --neutral-400: oklch(0.720 0.010 240); --neutral-500: oklch(0.560 0.010 240); --neutral-600: oklch(0.440 0.012 240); --neutral-700: oklch(0.325 0.012 240); --neutral-800: oklch(0.235 0.010 240); --neutral-850: oklch(0.195 0.010 240); --neutral-900: oklch(0.160 0.010 240); --neutral-950: oklch(0.105 0.012 240); /* --- Semantic colors --- */ --background: var(--neutral-0); --foreground: var(--neutral-900); --muted: var(--neutral-100); --muted-foreground: var(--neutral-500); --surface: var(--neutral-50); --surface-foreground:var(--neutral-700); --card: var(--neutral-0); --card-foreground: var(--neutral-900); --popover: var(--neutral-0); --popover-foreground:var(--neutral-900); --border: var(--neutral-200); --border-strong: var(--neutral-300); --input: var(--neutral-200); --primary: var(--jimble-green-500); --primary-hover: var(--jimble-green-600); --primary-foreground:var(--neutral-950); --primary-subtle: var(--jimble-green-50); --primary-subtle-fg: var(--jimble-green-800); --accent: var(--neutral-100); --accent-foreground: var(--neutral-900); --secondary: var(--neutral-100); --secondary-foreground: var(--neutral-800); --success: oklch(0.64 0.17 145); --success-subtle: oklch(0.95 0.05 145); --success-foreground:oklch(1 0 0); --warning: oklch(0.72 0.16 75); --warning-subtle: oklch(0.96 0.05 75); --warning-foreground:oklch(0.20 0.05 75); --destructive: oklch(0.58 0.22 25); --destructive-subtle:oklch(0.96 0.04 25); --destructive-foreground: oklch(1 0 0); --info: oklch(0.60 0.16 240); --info-subtle: oklch(0.96 0.04 240); --info-foreground: oklch(1 0 0); --ring: oklch(0.72 0.18 145 / 0.45); --selection: var(--jimble-green-200); --selection-foreground: var(--jimble-green-900); /* --- Sidebar --- */ --sidebar: var(--neutral-50); --sidebar-foreground: var(--neutral-700); --sidebar-muted: var(--neutral-500); --sidebar-item-hover: var(--neutral-100); --sidebar-item-active: var(--neutral-0); --sidebar-item-active-border: var(--border); --sidebar-border: var(--border); /* --- Chart palettes (default) --- */ --chart-1: oklch(0.68 0.17 145); /* green */ --chart-2: oklch(0.62 0.18 240); /* blue */ --chart-3: oklch(0.72 0.16 75); /* amber */ --chart-4: oklch(0.60 0.20 300); /* purple */ --chart-5: oklch(0.62 0.20 15); /* red-orange */ /* --- Map colors --- */ --map-bg: var(--neutral-100); --map-land: var(--neutral-150); --map-water: oklch(0.90 0.03 230); --map-road: var(--neutral-0); --map-road-major: var(--neutral-200); --map-label: var(--neutral-600); --map-park: oklch(0.93 0.06 145); /* Live/moving vehicle marker */ --marker-live: var(--primary); --marker-idle: var(--neutral-400); --marker-alert: var(--destructive); --marker-offline: var(--neutral-500); /* --- Radii --- */ --radius-xs: 2px; --radius-sm: 3px; --radius: 6px; /* base */ --radius-md: 5px; /* kept for shadcn parity */ --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px; /* --- Spacing (4pt grid) --- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* --- Shadows (light) --- */ --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.04); --shadow-sm: 0 1px 3px 0 oklch(0 0 0 / 0.06), 0 1px 2px -1px oklch(0 0 0 / 0.04); --shadow-md: 0 4px 12px -2px oklch(0 0 0 / 0.08), 0 2px 4px -2px oklch(0 0 0 / 0.04); --shadow-lg: 0 12px 32px -8px oklch(0 0 0 / 0.16), 0 4px 8px -4px oklch(0 0 0 / 0.06); --shadow-xl: 0 24px 48px -12px oklch(0 0 0 / 0.20); --shadow-inset: inset 0 1px 2px 0 oklch(0 0 0 / 0.04); --shadow-ring-primary: 0 0 0 2px var(--background), 0 0 0 4px var(--ring); /* --- Motion --- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.55, 0, 0.75, 0.12); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 320ms; /* --- Layout constants --- */ --sidebar-width: 240px; --sidebar-width-collapsed: 56px; --header-height: 56px; } /* ========================================================================== TOKENS — DARK ========================================================================== */ .dark { --background: var(--neutral-900); --foreground: var(--neutral-50); --muted: var(--neutral-800); --muted-foreground: var(--neutral-400); --surface: var(--neutral-850); --surface-foreground:var(--neutral-300); --card: var(--neutral-850); --card-foreground: var(--neutral-50); --popover: var(--neutral-800); --popover-foreground:var(--neutral-50); --border: oklch(1 0 0 / 0.08); --border-strong: oklch(1 0 0 / 0.16); --input: oklch(1 0 0 / 0.10); --primary: var(--jimble-green-400); --primary-hover: var(--jimble-green-300); --primary-foreground:var(--neutral-950); --primary-subtle: oklch(0.25 0.08 145); --primary-subtle-fg: var(--jimble-green-300); --accent: var(--neutral-800); --accent-foreground: var(--neutral-50); --secondary: var(--neutral-800); --secondary-foreground: var(--neutral-100); --success: var(--jimble-green-400); --success-subtle: oklch(0.25 0.08 145); --success-foreground:var(--neutral-950); --warning: oklch(0.78 0.15 75); --warning-subtle: oklch(0.28 0.08 75); --warning-foreground:oklch(0.98 0.01 75); --destructive: oklch(0.68 0.20 25); --destructive-subtle:oklch(0.28 0.10 25); --destructive-foreground: oklch(1 0 0); --info: oklch(0.72 0.16 240); --info-subtle: oklch(0.26 0.09 240); --info-foreground: oklch(1 0 0); --ring: oklch(0.76 0.17 145 / 0.55); --selection: oklch(0.40 0.12 145); --selection-foreground: var(--neutral-50); --sidebar: var(--neutral-950); --sidebar-foreground: var(--neutral-200); --sidebar-muted: var(--neutral-500); --sidebar-item-hover: var(--neutral-850); --sidebar-item-active: var(--neutral-800); --sidebar-item-active-border: oklch(1 0 0 / 0.08); --sidebar-border: oklch(1 0 0 / 0.06); /* Charts — slightly lighter to read on dark bg */ --chart-1: oklch(0.76 0.17 145); --chart-2: oklch(0.72 0.17 240); --chart-3: oklch(0.80 0.15 75); --chart-4: oklch(0.70 0.19 300); --chart-5: oklch(0.72 0.19 15); --map-bg: var(--neutral-900); --map-land: var(--neutral-850); --map-water: oklch(0.25 0.04 230); --map-road: var(--neutral-700); --map-road-major: var(--neutral-600); --map-label: var(--neutral-300); --map-park: oklch(0.25 0.05 145); --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.40); --shadow-sm: 0 1px 3px 0 oklch(0 0 0 / 0.45), 0 1px 2px -1px oklch(0 0 0 / 0.35); --shadow-md: 0 4px 12px -2px oklch(0 0 0 / 0.50), 0 2px 4px -2px oklch(0 0 0 / 0.35); --shadow-lg: 0 12px 32px -8px oklch(0 0 0 / 0.60), 0 4px 8px -4px oklch(0 0 0 / 0.40); --shadow-xl: 0 24px 48px -12px oklch(0 0 0 / 0.65); } /* ========================================================================== CHART PALETTE VARIANTS (accessibility) Apply class to the chart container: .palette-deuter, .palette-trit, .palette-mono Okabe-Ito base, adjusted to oklch. ========================================================================== */ .palette-deuter { --chart-1: oklch(0.62 0.16 50); /* vermillion */ --chart-2: oklch(0.65 0.14 220); /* sky-blue */ --chart-3: oklch(0.82 0.17 90); /* yellow */ --chart-4: oklch(0.58 0.13 200); /* blue */ --chart-5: oklch(0.60 0.18 340); /* reddish-purple */ } .palette-trit { --chart-1: oklch(0.62 0.22 25); /* red */ --chart-2: oklch(0.70 0.18 170); /* teal */ --chart-3: oklch(0.78 0.15 85); /* gold */ --chart-4: oklch(0.55 0.14 290); /* indigo */ --chart-5: oklch(0.40 0.05 240); /* charcoal */ } .palette-mono { --chart-1: oklch(0.20 0.01 240); --chart-2: oklch(0.38 0.01 240); --chart-3: oklch(0.56 0.01 240); --chart-4: oklch(0.72 0.01 240); --chart-5: oklch(0.86 0.01 240); } .dark .palette-mono { --chart-1: oklch(0.98 0.01 240); --chart-2: oklch(0.84 0.01 240); --chart-3: oklch(0.68 0.01 240); --chart-4: oklch(0.52 0.01 240); --chart-5: oklch(0.36 0.01 240); } /* ========================================================================== BASE TYPE STYLES — use as utility classes OR on semantic elements ========================================================================== */ .jimble-body, body.jimble { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--foreground); background: var(--background); font-feature-settings: "ss01", "ss02", "cv11"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .jimble h1, .jimble-h1 { font-family: var(--font-heading); font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-weight: 600; color: var(--foreground); } .jimble h2, .jimble-h2 { font-family: var(--font-heading); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-weight: 600; } .jimble h3, .jimble-h3 { font-size: var(--text-xl); line-height: var(--leading-snug); font-weight: 600; } .jimble h4, .jimble-h4 { font-size: var(--text-lg); line-height: var(--leading-snug); font-weight: 600; } .jimble h5, .jimble-h5 { font-size: var(--text-md); line-height: var(--leading-snug); font-weight: 600; } .jimble-eyebrow { font-size: var(--text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--muted-foreground); } .jimble-caption, .jimble small, .jimble .caption { font-size: var(--text-xs); color: var(--muted-foreground); line-height: var(--leading-snug); } .jimble-mono, .jimble code, .jimble .mono { font-family: var(--font-mono); font-feature-settings: "tnum", "zero"; font-variant-numeric: tabular-nums; font-size: 0.95em; } .jimble .num, .jimble-num { font-variant-numeric: tabular-nums; } .jimble-display { font-family: var(--font-heading); font-size: var(--text-display); line-height: 1.05; letter-spacing: -0.03em; font-weight: 700; } /* ========================================================================== LIVE PULSE — used on real-time status dots ========================================================================== */ @keyframes jimble-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--primary); } 50% { box-shadow: 0 0 0 6px oklch(0.72 0.18 145 / 0); } } .jimble-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--primary); animation: jimble-pulse 1.6s var(--ease-out) infinite; } @media (prefers-reduced-motion: reduce) { .jimble-live-dot { animation: none; box-shadow: 0 0 0 3px oklch(0.72 0.18 145 / 0.25); } }