/* ============================================================================= HALO Ai — DESIGN TOKENS Shared across all .dev tool sites. Aligned with gohalo.ai brand DNA, optimized for light-mode utility tools. ============================================================================= */ :root { /* --------------------------------------------------------------------------- COLOR — CORE PALETTE Source of truth. Never use raw hex outside of this file. --------------------------------------------------------------------------- */ /* Brand Petrol Navy (primary dark — #063849) */ --color-navy-950: #031E27; /* deepest — footer bg */ --color-navy-900: #063849; /* ✦ BRAND NAVY — nav, dark sections */ --color-navy-800: #0A4D62; /* card borders on dark */ --color-navy-700: #0F6480; /* secondary dark surface */ --color-navy-600: #157DA0; /* hover states on dark */ /* Brand Green (primary accent — #66db82) */ --color-green-500: #66DB82; /* ✦ BRAND GREEN — primary CTA, highlights */ --color-green-400: #82E499; /* hover state */ --color-green-300: #A8EEB8; /* muted/light accents */ --color-green-100: #E6FAE9; /* green tint surface */ --color-green-50: #F3FDF5; /* barely-there tint */ /* Legacy alias — keeps component CSS working without a rename */ --color-teal-500: var(--color-green-500); --color-teal-400: var(--color-green-400); --color-teal-300: var(--color-green-300); --color-teal-100: var(--color-green-100); --color-teal-50: var(--color-green-50); /* Neutral (light-mode UI) */ --color-white: #FFFFFF; --color-gray-50: #F8FAFC; /* page background */ --color-gray-100: #F1F4F8; /* card surface */ --color-gray-200: #E2E8F0; /* dividers, borders */ --color-gray-300: #CBD5E1; /* disabled states */ --color-gray-400: #94A3B8; /* placeholder text */ --color-gray-500: #64748B; /* body text secondary */ --color-gray-700: #334155; /* body text primary */ --color-gray-900: #0F172A; /* headings */ /* Semantic */ --color-success: #10B981; --color-warning: #F59E0B; --color-danger: #EF4444; --color-info: var(--color-teal-500); /* --------------------------------------------------------------------------- COLOR — SEMANTIC ALIASES Use these in components, not raw palette tokens. --------------------------------------------------------------------------- */ --bg-page: var(--color-gray-50); --bg-surface: var(--color-white); --bg-surface-raised:var(--color-white); --bg-subtle: var(--color-gray-100); --bg-nav: var(--color-navy-900); --bg-footer: var(--color-navy-950); --text-primary: var(--color-gray-900); --text-secondary: var(--color-gray-500); --text-muted: var(--color-gray-400); --text-on-dark: var(--color-white); --text-on-dark-muted: rgba(255,255,255,0.6); --text-accent: var(--color-teal-500); --border-default: var(--color-gray-200); --border-strong: var(--color-gray-300); --border-accent: var(--color-teal-500); --accent-primary: var(--color-teal-500); --accent-hover: var(--color-teal-400); /* --------------------------------------------------------------------------- TYPOGRAPHY --------------------------------------------------------------------------- */ --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; /* Scale — fluid-compatible fixed steps */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ /* Weight */ --font-regular: 400; --font-medium: 500; --font-semibold:600; --font-bold: 700; /* Leading */ --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed:1.625; /* Tracking */ --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.04em; --tracking-widest: 0.12em; /* --------------------------------------------------------------------------- SPACING Base unit: 8px. All values are multiples. --------------------------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* Layout */ --container-max: 1100px; --container-narrow: 720px; --container-padding: var(--space-6); /* Section rhythm */ --section-padding-y: var(--space-20); /* --------------------------------------------------------------------------- BORDERS & RADIUS --------------------------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; --border-width: 1px; --border-width-2: 2px; /* The signature top-border accent on tool pages */ --tool-accent-bar: 3px solid var(--accent-primary); /* --------------------------------------------------------------------------- SHADOWS --------------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(8,14,26,0.06); --shadow-sm: 0 1px 4px rgba(8,14,26,0.08), 0 0 1px rgba(8,14,26,0.04); --shadow-md: 0 4px 12px rgba(8,14,26,0.10), 0 1px 3px rgba(8,14,26,0.06); --shadow-lg: 0 12px 32px rgba(8,14,26,0.12), 0 2px 8px rgba(8,14,26,0.06); --shadow-xl: 0 24px 48px rgba(8,14,26,0.14), 0 4px 12px rgba(8,14,26,0.08); /* Green glow — used on hover states and active badges */ --shadow-teal: 0 0 0 3px rgba(102,219,130,0.25); /* --------------------------------------------------------------------------- TRANSITIONS --------------------------------------------------------------------------- */ --transition-fast: 100ms ease; --transition-base: 200ms ease; --transition-slow: 350ms ease; --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1); /* --------------------------------------------------------------------------- Z-INDEX SCALE --------------------------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-overlay: 100; --z-nav: 200; --z-modal: 300; --z-toast: 400; } /* ============================================================================= BASE RESET & GLOBALS Apply to all tool pages via a shared stylesheet or inline in each HTML file. ============================================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--font-regular); line-height: var(--leading-normal); color: var(--text-primary); background-color: var(--bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { display: block; max-width: 100%; } a { color: var(--accent-primary); text-decoration: none; } a:hover { color: var(--accent-hover); }