/* ============================================================================= ng-template — TOKENS (contrato del design system activo, pegado tal cual) ----------------------------------------------------------------------------- 36 `--app-*` (color) · 9 tipografía · 21 layout/grid · 45 tema claro · 49 tema oscuro. El tema conmuta por ATRIBUTO [data-theme='dark'] sobre , nunca por media query. Ningún `--app-*` cambia en oscuro. No se inventan tokens: el template no declara spacing, radio ni motion. ============================================================================= */ /* 1. ANCLAS DE COLOR ------------------------------------------------------- */ :root { --app-header: #1976d2; /* slot del generador ($2) */ --app-on-header: #ffffff; /* calculado por luminancia del header */ --app-primary: #1976d2; /* slot del generador ($3) */ --app-secondary: #00897b; /* slot del generador ($4) */ --app-tertiary: #5e35b1; /* slot del generador ($5) */ --app-success: #2e7d32; /* constante semántica — NO se reemplaza */ --app-warning: #f57c00; /* constante semántica — NO se reemplaza */ --app-error: #c62828; /* constante semántica — NO se reemplaza */ --app-super-admin: #ffde00; /* 2. DERIVADOS POR color.mix() ------------------------------------------- */ --app-primary-light: #d6e6f7; --app-primary-container: #e8f1fb; --app-primary-dark: #1564b3; --app-secondary-light: #d1eae7; --app-secondary-container: #e6f3f2; --app-secondary-dark: #007469; --app-tertiary-light: #e2dbf1; --app-tertiary-container: #efebf7; --app-tertiary-dark: #502d96; /* 3. ON-COLOR ------------------------------------------------------------ */ --app-on-primary: #ffffff; --app-on-secondary: #ffffff; --app-on-tertiary: #ffffff; --app-on-success: #ffffff; --app-on-warning: #000000; --app-on-error: #ffffff; /* 4. NEUTRALES ----------------------------------------------------------- */ --app-neutral: #76777a; --app-neutral-light: #c7c6ca; --app-neutral-dark: #2f3033; --app-neutral-bg: #f1f0f4; --app-neutral-bg-dark: #1a1c1e; --app-neutral-surface: #faf9fd; --app-neutral-outline: #909094; /* 5. NEUTRAL VARIANT ----------------------------------------------------- */ --app-neutral-variant: #74777e; --app-neutral-variant-light: #c4c6ce; --app-neutral-variant-dark: #2d3037; --app-neutral-variant-bg: #eff0f9; --app-neutral-variant-outline: #8e9198; } /* 6. TIPOGRAFÍA ------------------------------------------------------------ Las 5 familias son self-hosted en el template. Acá no se empaqueta .woff2 y NO se cargan fuentes remotas: los tokens resuelven a su fallback de sistema. */ :root { --primary-font: Poppins, sans-serif; --secondary-font: Open Sans, sans-serif; --terciary-font: Montserrat, sans-serif; /* sic — nombre real del token */ --monospace-font: M PLUS 1 Code, monospace; --font-light: 300; --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 800; } /* 7. LAYOUT / GRID --------------------------------------------------------- */ :root { --grid-container-width: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); --grid-profile-card: repeat(auto-fit, minmax(min(100%, 19.74rem), 1fr)); --grid-skills-width: repeat(auto-fit, minmax(min(100%, 19.74rem), 1fr)); --grid-mobile-width: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); --grid-complete-width: repeat(auto-fit, minmax(min(100%, 36rem), 1fr)); --grid-footer-width: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); --gallery-pic-width: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); --forma-input-width: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); --services-blocks-width: repeat(auto-fit, minmax(min(100%, 32rem), 1fr)); --container-width: min(100%, 12rem); --container-pic-width: minmax(min(100%, 12rem), 1fr); --container-minmax-width: minmax(min(100%, 12rem), 1fr); --gallery-container-width: minmax(min(100%, 12rem), 1fr); --main-section-width: minmax(min(80%, 12rem), 80%); --navbar-width: min(100%, 18rem); --logo-width: min(100%, 10rem); --ticker: min(100%, 28rem); --header-height: 5rem; --container-height: calc(100vh - 5rem); --gallery-container-height: calc(80vh - 13rem); --main-section-height: calc(100vh - var(--header-height)); } /* 8. TEMA — MODO CLARO ----------------------------------------------------- */ :root { --theme-bg: #f5f5f5; --theme-bg-elevated: #ffffff; --theme-bg-surface: #fafafa; --theme-text: rgba(0, 0, 0, 0.87); --theme-text-secondary: rgba(0, 0, 0, 0.6); --theme-text-disabled: rgba(0, 0, 0, 0.38); --theme-border: #e0e0e0; --theme-divider: rgba(0, 0, 0, 0.12); --theme-header-bg: var(--app-header); --theme-header-text: var(--app-on-header); --theme-sidenav-bg: #ffffff; --theme-sidenav-text: #2f3033; --theme-sidenav-hover: #f5f5f5; --theme-sidenav-active-bg: var(--app-primary-container); --theme-sidenav-active-text: var(--app-primary); --theme-sidenav-subitem-bg: var(--app-primary-container); --theme-sidenav-subitem-hover: var(--app-primary-light); --mat-sys-on-surface: var(--theme-text); --mat-form-field-outlined-input-text-color: var(--theme-text); --agent-frontend-text: #1a237e; --agent-frontend-bg: #e8eaf6; --agent-frontend-legacy-text: #4a148c; --agent-frontend-legacy-bg: #f3e5f5; --agent-backend-text: #004d40; --agent-backend-bg: #e0f2f1; --agent-bff-text: #e65100; --agent-bff-bg: #fff3e0; --agent-qa-text: #b71c1c; --agent-qa-bg: #ffebee; --agent-devops-text: #263238; --agent-devops-bg: #eceff1; --agent-migration-text: #3e2723; --agent-migration-bg: #efebe9; --agent-ui-text: #0d47a1; --agent-ui-bg: #e3f2fd; --agent-planner-text: #1b5e20; --agent-planner-bg: #e8f5e9; --agent-default-text: #37474f; --agent-default-bg: #eceff1; --result-success-text: #1b5e20; --result-success-bg: #e8f5e9; --result-failure-text: #b71c1c; --result-failure-bg: #ffebee; --result-timeout-text: #e65100; --result-timeout-bg: #fff3e0; } /* 9. TEMA — MODO OSCURO ---------------------------------------------------- */ [data-theme='dark'] { --theme-bg: #121212; --theme-bg-elevated: #1e1e1e; --theme-bg-surface: #252525; --theme-text: #f5f5f5; --theme-text-secondary: #cccccc; --theme-text-disabled: #777777; --theme-border: #333333; --theme-divider: rgba(255, 255, 255, 0.12); --theme-header-bg: #1e1e1e; --theme-header-text: #ffffff; --theme-sidenav-bg: #1e1e1e; --theme-sidenav-text: #f5f5f5; --theme-sidenav-hover: #333333; --theme-sidenav-active-bg: #1976d2; --theme-sidenav-active-text: #ffffff; --theme-sidenav-subitem-bg: #2a3f54; --theme-sidenav-subitem-hover: #3a5068; --mat-sys-on-surface: var(--theme-text); --mat-form-field-outlined-input-text-color: var(--theme-text); --mat-form-field-container-text-color: var(--theme-text); --agent-frontend-text: #9fa8da; --agent-frontend-bg: rgba(26, 35, 126, 0.25); --agent-frontend-legacy-text: #ce93d8; --agent-frontend-legacy-bg: rgba(74, 20, 140, 0.25); --agent-backend-text: #80cbc4; --agent-backend-bg: rgba(0, 77, 64, 0.25); --agent-bff-text: #ffb74d; --agent-bff-bg: rgba(230, 81, 0, 0.2); --agent-qa-text: #ef9a9a; --agent-qa-bg: rgba(183, 28, 28, 0.2); --agent-devops-text: #b0bec5; --agent-devops-bg: rgba(38, 50, 56, 0.3); --agent-migration-text: #bcaaa4; --agent-migration-bg: rgba(62, 39, 35, 0.25); --agent-ui-text: #90caf9; --agent-ui-bg: rgba(13, 71, 161, 0.25); --agent-planner-text: #a5d6a7; --agent-planner-bg: rgba(27, 94, 32, 0.25); --agent-default-text: #b0bec5; --agent-default-bg: rgba(55, 71, 79, 0.3); --result-success-text: #a5d6a7; --result-success-bg: rgba(27, 94, 32, 0.25); --result-failure-text: #ef9a9a; --result-failure-bg: rgba(183, 28, 28, 0.2); --result-timeout-text: #ffb74d; --result-timeout-bg: rgba(230, 81, 0, 0.2); --mdc-outlined-text-field-container-color: transparent; --mdc-filled-text-field-container-color: #1a1c1e; --mdc-text-field-filled-container-color: #1a1c1e; } /* 10. TEMA SANDBOX --------------------------------------------------------- */ [data-sandbox='true'] { --theme-header-bg: var(--app-warning); --theme-header-text: #000000; --theme-sidenav-active-bg: #fff3e0; --theme-sidenav-active-text: #f57c00; --theme-sidenav-subitem-bg: #fff8e1; --theme-sidenav-subitem-hover: #ffecb3; } [data-theme='dark'][data-sandbox='true'] { --theme-header-bg: var(--app-warning); --theme-header-text: #000000; --theme-sidenav-active-bg: #4a3000; --theme-sidenav-active-text: #ffb74d; --theme-sidenav-subitem-bg: #3d2800; --theme-sidenav-subitem-hover: #5c3d00; }