/* ============================================
CSS CUSTOM PROPERTIES - COLOR SYSTEM
============================================
USAGE GUIDE:
------------
This file contains a modular color system for Django theme management.
All colors are defined as CSS variables that automatically switch based
on the 'dark' class on the element.
HOW IT WORKS:
-------------
When Django sets the 'dark' class on , all CSS variables
automatically update to their dark mode values. No need for separate
light/dark class declarations in your HTML!
COLOR CATEGORIES:
-----------------
1. BRAND COLORS (Same in both modes):
--color-brand-blue: #74CFFF (Analizar)
--color-brand-green: #0FEDB2 (Gráficos)
--color-brand-yellow: #F7CF49 (Logo accent)
2. TEXT COLORS (Auto-switching):
--color-text-primary
--color-text-secondary
--color-text-tertiary
--color-text-muted
3. BACKGROUND COLORS (Auto-switching):
--color-bg-primary
--color-bg-secondary
--color-bg-tertiary
4. BORDERS & INTERACTIVE (Auto-switching):
--color-border
--color-hover
5. NAVIGATION COLORS (Auto-switching):
--color-nav-home
--color-nav-analizar
--color-nav-graficos
--color-nav-text
HOW TO USE:
-----------
Option 1 - CSS Variables in HTML (RECOMMENDED):
Text
Box
Option 2 - Utility Classes:
This text auto-switches themes
This background auto-switches
This is always blue
Option 3 - In Custom CSS:
.my-element {
color: var(--color-text-primary);
background: var(--color-bg-primary);
border-color: var(--color-border);
}
AVAILABLE UTILITY CLASSES:
--------------------------
Text: .text-primary, .text-secondary, .text-tertiary, .text-muted
Brand: .text-brand-blue, .text-brand-green, .text-brand-yellow
Background: .bg-primary, .bg-secondary, .bg-tertiary
Border: .border-default
Navigation: .nav-icon-home, .nav-icon-analizar, .nav-icon-graficos, .nav-text
============================================ */
/* ===== LIGHT MODE (DEFAULT) ===== */
:root {
/* Brand Colors - Never change */
--color-brand-blue: #74CFFF;
--color-brand-green: #0FEDB2;
--color-brand-yellow: #F7CF49;
/* Backgrounds */
--color-bg-primary: #FFFCF2;
--color-bg-secondary: #E9E5D9;
--color-bg-tertiary: #484E50;
/* Text */
--color-text-primary: #252525;
--color-text-secondary: #1E1E1E;
--color-text-secondary-second: #FFFCF2;
--color-text-tertiary: #3A3541;
--color-text-muted: #69798F;
/* Borders */
--color-border: #3A3541;
/* Interactive */
--color-hover: #484E50;
/* Navigation */
--color-nav-home: #252525;
--color-nav-analizar: #74CFFF;
--color-nav-graficos: #0FEDB2;
--color-nav-text: #252525;
/* Buttons */
--color-btn-analizar-bg: #252525;
--color-btn-analizar-text: #FFFCF2;
--color-btn-graficos-bg: #252525;
--color-btn-graficos-text: #FFFCF2;
/* Semantic Colors */
--color-error: #C96868;
--color-success: #0FEDB2;
--color-warning: #F7CF49;
--color-info: #74CFFF;
}
/* ===== DARK MODE (when html.dark is present) ===== */
html.dark {
/* Backgrounds */
--color-bg-primary: #252525;
--color-bg-secondary: #484E50;
--color-bg-tertiary: #3A3541;
/* Text */
--color-text-primary: #FFFFFF;
--color-text-secondary: #FFFCF2;
--color-text-secondary-second: #FFFCF2;
--color-text-tertiary: #DADADA;
--color-text-muted: #69798F;
/* Borders */
--color-border: #3A3541;
/* Interactive */
--color-hover: #484E50;
/* Navigation */
--color-nav-home: #F7CF49;
--color-nav-analizar: #74CFFF;
--color-nav-graficos: #0FEDB2;
--color-nav-text: #FFFCF2;
/* Buttons */
--color-btn-analizar-bg: #74CFFF;
--color-btn-analizar-text: #252525;
--color-btn-graficos-bg: #0FEDB2;
--color-btn-graficos-text: #252525;
}
/* ============================================
UTILITY CLASSES
============================================
These classes automatically use the correct
theme colors based on html.dark class
============================================ */
/* Text Color Utilities */
.text-primary {
color: var(--color-text-primary);
}
.text-secondary {
color: var(--color-text-secondary);
}
.text-secondary-second {
color: var(--color-text-secondary-second);
}
.text-tertiary {
color: var(--color-text-tertiary);
}
.text-muted {
color: var(--color-text-muted);
}
/* Brand Color Utilities (never change with theme) */
.text-brand-blue {
color: var(--color-brand-blue);
}
.text-brand-green {
color: var(--color-brand-green);
}
.text-brand-yellow {
color: var(--color-brand-yellow);
}
/* Background Color Utilities */
.bg-primary {
background-color: var(--color-bg-primary);
}
.bg-secondary {
background-color: var(--color-bg-secondary);
}
.bg-tertiary {
background-color: var(--color-bg-tertiary);
}
/* Border Color Utilities */
.border-default {
border-color: var(--color-border);
}
/* Navigation Color Utilities */
.nav-icon-home {
color: var(--color-nav-home);
}
.nav-icon-analizar {
color: var(--color-nav-analizar);
}
.nav-icon-graficos {
color: var(--color-nav-graficos);
}
.nav-text {
color: var(--color-nav-text);
}
/* Button Utilities */
.btn-analizar {
background-color: var(--color-btn-analizar-bg);
color: var(--color-btn-analizar-text);
}
.btn-graficos {
background-color: var(--color-btn-graficos-bg);
color: var(--color-btn-graficos-text);
}
/* Applying Inter font to the body */
body {
font-family: 'Roboto', sans-serif; /* Default to standard Roboto */
}
/* Class for Roboto Flex */
.font-roboto-flex {
font-family: 'Roboto Flex', sans-serif;
}
/* Class for Roboto Mono */
.font-roboto-mono {
font-family: 'Roboto Mono', monospace;
}
/* Class for Roboto Condensed */
.font-roboto-condensed {
font-family: 'Roboto Condensed', sans-serif;
}
/* Class for standard Roboto (useful if your default is different) */
.font-roboto-standard {
font-family: 'Roboto', sans-serif;
}
.text-main-blue {
color: #2563EB;
}
.bg-main-blue-hover:hover {
background-color: #2563EB;
}
.bg-main-green-hover:hover {
background-color: #228B22;
}
.text-main-green {
color: #228B22; /* This is also known as "Forest Green" */
}
/* Custom styles for file input */
.file-input-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
cursor: pointer;
width: 100%;
}
.file-input-button {
border: 2px dashed #d1d5db; /* gray-300 */
color: #4b5563; /* gray-600 */
background-color: #f9fafb; /* gray-50 */
padding: 2rem;
border-radius: 0.5rem; /* rounded-lg */
text-align: center;
transition: background-color 0.2s, border-color 0.2s;
width: 100%;
}
.file-input-wrapper:hover .file-input-button {
background-color: #f3f4f6; /* gray-100 */
border-color: #16a34a; /* green-600 */
}
.file-input-wrapper input[type=file] {
font-size: 100px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
cursor: pointer;
height: 100%;
width: 100%;
}
.file-name {
margin-top: 1rem;
font-size: 0.875rem;
color: #6b7280; /* gray-500 */
}