/* ============================================================ THE EASY WAY โ€” Design System ยท tokens GENERATED from tokens/tokens.json by build/build.mjs โ€” DO NOT EDIT. Layer: brand + product ------------------------------------------------------------ The brand + neutral SCALES are identical in light and dark ("Easy Blue" is #048CCB in both modes); only the SEMANTIC roles remap. Dark is activated by a `.dark` class or [data-theme="dark"] on a parent โ€” Filament toggles `class="dark"` on . ============================================================ */ :root { --tew-blue-50: #E8F5FB; --tew-blue-100: #C6E8F6; --tew-blue-200: #93D4EE; --tew-blue-300: #5FBFE6; --tew-blue-400: #2BA6D9; --tew-blue-500: #048CCB; --tew-blue-600: #0A78AE; --tew-blue-700: #0B5E87; --tew-blue-800: #0B4A6B; --tew-blue-900: #0B3A53; --tew-green-50: #F0F8E9; --tew-green-100: #DCEFC9; --tew-green-200: #C0E29F; --tew-green-300: #A6D67E; --tew-green-400: #8DC95F; --tew-green-500: #73BE45; --tew-green-600: #5DA336; --tew-green-700: #46802A; --tew-green-800: #35621F; --tew-coral-400: #F47C76; --tew-coral-500: #EE5A52; --tew-coral-600: #D64540; --tew-coral-700: #BE2F2E; --tew-coral-800: #A7131A; --tew-gray-50: #F7F9FA; --tew-gray-100: #F0F3F5; --tew-gray-200: #E2E8EB; --tew-gray-300: #C5CED3; --tew-gray-400: #9FACB4; --tew-gray-500: #7C8B94; --tew-gray-600: #5A6B75; --tew-gray-700: #3C4A53; --tew-gray-800: #25323A; --tew-gray-900: #16242E; --tew-gray-white: #FFFFFF; --tew-amber-400: #F0B860; --tew-amber-500: #E8A33D; --tew-amber-600: #B67616; --tew-color-bg: #FFFFFF; --tew-color-bg-subtle: #F7F9FA; --tew-color-bg-muted: #F0F3F5; --tew-color-surface: #FFFFFF; --tew-color-surface-dark: #0B3A53; --tew-color-text: #16242E; --tew-color-text-muted: #3C4A53; --tew-color-text-subtle: #5A6B75; --tew-color-text-on-dark: #FFFFFF; --tew-color-text-on-brand: #FFFFFF; --tew-color-primary: #048CCB; --tew-color-primary-hover: #0A78AE; --tew-color-primary-active: #0B5E87; --tew-color-secondary: #73BE45; --tew-color-secondary-hover: #5DA336; --tew-color-accent: #EE5A52; --tew-color-border: #E2E8EB; --tew-color-border-strong: #C5CED3; --tew-color-focus-ring: #048CCB; --tew-color-link: #0A78AE; --tew-color-link-hover: #0B5E87; --tew-color-success: #5DA336; --tew-color-success-bg: #F0F8E9; --tew-color-info: #048CCB; --tew-color-info-bg: #E8F5FB; --tew-color-warning: #B67616; --tew-color-warning-bg: #FCF3E3; --tew-color-danger: #D64540; --tew-color-danger-bg: #FCEBEA; --tew-color-success-text: #46802A; --tew-color-info-text: #0A78AE; --tew-color-danger-text: #BE2F2E; --tew-color-primary-solid: #0B5E87; --tew-color-on-primary-solid: #FFFFFF; --tew-color-success-solid: #46802A; --tew-color-on-success-solid: #FFFFFF; --tew-color-warning-solid: #E8A33D; --tew-color-on-warning-solid: #16242E; --tew-color-danger-solid: #BE2F2E; --tew-color-on-danger-solid: #FFFFFF; --tew-gradient-brand: linear-gradient(100deg, #048CCB 0%, #73BE45 100%); --tew-gradient-brand-soft: linear-gradient(100deg, #E8F5FB 0%, #F0F8E9 100%); --tew-font-display: 'Quicksand', system-ui, sans-serif; --tew-font-display-condensed: 'Georama', 'Arial Narrow', sans-serif; --tew-font-sans: 'Mulish', system-ui, -apple-system, sans-serif; --tew-font-serif: 'Charis SIL', Charter, Georgia, serif; --tew-font-mono: 'IBM Plex Mono', ui-monospace, monospace; --tew-text-display: 3.5rem; --tew-text-h1: 2.5rem; --tew-text-h2: 2rem; --tew-text-h3: 1.5rem; --tew-text-h4: 1.25rem; --tew-text-h5: 1rem; --tew-text-body-lg: 1.125rem; --tew-text-body: 1rem; --tew-text-sm: 0.875rem; --tew-text-caption: 0.8125rem; --tew-text-overline: 0.75rem; --tew-leading-tight: 1.1; --tew-leading-heading: 1.18; --tew-leading-snug: 1.4; --tew-leading-body: 1.6; --tew-tracking-tight: -0.02em; --tew-tracking-normal: 0; --tew-tracking-wide: 0.04em; --tew-tracking-overline: 0.12em; --tew-space-1: 0.25rem; --tew-space-2: 0.5rem; --tew-space-3: 0.75rem; --tew-space-4: 1rem; --tew-space-5: 1.5rem; --tew-space-6: 2rem; --tew-space-7: 3rem; --tew-space-8: 4rem; --tew-space-9: 6rem; --tew-radius-sm: 6px; --tew-radius-md: 10px; --tew-radius-lg: 16px; --tew-radius-xl: 24px; --tew-radius-pill: 999px; --tew-shadow-sm: 0 1px 2px rgba(11,58,83,.06), 0 1px 1px rgba(11,58,83,.04); --tew-shadow-md: 0 4px 16px rgba(11,58,83,.08), 0 1px 3px rgba(11,58,83,.06); --tew-shadow-lg: 0 12px 32px rgba(11,58,83,.12), 0 4px 8px rgba(11,58,83,.06); --tew-ease-out: cubic-bezier(.22,.61,.36,1); --tew-ease-in-out: cubic-bezier(.45,0,.25,1); --tew-dur-fast: 120ms; --tew-dur-base: 200ms; --tew-dur-slow: 320ms; --tew-shadow-focus: 0 0 0 3px var(--tew-color-focus-ring); --tew-chart-1: #048CCB; --tew-chart-2: #57A032; --tew-chart-3: #9B6BE0; --tew-chart-4: #D9762B; --tew-chart-5: #149C8F; --tew-chart-6: #6B7CE8; --tew-chart-7: #E060A0; --tew-chart-8: #B88A28; --tew-state-organic: #149C8F; --tew-state-paid: #9B6BE0; --tew-state-owned: #048CCB; --tew-state-competitor: #D9762B; --tew-density-row-y: 0.625rem; --tew-density-row-x: 0.75rem; --tew-density-cell-gap: 0.5rem; --tew-density-section-gap: 1rem; --tew-density-control-h: 2rem; --tew-media-scrim-video: #000000; --tew-media-scrim-audio: #16242E; --tew-media-scrim-document: #0B3A53; --tew-media-scrim-on: #FFFFFF; --tew-media-overlay-opacity: 0.6; --tew-media-tile-radius: 10px; --tew-media-tile-placeholder: var(--tew-color-bg-muted); --tew-media-tile-shadow: var(--tew-shadow-sm); --tew-media-tile-hover-opacity: 0.9; --tew-media-ratio-square: 1 / 1; --tew-media-ratio-portrait: 9 / 16; --tew-media-ratio-landscape: 16 / 9; } .dark, [data-theme='dark'] { --tew-color-bg: #16242E; --tew-color-bg-subtle: #11202A; --tew-color-bg-muted: #25323A; --tew-color-surface: #25323A; --tew-color-surface-dark: #0B1822; --tew-color-text: #F0F3F5; --tew-color-text-muted: #C5CED3; --tew-color-text-subtle: #9FACB4; --tew-color-text-on-dark: #FFFFFF; --tew-color-text-on-brand: #FFFFFF; --tew-color-primary: #2BA6D9; --tew-color-primary-hover: #5FBFE6; --tew-color-primary-active: #93D4EE; --tew-color-secondary: #8DC95F; --tew-color-secondary-hover: #A6D67E; --tew-color-accent: #F47C76; --tew-color-border: #3C4A53; --tew-color-border-strong: #5A6B75; --tew-color-focus-ring: #2BA6D9; --tew-color-link: #5FBFE6; --tew-color-link-hover: #93D4EE; --tew-color-success: #8DC95F; --tew-color-success-bg: color-mix(in srgb, #73BE45 18%, #16242E); --tew-color-info: #2BA6D9; --tew-color-info-bg: color-mix(in srgb, #048CCB 18%, #16242E); --tew-color-warning: #F0B860; --tew-color-warning-bg: color-mix(in srgb, #E8A33D 18%, #16242E); --tew-color-danger: #F47C76; --tew-color-danger-bg: color-mix(in srgb, #EE5A52 18%, #16242E); --tew-color-success-text: #8DC95F; --tew-color-info-text: #5FBFE6; --tew-color-danger-text: #F47C76; --tew-color-primary-solid: #0B5E87; --tew-color-on-primary-solid: #FFFFFF; --tew-color-success-solid: #46802A; --tew-color-on-success-solid: #FFFFFF; --tew-color-warning-solid: #E8A33D; --tew-color-on-warning-solid: #16242E; --tew-color-danger-solid: #BE2F2E; --tew-color-on-danger-solid: #FFFFFF; --tew-gradient-brand-soft: linear-gradient(100deg, color-mix(in srgb, #048CCB 22%, #16242E) 0%, color-mix(in srgb, #73BE45 22%, #16242E) 100%); --tew-shadow-sm: 0 1px 2px rgba(0,0,0,.40), 0 1px 1px rgba(0,0,0,.28); --tew-shadow-md: 0 4px 16px rgba(0,0,0,.46), 0 1px 3px rgba(0,0,0,.34); --tew-shadow-lg: 0 12px 32px rgba(0,0,0,.55), 0 4px 8px rgba(0,0,0,.38); }