/* * This is a manifest file that'll be compiled into application.css. * * With Propshaft, assets are served efficiently without preprocessing steps. You can still include * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard * cascading order, meaning styles declared later in the document or manifest will override earlier ones, * depending on specificity. * * Consider organizing styles into separate files for maintainability. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); :root { /* Fintech specific colors */ --fintech-dark: hsl(216 32% 8%); --fintech-card: hsla(218, 15%, 10%, 0.6); --fintech-border: hsl(220 13% 28%); --bitcoin-orange: hsl(33 96% 54%); --fed-blue: hsl(217 91% 60%); --usd-green: hsl(158 64% 52%); --chart-grid: hsl(220 13% 28%); } /* Custom fintech colors */ .bg-fintech-dark { background-color: var(--fintech-dark); } /* Fintech utilities (no vars duplicated) */ /* Backgrounds */ .bg-fintech-card { background-color: var(--fintech-card); } .bg-fintech-border { background-color: var(--fintech-border); } /* Text colors */ .text-fintech-dark { color: var(--fintech-dark); } .text-fintech-border { color: var(--fintech-border); } /* Borders */ .border-fintech-border { border-color: var(--fintech-border); } /* Opacity variants (match Tailwind-style class names) */ /* Note: slash needs escaping in CSS selectors */ .bg-fintech-dark\/90 { /* 90% of fintech-dark mixed with transparent */ background-color: color-mix(in oklab, var(--fintech-dark) 90%, transparent); } .bg-fintech-dark\/30 { background-color: color-mix(in oklab, var(--fintech-dark) 30%, transparent); } .border-fintech-border\/50 { border-color: color-mix(in oklab, var(--fintech-border) 50%, transparent); } /* Hover variants */ .hover\:bg-fintech-dark:hover { background-color: var(--fintech-dark); } .hover\:bg-fintech-card:hover { background-color: var(--fintech-card); } .hover\:bg-fintech-dark\/30:hover { background-color: color-mix(in oklab, var(--fintech-dark) 30%, transparent); } /* Utility: use Inter font-family globally or per element (used on via class) */ .font-inter { font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif; } /* Bitcoin orange utilities */ .text-bitcoin-orange { color: var(--bitcoin-orange); } .bg-bitcoin-orange\/20 { background-color: color-mix(in oklab, var(--bitcoin-orange) 20%, transparent); }