/* Theme Name: CST Cannabis Medicinal Portal Theme URI: https://cannabis.cst.pr.gov Description: Portal educativo sobre cannabis medicinal — Comisión para la Seguridad en el Tránsito de Puerto Rico. Child theme of GeneratePress. Author: CST Puerto Rico Author URI: https://cst.pr.gov Template: generatepress Version: 1.0.0 License: GPL-2.0-or-later Text Domain: cst-cannabis Tags: government, accessibility, bilingual, education */ /* ========================================================================== CST Cannabis Portal — Design Tokens (Guía de Marca) ========================================================================== */ :root { /* --- Colors: Institutional palette --- */ --cst-color-red: #EE0000; --cst-color-blue: #3B82C4; --cst-color-white: #FFFFFF; --cst-color-green: #7FA35B; /* Verde institucional */ --cst-color-navy: #1F2E54; /* Azul autoridad */ /* Semantic tokens */ --cst-color-primary: var(--cst-color-green); --cst-color-secondary: var(--cst-color-navy); --cst-color-accent: var(--cst-color-blue); --cst-color-danger: var(--cst-color-red); --cst-color-focus: var(--cst-color-blue); /* Functional UI status tokens */ --cst-color-success: #2E7D32; --cst-color-warning: #E0B400; --cst-color-error: #B23A3A; --cst-color-info: #3B82C4; /* Neutrals */ --cst-color-black: #1A1A1A; --cst-color-gray-900: #212529; --cst-color-gray-700: #495057; --cst-color-gray-500: #6C757D; --cst-color-gray-300: #DEE2E6; --cst-color-gray-100: #F8F9FA; --cst-color-bg: var(--cst-color-white); --cst-color-text: var(--cst-color-gray-900); --cst-color-text-muted: var(--cst-color-gray-500); /* --- Typography --- */ --cst-font-body: 'Open Sans', system-ui, -apple-system, sans-serif; --cst-font-heading: 'Montserrat', system-ui, -apple-system, sans-serif; --cst-font-size-base: 1rem; /* 16px */ --cst-font-size-sm: 0.875rem; /* 14px */ --cst-font-size-lg: 1.125rem; /* 18px */ --cst-font-size-xl: 1.5rem; /* 24px */ --cst-font-size-2xl: 2rem; /* 32px */ --cst-font-size-3xl: 2.5rem; /* 40px */ --cst-font-size-4xl: 3rem; /* 48px */ --cst-line-height: 1.6; --cst-line-height-tight: 1.2; /* --- Spacing --- */ --cst-space-xs: 0.25rem; /* 4px */ --cst-space-sm: 0.5rem; /* 8px */ --cst-space-md: 1rem; /* 16px */ --cst-space-lg: 1.5rem; /* 24px */ --cst-space-xl: 2rem; /* 32px */ --cst-space-2xl: 3rem; /* 48px */ --cst-space-3xl: 4rem; /* 64px */ --cst-space-4xl: 6rem; /* 96px */ /* --- Layout --- */ --cst-container-max: 1200px; --cst-container-narrow: 800px; --cst-border-radius: 0.375rem; /* 6px */ --cst-border-radius-lg: 0.75rem; /* 12px */ --cst-shadow-sm: 0 1px 3px rgba(0,0,0,0.12); --cst-shadow-md: 0 4px 12px rgba(0,0,0,0.1); --cst-shadow-lg: 0 8px 24px rgba(0,0,0,0.12); --cst-transition: 0.2s ease-in-out; /* --- Gradients --- */ --cst-gradient-primary: linear-gradient(135deg, #5E7C3A 0%, #A9C58E 100%); --cst-gradient-hero: linear-gradient(135deg, rgba(127,163,91,0.92) 0%, rgba(127,163,91,0.75) 50%, rgba(169,197,142,0.85) 100%); --cst-gradient-accent: linear-gradient(135deg, #7FA35B 0%, #1F2E54 100%); --cst-gradient-section: linear-gradient(180deg, #F8F9FA 0%, #EEF1F3 100%); --cst-gradient-card-border: linear-gradient(135deg, var(--cst-color-green), var(--cst-color-navy)); /* --- Glass / blur --- */ --cst-glass-bg: rgba(255, 255, 255, 0.85); --cst-glass-blur: blur(12px); --cst-glass-border: 1px solid rgba(255, 255, 255, 0.3); /* --- Enhanced shadows --- */ --cst-shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.15); --cst-shadow-glow-primary: 0 4px 20px rgba(127, 163, 91, 0.35); --cst-shadow-glow-navy: 0 4px 20px rgba(31, 46, 84, 0.35); /* --- Timing --- */ --cst-transition-slow: 0.4s ease; --cst-transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* --- Section dividers --- */ --cst-divider-height: 48px; /* --- Glow shadows --- */ --cst-shadow-glow-accent: 0 4px 20px rgba(59, 130, 196, 0.25); --cst-shadow-glow-green-light: 0 4px 20px rgba(169, 197, 142, 0.25); /* --- Color variants --- */ --cst-color-green-light: #A9C58E; --cst-color-green-dark: #5E7C3A; --cst-color-navy-light: #3A4D7A; /* --- Government banner --- */ --cst-banner-bg: var(--cst-color-gray-900); --cst-banner-text: var(--cst-color-white); /* --- Gradient text --- */ --cst-gradient-text: linear-gradient(135deg, #7FA35B 0%, #1F2E54 100%); /* --- Callout backgrounds --- */ --cst-callout-bg-default: linear-gradient(135deg, rgba(127,163,91,0.06) 0%, rgba(127,163,91,0.02) 100%); --cst-callout-bg-warning: linear-gradient(135deg, rgba(31,46,84,0.06) 0%, rgba(31,46,84,0.02) 100%); --cst-callout-bg-info: linear-gradient(135deg, rgba(59,130,196,0.06) 0%, rgba(59,130,196,0.02) 100%); } /* High contrast mode */ @media (prefers-contrast: high) { :root { --cst-color-primary: #3D5A1E; --cst-color-secondary: #0F1A36; --cst-shadow-sm: 0 0 0 1px var(--cst-color-black); --cst-shadow-md: 0 0 0 2px var(--cst-color-black); --cst-shadow-xl: 0 0 0 3px var(--cst-color-black); --cst-shadow-glow-primary: none; --cst-shadow-glow-navy: none; --cst-shadow-glow-accent: none; --cst-shadow-glow-green-light: none; --cst-gradient-primary: var(--cst-color-primary); --cst-gradient-hero: rgba(0,0,0,0.85); --cst-gradient-accent: var(--cst-color-primary); --cst-gradient-section: var(--cst-color-gray-100); --cst-gradient-card-border: var(--cst-color-primary); --cst-glass-bg: var(--cst-color-white); --cst-glass-blur: none; --cst-glass-border: 2px solid var(--cst-color-black); --cst-gradient-text: var(--cst-color-primary); --cst-callout-bg-default: rgba(127,163,91,0.08); --cst-callout-bg-warning: rgba(31,46,84,0.08); --cst-callout-bg-info: rgba(59,130,196,0.08); } }