/* ========================================================================== DESIGN TOKENS — DIGART Studio Fuente normativa: project/13-UI-DESIGN-SYSTEM.md — Capítulo 3 Decisión aplicable: D-011 Este archivo declara exclusivamente los Design Tokens del sistema mediante CSS Custom Properties dentro de :root. No define Layout, Tipografía aplicada, Color de componentes, Responsive ni Estados: esos capítulos consumen estos tokens, no se implementan aquí. No contiene clases, componentes ni selectores de elemento. ========================================================================== */ :root { /* ======================================================================== 3.1 Color ======================================================================== */ /* -------------------------------------------------------------------- 1. Brand Colors -------------------------------------------------------------------- */ --color-brand-primary: #C9A227; --color-brand-secondary: #8C6D1F; /* -------------------------------------------------------------------- 2. Surface Colors -------------------------------------------------------------------- */ --color-surface-default: #F7F7F8; --color-surface-subtle: #EDEEF1; --color-surface-raised: #FFFFFF; --color-surface-inverse: #14161A; /* -------------------------------------------------------------------- 3. Background Colors -------------------------------------------------------------------- */ --color-background-default: #FFFFFF; --color-background-subtle: #F7F7F8; --color-background-inverse: #0F1013; /* -------------------------------------------------------------------- 4. Text Colors -------------------------------------------------------------------- */ --color-text-primary: #14161A; --color-text-secondary: #4B4F58; --color-text-tertiary: #7A7F87; --color-text-inverse: #FFFFFF; --color-text-disabled: #B3B6BC; /* -------------------------------------------------------------------- 5. Border Colors -------------------------------------------------------------------- */ --color-border-default: #E1E2E6; --color-border-subtle: #EEEEF0; --color-border-strong: #C4C6CC; /* -------------------------------------------------------------------- 6. Interactive Colors -------------------------------------------------------------------- */ --color-interactive-default: #C9A227; --color-interactive-hover: #B4901F; --color-interactive-active: #8C6D1F; --color-interactive-disabled: #D8CFA8; --color-interactive-focus: #8C6D1F; /* -------------------------------------------------------------------- 7. Success -------------------------------------------------------------------- */ --color-success: #1E8E5A; --color-success-subtle: #E6F6EE; --color-success-border: #A9DFC3; /* -------------------------------------------------------------------- 8. Warning -------------------------------------------------------------------- */ --color-warning: #C77700; --color-warning-subtle: #FFF1DC; --color-warning-border: #F5C177; /* -------------------------------------------------------------------- 9. Error -------------------------------------------------------------------- */ --color-error: #C6323A; --color-error-subtle: #FCEAEB; --color-error-border: #F0B7BB; /* -------------------------------------------------------------------- 10. Information -------------------------------------------------------------------- */ --color-information: #1F6FEB; --color-information-subtle: #E8F1FE; --color-information-border: #A9C9F5; /* -------------------------------------------------------------------- 11. Overlay Categoría oficial derivada exclusivamente de la Escala de Neutros (13-UI-DESIGN-SYSTEM.md, 6.4 y 6.8), destinada en exclusiva a garantizar la legibilidad de contenido superpuesto sobre fotografía o video. La opacidad queda encapsulada en cada token: ningún Pattern declara rgba() de forma independiente, ni combina esta categoría con Brand, Interactive o Colores de estado. -------------------------------------------------------------------- */ --color-overlay-soft: rgba(20, 22, 26, 0.35); --color-overlay-default: rgba(20, 22, 26, 0.55); --color-overlay-emphasis: rgba(20, 22, 26, 0.75); --color-overlay-inverse: rgba(255, 255, 255, 0.55); /* ======================================================================== 3.2 Tipografía ======================================================================== */ /* -------------------------------------------------------------------- 12. Font Family -------------------------------------------------------------------- */ --font-family-primary: "Manrope Variable", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; /* -------------------------------------------------------------------- 13. Font Sizes Escala fluida mediante clamp(); valor máximo anclado a Desktop conforme a la estrategia oficial Desktop First (5.2, 5.6). -------------------------------------------------------------------- */ --font-size-display: clamp(2.5rem, 1.8rem + 3vw, 5.5rem); --font-size-hero: clamp(2.25rem, 1.6rem + 2.6vw, 4.5rem); --font-size-h1: clamp(2rem, 1.5rem + 2vw, 3.5rem); --font-size-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); --font-size-h3: clamp(1.5rem, 1.3rem + 1vw, 2.25rem); --font-size-h4: clamp(1.25rem, 1.15rem + 0.6vw, 1.75rem); --font-size-h5: clamp(1.125rem, 1.05rem + 0.4vw, 1.5rem); --font-size-h6: clamp(1rem, 0.95rem + 0.3vw, 1.25rem); --font-size-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem); --font-size-body-large: clamp(1.0625rem, 1rem + 0.2vw, 1.25rem); --font-size-body: clamp(1rem, 0.95rem + 0.15vw, 1.125rem); --font-size-body-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem); --font-size-caption: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem); --font-size-label: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem); --font-size-button: clamp(0.875rem, 0.86rem + 0.1vw, 1rem); --font-size-navigation: clamp(0.875rem, 0.86rem + 0.1vw, 1rem); /* -------------------------------------------------------------------- 14. Font Weights Cinco pesos oficiales obtenidos del eje variable de Manrope (5.3). -------------------------------------------------------------------- */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* -------------------------------------------------------------------- 15. Line Heights -------------------------------------------------------------------- */ --line-height-tight: 1.1; --line-height-heading: 1.25; --line-height-body: 1.6; --line-height-loose: 1.8; /* -------------------------------------------------------------------- 16. Letter Spacing -------------------------------------------------------------------- */ --letter-spacing-tight: -0.02em; --letter-spacing-default: 0em; --letter-spacing-wide: 0.02em; --letter-spacing-wider: 0.08em; /* ======================================================================== 3.3 Espaciado ======================================================================== */ /* -------------------------------------------------------------------- 17. Space Scale -------------------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; /* ======================================================================== 3.4 Bordes ======================================================================== */ /* -------------------------------------------------------------------- 18. Border Width -------------------------------------------------------------------- */ --border-width-none: 0; --border-width-default: 1px; --border-width-thick: 2px; /* -------------------------------------------------------------------- 19. Border Radius -------------------------------------------------------------------- */ --border-radius-none: 0; --border-radius-sm: 4px; --border-radius-md: 8px; --border-radius-lg: 16px; --border-radius-full: 9999px; /* -------------------------------------------------------------------- 20. Border Style -------------------------------------------------------------------- */ --border-style-solid: solid; --border-style-none: none; /* ======================================================================== 3.5 Sombras ======================================================================== */ /* -------------------------------------------------------------------- 21. Shadows -------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(20, 22, 26, 0.06); --shadow-sm: 0 2px 4px rgba(20, 22, 26, 0.08); --shadow-md: 0 4px 8px rgba(20, 22, 26, 0.10); --shadow-lg: 0 8px 16px rgba(20, 22, 26, 0.12); --shadow-xl: 0 16px 32px rgba(20, 22, 26, 0.14); /* ======================================================================== 3.6 Elevación ======================================================================== */ /* -------------------------------------------------------------------- 22. Elevation -------------------------------------------------------------------- */ --elevation-0: none; --elevation-1: var(--shadow-xs); --elevation-2: var(--shadow-sm); --elevation-3: var(--shadow-md); --elevation-4: var(--shadow-lg); --elevation-5: var(--shadow-xl); /* ======================================================================== 3.7 Breakpoints ======================================================================== */ /* -------------------------------------------------------------------- 23. Breakpoints -------------------------------------------------------------------- */ --breakpoint-mobile: 375px; --breakpoint-tablet: 768px; --breakpoint-laptop: 1024px; --breakpoint-desktop: 1280px; --breakpoint-wide: 1536px; /* ======================================================================== 3.8 Z-Index ======================================================================== */ /* -------------------------------------------------------------------- 24. Z-Index -------------------------------------------------------------------- */ --z-base: 0; --z-sticky: 100; --z-header: 200; --z-dropdown: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; --z-critical: 700; /* ======================================================================== 3.9 Motion ======================================================================== */ /* -------------------------------------------------------------------- 25. Motion Duration -------------------------------------------------------------------- */ --motion-duration-fast: 150ms; --motion-duration-normal: 250ms; --motion-duration-slow: 400ms; /* -------------------------------------------------------------------- 26. Motion Easing -------------------------------------------------------------------- */ --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); --motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); /* -------------------------------------------------------------------- 27. Motion Transition -------------------------------------------------------------------- */ --motion-transition-default: color var(--motion-duration-normal) var(--motion-easing-standard), background-color var(--motion-duration-normal) var(--motion-easing-standard), border-color var(--motion-duration-normal) var(--motion-easing-standard), box-shadow var(--motion-duration-normal) var(--motion-easing-standard), transform var(--motion-duration-normal) var(--motion-easing-standard); }