/*=============================================================================== PRAXA UI Framework ------------------------------------------------------------------------------- File : praxa.css Theme : PRAXA Description : PRAXA Brand Theme. ================================================================================*/ /*------------------------------------------------------------------------------ IMPORT Framework --------------------------------------------------------------------------------*/ @import url("./css/base.css"); @import url("./css/menu.css"); @import url("./css/charts.css"); @import url("./css/misc.css"); /*------------------------------------------------------------------------------ Theme Variables --------------------------------------------------------------------------------*/ :root { /*-------------------------------------------------------------------------- BRAND ----------------------------------------------------------------------------*/ --color-brand-primary: #285585; --color-brand-secondary: #008080; /*-------------------------------------------------------------------------- SHADOW COLORS * Use #000000 for light themes. * Use #FFFFFF or another suitable color for dark themes. ----------------------------------------------------------------------------*/ --color-shadow-neutral: #000000; /*-------------------------------------------------------------------------- SURFACES ----------------------------------------------------------------------------*/ --color-surface-primary: #FFFFFF; --color-surface-background: #F1F5F9; --color-surface-secondary: #F8FBFB; --color-surface-accent: #E6F2F2; /*-------------------------------------------------------------------------- STATE COLORS ----------------------------------------------------------------------------*/ --color-state-highlight: color-mix(in srgb, var(--color-surface-accent) 25%, transparent); --color-state-highlight-hover: color-mix(in srgb, var(--color-surface-accent) 40%, transparent); /*-------------------------------------------------------------------------- BORDERS ----------------------------------------------------------------------------*/ --color-border-primary: #E2E8F0; --color-border-accent: #D0EDED; /*-------------------------------------------------------------------------- TEXT ----------------------------------------------------------------------------*/ --color-text-primary: #64748B; --color-text-muted: #94A3B8; --color-text-accent: #085041; /*============================================================================== ICON COLORS ==============================================================================*/ --color-icon-primary: var(--color-brand-primary); --color-icon-secondary: var(--color-brand-secondary); --color-icon-muted: var(--color-text-muted); /*-------------------------------------------------------------------------- FONT FAMILY ----------------------------------------------------------------------------*/ --font-family-base: 'Inter', sans-serif; /*-------------------------------------------------------------------------- FONT SIZE ----------------------------------------------------------------------------*/ --font-size-caption: 10px; --font-size-label: 11px; --font-size-small: 12px; --font-size-body: 14px; --font-size-button: 15px; --font-size-heading-sm: 16px; --font-size-heading-md: 20px; --font-size-heading-lg: 24px; --font-size-brand: 18px; --font-size-price: 28px; /*-------------------------------------------------------------------------- FONT WEIGHT ----------------------------------------------------------------------------*/ --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /*-------------------------------------------------------------------------- LINE HEIGHT ----------------------------------------------------------------------------*/ --line-height-tight: 1; --line-height-compact: 1.3; --line-height-normal: 1.5; --line-height-relaxed: 1.6; /*-------------------------------------------------------------------------- SPACING ----------------------------------------------------------------------------*/ --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 20px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 40px; --space-4xl: 50px; /*-------------------------------------------------------------------------- RADIUS ----------------------------------------------------------------------------*/ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 14px; --radius-3xl: 20px; --radius-4xl: 24px; /*-------------------------------------------------------------------------- LAYERS ----------------------------------------------------------------------------*/ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 500; --z-modal: 700; --z-toast: 900; --z-tooltip: 1000; /*-------------------------------------------------------------------------- SHADOWS ----------------------------------------------------------------------------*/ --shadow-neutral-sm: 0 4px 6px -1px color-mix(in srgb, var(--color-shadow-neutral) 20%, transparent); --shadow-neutral-md: 0 8px 12px -2px color-mix(in srgb, var(--color-shadow-neutral) 25%, transparent), 0 4px 6px -2px color-mix(in srgb, var(--color-shadow-neutral) 15%, transparent); --shadow-neutral-lg: 0 12px 20px -3px color-mix(in srgb, var(--color-shadow-neutral) 30%, transparent), 0 6px 10px -2px color-mix(in srgb, var(--color-shadow-neutral) 20%, transparent); --shadow-primary-sm: 0 4px 6px -1px color-mix(in srgb, var(--color-brand-primary) 20%, transparent); --shadow-primary-md: 0 8px 12px -2px color-mix(in srgb, var(--color-brand-primary) 25%, transparent), 0 4px 6px -2px color-mix(in srgb, var(--color-brand-primary) 15%, transparent); --shadow-primary-lg: 0 12px 20px -3px color-mix(in srgb, var(--color-brand-primary) 30%, transparent), 0 6px 10px -2px color-mix(in srgb, var(--color-brand-primary) 20%, transparent); --shadow-secondary-sm: 0 4px 6px -1px color-mix(in srgb, var(--color-brand-secondary) 20%, transparent); --shadow-secondary-md: 0 8px 12px -2px color-mix(in srgb, var(--color-brand-secondary) 25%, transparent), 0 4px 6px -2px color-mix(in srgb, var(--color-brand-secondary) 15%, transparent); --shadow-secondary-lg: 0 12px 20px -3px color-mix(in srgb, var(--color-brand-secondary) 30%, transparent), 0 6px 10px -2px color-mix(in srgb, var(--color-brand-secondary) 20%, transparent); /*-------------------------------------------------------------------------- EFFECTS ----------------------------------------------------------------------------*/ --effect-glow-primary: 0 0 0 4px color-mix(in srgb, var(--color-brand-primary) 10%, transparent); --effect-glow-secondary: 0 0 0 4px color-mix(in srgb, var(--color-brand-secondary) 10%, transparent); } /*------------------------------------------------------------------------------ Navigation (Header / Menu / Footer) ------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------ Charts & Visualizations ------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------ WordPress Compatibility Remove after Python migration. ------------------------------------------------------------------------------*/ /*============================================================================== BRAND COLORS ==============================================================================*/ /*============================================================================== BUTTON COLORS ==============================================================================*/ /*============================================================================== TYPOGRAPHY COLORS ==============================================================================*/ /*============================================================================== CARD COLORS ==============================================================================*/ /*============================================================================== FORM COLORS ==============================================================================*/ /*============================================================================== HOVER COLORS ==============================================================================*/ /*============================================================================== CHART COLORS ==============================================================================*/