/* ============================================================ GFG Design Tokens v2 — Grupo Firmas Globales (RAC) Fuente de verdad para colores, tipografía, espaciado y más. Spec: docs/specs/ui/identity-and-styling.md ============================================================ */ /* --- Larsseit (local) --- */ @font-face { font-family: 'Larsseit'; src: url('/fonts/Larsseit-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Larsseit'; src: url('/fonts/Larsseit-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Larsseit'; src: url('/fonts/Larsseit-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Larsseit'; src: url('/fonts/Larsseit-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* === Paleta de Marca GFG (inamovible) === */ --gfg-dark-teal: #28333b; --gfg-turquoise: #71E4D1; --gfg-black: #000000; --gfg-light-gray: #E6E6E5; --gfg-white: #FFFFFF; /* === Escala tonal de dark teal === */ --teal-0: #f4f6f7; --teal-1: #e4e9ec; --teal-2: #c9d1d6; --teal-3: #8e9ba4; --teal-4: #4a5761; --teal-5: #364049; --teal-6: #2e3941; --teal-7: #28333b; --teal-8: #1f2a32; --teal-9: #141c22; /* === Escala de grises === */ --gray-50: #fafafa; --gray-100: #f4f4f5; --gray-200: #e6e6e5; --gray-300: #d1d4d6; --gray-400: #9ba1a6; --gray-500: #6b7280; --gray-600: #4b5359; --gray-700: #343a40; --gray-800: #1f2327; --gray-900: #0f1214; /* === Superficies (light) === */ --surface-0: #ffffff; --surface-1: #fafafa; --surface-2: #f4f5f6; --surface-3: #ecedef; --surface-sunken: #f7f8f8; /* === Chrome oscuro (navbar/sidebar/footer) === */ --chrome-bg: var(--teal-6); --chrome-bg-alt: var(--teal-7); --chrome-fg: rgba(255, 255, 255, 0.88); --chrome-fg-muted: rgba(255, 255, 255, 0.55); --chrome-fg-strong: rgba(255, 255, 255, 0.95); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active-bg: rgba(113, 228, 209, 0.10); --chrome-active-fg: var(--gfg-turquoise); /* === Colores semánticos === */ --color-primary: var(--gfg-dark-teal); --color-accent: var(--gfg-turquoise); --color-background: var(--surface-1); --color-background-alt: var(--gfg-light-gray); --color-text-primary: var(--gfg-dark-teal); --color-text-inverse: var(--gfg-white); --color-text-muted: var(--gray-500); --color-border: var(--gray-300); /* === Estados === */ --color-success: #16a34a; --color-warning: #ca8a04; --color-error: #dc2626; --color-info: var(--gfg-turquoise); /* === Bordes === */ --border-subtle: #eceff1; --border-default: #dfe3e6; --border-strong: #c5ccd1; --border-focus: var(--gfg-turquoise); /* === Radius === */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 9999px; /* Aliases retrocompatibles (v1) */ --border-radius-sm: var(--radius-xs); --border-radius-md: var(--radius-md); --border-radius-lg: var(--radius-lg); /* === Sombras matizadas === */ --shadow-xs: 0 1px 1px rgba(20, 28, 34, 0.04); --shadow-sm: 0 1px 2px rgba(20, 28, 34, 0.06), 0 1px 1px rgba(20, 28, 34, 0.04); --shadow-md: 0 4px 8px -2px rgba(20, 28, 34, 0.08), 0 2px 4px -2px rgba(20, 28, 34, 0.06); --shadow-lg: 0 12px 24px -6px rgba(20, 28, 34, 0.12), 0 4px 8px -4px rgba(20, 28, 34, 0.08); --shadow-xl: 0 24px 48px -12px rgba(20, 28, 34, 0.18); --shadow-focus: 0 0 0 3px rgba(113, 228, 209, 0.35); --shadow-focus-danger: 0 0 0 3px rgba(220, 38, 38, 0.30); /* === Motion === */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-instant: 80ms; --duration-fast: 140ms; --duration-base: 200ms; --duration-slow: 320ms; --transition-colors: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); --transition-transform: transform var(--duration-base) var(--ease-out); /* === Z-index === */ --z-base: 0; --z-sticky: 10; --z-dropdown: 50; --z-sidebar: 80; --z-navbar: 100; --z-overlay: 900; --z-modal: 1000; --z-popover: 1100; --z-toast: 1200; --z-tooltip: 1300; /* === Tipografía === */ --font-heading: 'Montserrat', Arial, Helvetica, sans-serif; --font-body: 'Larsseit', 'Helvetica Neue', Arial, sans-serif; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.9375rem; /* 15px */ --text-lg: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); --text-xl: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem); --text-2xl: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); --text-3xl: clamp(1.625rem, 1.35rem + 1vw, 2.25rem); --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.55; /* Aliases retrocompatibles (v1) */ --font-size-xs: var(--text-xs); --font-size-sm: var(--text-sm); --font-size-base: var(--text-base); --font-size-lg: var(--text-lg); --font-size-xl: var(--text-xl); --font-size-2xl: var(--text-2xl); --font-size-3xl: var(--text-3xl); /* === Espaciado === */ --spacing-xs: 0.25rem; /* 4px */ --spacing-sm: 0.5rem; /* 8px */ --spacing-md: 1rem; /* 16px */ --spacing-lg: 1.5rem; /* 24px */ --spacing-xl: 2rem; /* 32px */ --spacing-2xl: 3rem; /* 48px */ --spacing-3xl: 4rem; /* 64px */ /* Escala numérica (4px base) para grids */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* === Breakpoints (referencia en CSS; usar en media queries) === */ --bp-mobile: 640px; --bp-tablet: 1024px; --bp-laptop: 1280px; --bp-desktop: 1536px; /* === Dimensiones de chrome === */ --navbar-height: 48px; --sidebar-width-expanded: 244px; --sidebar-width-compact: 56px; --breadcrumbs-height: 36px; --footer-height: 40px; }