/* =============================================================================
   ng-template — TOKENS (contrato, pegado tal cual)
   Fuente: ddelavega/ng-template @ main cc78690
   NINGUN valor de este archivo se redefine en WIMB. Toda la piel de la app
   consume var(--app-*) / var(--theme-*): no hay literales de color fuera de aca.
   ============================================================================= */

/* 1. ANCLAS DE COLOR — 9 tokens */
:root {
  --app-header: #1976d2;          /* slot del generador ($2) */
  --app-on-header: #ffffff;       /* el generador lo CALCULA 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 semantica — NO se reemplaza */
  --app-warning: #f57c00;         /* constante semantica — NO se reemplaza */
  --app-error: #c62828;           /* constante semantica — NO se reemplaza */
  --app-super-admin: #ffde00;     /* hueco declarado */

  /* 2. DERIVADOS POR color.mix() — 9 tokens */
  --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 — 6 tokens */
  --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 — 7 tokens */
  --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 — 5 tokens */
  --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. TIPOGRAFIA — 9 tokens.
   Las 5 familias son self-hosted en el template. Este artefacto NO puede
   empaquetar los .woff2 (no estan en el workspace), asi que resuelven por el
   stack de sistema del propio token. Declarado, no disimulado. */
:root {
  --primary-font: Poppins, sans-serif;
  --secondary-font: Open Sans, sans-serif;
  --terciary-font: Montserrat, sans-serif;
  --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 — 21 tokens */
: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);

  --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. Selector real: atributo, sin media query.
   CERO --app-* en este bloque. */
[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);

  --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 — ortogonal al tema, tampoco toca --app-* */
[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;
}