/* ================================================================= PLUSDOMINA THEME — Design Tokens (INTERNAL / ADMIN UI) ⚠️ ESTE ARCHIVO define los colores para TODAS las páginas internas (admin, POS, gestión). Para mantener la consistencia operativa, usa EXACTAMENTE la paleta Paxapos (Croma Design System). El look "premium / sovereign" de la landing NO vive aquí: se aplica solo en la home mediante webroot/css/landing_premium.css, cargado únicamente por Layouts/default_landing.ctp. Synced with: webroot/css/colors.css (Paxapos shared tokens) ================================================================= */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap'); :root { color-scheme: light only; /* ============================================================= 🎨 BRAND COLORS — Paxapos / Croma Design System ============================================================= */ --color-blue: #0039e3; /* Primary — Croma Blue 700 */ --color-navy: #004A99; /* Secondary — Croma Navy 700 */ --color-pink: #FF7DCB; /* Accent — Croma Pink 500 (logo mark) */ --color-green: #066f32; /* Success — Croma Green 700 */ --color-red: #9e0b0d; /* Error/Danger — Croma Red 700 */ --color-yellow: #f1900a; /* Warning — Croma Orange 500 */ --color-grey: #717474; /* Neutral — Croma Grey 600 */ --color-black: #111111; /* Dark — Croma Grey 900 */ --color-white: #FEFEFE; /* Light — Croma Grey 50 */ /* ============================================================= 🔀 OPACITY VARIANTS — Auto-generated from brand colors ============================================================= */ /* Blue */ --color-blue-9: color-mix(in srgb, var(--color-blue) 90%, transparent); --color-blue-8: color-mix(in srgb, var(--color-blue) 80%, transparent); --color-blue-7: color-mix(in srgb, var(--color-blue) 70%, transparent); --color-blue-5: color-mix(in srgb, var(--color-blue) 50%, transparent); --color-blue-3: color-mix(in srgb, var(--color-blue) 30%, transparent); --color-blue-2: color-mix(in srgb, var(--color-blue) 20%, transparent); --color-blue-1: color-mix(in srgb, var(--color-blue) 10%, transparent); --color-light-blue: color-mix(in srgb, var(--color-blue) 60%, white); /* Navy */ --color-navy-9: color-mix(in srgb, var(--color-navy) 90%, transparent); --color-navy-8: color-mix(in srgb, var(--color-navy) 80%, transparent); --color-navy-7: color-mix(in srgb, var(--color-navy) 70%, transparent); --color-navy-5: color-mix(in srgb, var(--color-navy) 50%, transparent); --color-navy-3: color-mix(in srgb, var(--color-navy) 30%, transparent); --color-navy-1: color-mix(in srgb, var(--color-navy) 10%, transparent); /* Red */ --color-red-9: color-mix(in srgb, var(--color-red) 90%, transparent); --color-red-8: color-mix(in srgb, var(--color-red) 80%, transparent); --color-red-7: color-mix(in srgb, var(--color-red) 70%, transparent); --color-red-5: color-mix(in srgb, var(--color-red) 50%, transparent); --color-red-3: color-mix(in srgb, var(--color-red) 30%, transparent); --color-red-1: color-mix(in srgb, var(--color-red) 10%, transparent); /* Green */ --color-green-9: color-mix(in srgb, var(--color-green) 90%, transparent); --color-green-8: color-mix(in srgb, var(--color-green) 80%, transparent); --color-green-5: color-mix(in srgb, var(--color-green) 50%, transparent); --color-green-3: color-mix(in srgb, var(--color-green) 30%, transparent); --color-green-1: color-mix(in srgb, var(--color-green) 10%, transparent); --color-bg-green: color-mix(in srgb, var(--color-green) 25%, white); /* Yellow/Orange */ --color-yellow-9: color-mix(in srgb, var(--color-yellow) 90%, transparent); --color-yellow-8: color-mix(in srgb, var(--color-yellow) 80%, transparent); --color-yellow-5: color-mix(in srgb, var(--color-yellow) 50%, transparent); --color-yellow-3: color-mix(in srgb, var(--color-yellow) 30%, transparent); --color-yellow-1: color-mix(in srgb, var(--color-yellow) 10%, transparent); --color-bg-yellow: color-mix(in srgb, var(--color-yellow) 25%, white); /* Grey */ --color-grey-9: color-mix(in srgb, var(--color-grey) 90%, transparent); --color-grey-8: color-mix(in srgb, var(--color-grey) 80%, transparent); --color-grey-7: color-mix(in srgb, var(--color-grey) 70%, transparent); --color-grey-5: color-mix(in srgb, var(--color-grey) 50%, transparent); --color-grey-3: color-mix(in srgb, var(--color-grey) 30%, transparent); --color-grey-1: color-mix(in srgb, var(--color-grey) 10%, transparent); /* Black */ --color-black-9: color-mix(in srgb, var(--color-black) 90%, transparent); --color-black-8: color-mix(in srgb, var(--color-black) 80%, transparent); --color-black-5: color-mix(in srgb, var(--color-black) 50%, transparent); --color-black-3: color-mix(in srgb, var(--color-black) 30%, transparent); --color-black-1: color-mix(in srgb, var(--color-black) 10%, transparent); /* White */ --color-white-9: color-mix(in srgb, var(--color-white) 90%, transparent); --color-white-8: color-mix(in srgb, var(--color-white) 80%, transparent); --color-white-5: color-mix(in srgb, var(--color-white) 50%, transparent); --color-white-3: color-mix(in srgb, var(--color-white) 30%, transparent); --color-white-1: color-mix(in srgb, var(--color-white) 10%, transparent); /* Background overlays */ --color-bg-white-8: color-mix(in srgb, var(--color-white) 85%, transparent); --color-bg-white-5: color-mix(in srgb, var(--color-white) 50%, transparent); --color-bg-white-3: color-mix(in srgb, var(--color-white) 30%, transparent); --color-bg-white-1: color-mix(in srgb, var(--color-white) 10%, transparent); --color-bg-black: color-mix(in srgb, var(--color-black) 70%, transparent); /* ============================================================= 🏷️ SEMANTIC COLORS — Mapeo de roles a brand colors ============================================================= */ --color-primary: var(--color-blue); --color-secondary: var(--color-grey); --color-tertiary: var(--color-green); --color-quaternary: var(--color-pink); --color-success: var(--color-green); --color-success-bg: var(--color-bg-green); --color-danger: var(--color-red); --color-warning: var(--color-yellow); --color-warning-bg: var(--color-bg-yellow); --color-info: var(--color-blue-8); --color-light: var(--color-white); --color-dark: var(--color-black); --color-muted: var(--color-grey); --color-bg: var(--color-bg-white-8); --color-bg-alt: var(--color-bg-white-5); --color-bg-primary: var(--color-black-1); --color-bg-secondary: var(--color-black-3); --color-bg-tertiary: var(--color-black-5); /* UI Accents */ --color-lavender: color-mix(in srgb, var(--color-blue) 8%, #f0f0fa); --color-purple: #8e44ad; --color-purple-light: #8b5cf6; --color-purple-bg: #f0ecff; --color-pink-light: color-mix(in srgb, var(--color-pink) 70%, var(--color-red)); --color-pink-bg: color-mix(in srgb, var(--color-pink) 10%, white); /* Estados de Mesa */ --color-mesa-abierta: oklch(96.8% .007 247.896); --color-mesa-cerrada: var(--color-red-3); --color-mesa-cobrada: var(--color-green-3); --color-mesa-reservada: color-mix(in srgb, var(--color-blue) 5%, white); /* ============================================================= 🔤 TYPOGRAPHY — Matches Tailwind/Flowbite scale exactly ============================================================= */ --font-text: 'DM Sans', sans-serif; --font-title-1: 'DM Sans', sans-serif; --font-title-2: 'DM Sans', sans-serif; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px — body default para admin/POS */ --text-base: 1rem; /* 16px */ --text-md: var(--text-sm); /* body text = 14px en apps de gestión */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.75rem; /* 28px */ --text-4xl: 2rem; /* 32px */ --font-semibold: 600; --font-bold: 700; /* ============================================================= 📐 SPACING, RADIUS, SHADOWS ============================================================= */ --spacing-sm: 8px; --spacing-md: 10px; --spacing-lg: 15px; --spacing-xl: 20px; --spacing-2xl: 24px; --radius: 8px; /* Croma base (inputs, buttons) */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 1rem; /* 16px - cards, panels */ --radius-xl: 0.75rem; /* 12px - Flowbite default */ --radius-2xl: 1rem; /* 16px */ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --border-width-1: 1px; --border-color: #d1d5db; --border-color-light: #e5e7eb; /* ============================================================= 📦 COMPONENT TOKENS ============================================================= */ --input-height-sm: 32px; --input-height-md: 40px; --input-height-lg: 48px; --header-bg: var(--color-lavender); --header-height: 70px; --footer-height: 60px; /* ============================================================= 🔗 FYC LEGACY ALIASES — For .ctp files using --fyc-* tokens ============================================================= */ --fyc-white: var(--color-white); --fyc-black: var(--color-black); --fyc-gray-50: color-mix(in srgb, var(--color-grey) 5%, white); --fyc-gray-100: color-mix(in srgb, var(--color-grey) 10%, white); --fyc-gray-200: color-mix(in srgb, var(--color-grey) 15%, white); --fyc-gray-300: color-mix(in srgb, var(--color-grey) 25%, white); --fyc-gray-400: color-mix(in srgb, var(--color-grey) 40%, white); --fyc-gray-500: color-mix(in srgb, var(--color-grey) 60%, white); --fyc-gray-600: color-mix(in srgb, var(--color-grey) 75%, white); --fyc-gray-700: color-mix(in srgb, var(--color-grey) 85%, var(--color-black)); --fyc-gray-800: color-mix(in srgb, var(--color-grey) 50%, var(--color-black)); --fyc-gray-900: color-mix(in srgb, var(--color-grey) 25%, var(--color-black)); --fyc-primary: var(--color-blue); --fyc-primary-dark: color-mix(in srgb, var(--color-blue) 70%, black); --fyc-primary-light: color-mix(in srgb, var(--color-blue) 70%, white); --fyc-primary-lighter: color-mix(in srgb, var(--color-blue) 50%, white); --fyc-primary-bg: color-mix(in srgb, var(--color-blue) 5%, white); --fyc-success: var(--color-green); --fyc-success-dark: color-mix(in srgb, var(--color-green) 70%, black); --fyc-success-light: color-mix(in srgb, var(--color-green) 60%, white); --fyc-success-bg: color-mix(in srgb, var(--color-green) 10%, white); --fyc-warning: var(--color-yellow); --fyc-warning-dark: color-mix(in srgb, var(--color-yellow) 70%, black); --fyc-warning-light: color-mix(in srgb, var(--color-yellow) 60%, white); --fyc-warning-bg: color-mix(in srgb, var(--color-yellow) 10%, white); --fyc-error: var(--color-red); --fyc-error-dark: color-mix(in srgb, var(--color-red) 70%, black); --fyc-error-light: color-mix(in srgb, var(--color-red) 50%, white); --fyc-error-bg: color-mix(in srgb, var(--color-red) 10%, white); --fyc-info: var(--color-navy); --fyc-info-dark: color-mix(in srgb, var(--color-navy) 70%, black); --fyc-info-light: color-mix(in srgb, var(--color-navy) 60%, white); --fyc-info-bg: color-mix(in srgb, var(--color-navy) 10%, white); /* Typography aliases */ --fyc-text-xs: var(--text-xs); --fyc-text-sm: var(--text-sm); --fyc-text-base: var(--text-base); --fyc-text-lg: var(--text-lg); --fyc-text-xl: var(--text-xl); --fyc-text-2xl: var(--text-2xl); --fyc-font-normal: 400; --fyc-font-semibold: var(--font-semibold); --fyc-font-bold: var(--font-bold); /* Radius aliases */ --fyc-radius-sm: var(--radius-sm); --fyc-radius-md: var(--radius-md); --fyc-radius-lg: var(--radius-lg); --fyc-radius-xl: var(--radius-xl); --fyc-radius-2xl: var(--radius-2xl); /* Shadow aliases */ --fyc-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --fyc-shadow-md: var(--shadow-md); --fyc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* ============================================================= 🅱️ BOOTSTRAP 3 OVERRIDES — Maps to semantic tokens ============================================================= */ --bs-primary: var(--color-primary); --bs-primary-rgb: 0, 57, 227; --bs-secondary: var(--color-secondary); --bs-secondary-rgb: 113, 116, 116; --bs-success: var(--color-success); --bs-success-rgb: 6, 111, 50; --bs-danger: var(--color-danger); --bs-danger-rgb: 158, 11, 13; --bs-warning: var(--color-warning); --bs-warning-rgb: 241, 144, 10; --bs-info: var(--color-navy); --bs-info-rgb: 0, 74, 153; --bs-light: var(--color-light); --bs-light-rgb: 254, 254, 254; --bs-dark: var(--color-dark); --bs-dark-rgb: 17, 17, 17; --bs-body-font-family: 'DM Sans', sans-serif; --bs-body-font-size: var(--text-sm); --bs-body-font-weight: 400; --bs-body-line-height: 1.5; --bs-body-color: var(--color-dark); --bs-body-bg: var(--color-bg); --bs-border-width: 1px; --bs-border-color: var(--border-color); --bs-border-radius: var(--radius-md); --bs-border-radius-sm: var(--radius-sm); --bs-border-radius-lg: var(--radius-lg); --bs-border-radius-xl: var(--radius-xl); --bs-border-radius-2xl: var(--radius-2xl); --bs-box-shadow: var(--shadow-md); --bs-box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --bs-box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --bs-link-color: var(--color-primary); --bs-link-hover-color: var(--color-blue-8); --bs-focus-ring-width: 0.25rem; --bs-focus-ring-opacity: 0.25; --bs-focus-ring-color: var(--color-blue-3); } /* Responsive */ @media (max-width: 768px) { :root { --header-height: 62px; } }