/* ============================================================
   PackDesk — Web design tokens
   Source of truth: app handoff design-tokens.md / tokens.css
   (Paleta B — Mediterráneo). The web ONLY uses colours from the
   app palette; web-specific values below are tints DERIVED from
   those tokens (documented in BUILD-NOTES.md), never new hues.
   Theme: [data-theme="light"] (default) / [data-theme="dark"]
   ============================================================ */

:root,
[data-theme="light"] {
  /* --- Brand accent + brand gradient (icon) --- */
  --acento:            #0E8074;
  --acento-hover:      #0B6B61;   /* darker stop of brand gradient */
  --acento-press:      #095B52;
  --grad-marca-1:      #15968A;   /* brand gradient top */
  --grad-marca-2:      #0B6B61;   /* brand gradient bottom */

  /* --- Semantic (app tokens) --- */
  --info:              #0E7490;
  --exito:             #257D36;
  --aviso:             #9A6300;
  --peligro:           #C03A35;

  /* --- Product states (app tokens) --- */
  --offline:           #6E6E73;
  --sync:              #3672D9;
  --conflicto:         #7C3AED;
  --reconectar:        #C2570B;

  /* --- Tints (base colour @ 11% in light) --- */
  --tinte-acento:      rgba(14, 128, 116, 0.11);
  --tinte-info:        rgba(14, 116, 144, 0.11);
  --tinte-exito:       rgba(37, 125, 54, 0.11);
  --tinte-aviso:       rgba(154, 99, 0, 0.11);
  --tinte-peligro:     rgba(192, 58, 53, 0.11);
  --tinte-sync:        rgba(54, 114, 217, 0.11);
  --tinte-conflicto:   rgba(124, 58, 237, 0.11);
  --tinte-reconectar:  rgba(194, 87, 11, 0.11);

  /* --- Neutrals / surfaces (app tokens + derived web tints) --- */
  --fondo-pagina:      #F0F0F2;                 /* app fondo-ventana */
  --fondo-seccion:     #F6F7F7;                 /* derived: window neutral + 2% teal */
  --fondo-contenido:   #FFFFFF;                 /* app fondo-contenido */
  --fondo-elevado:     #FFFFFF;                 /* app fondo-elevado (cards) */
  --fondo-marca:       linear-gradient(165deg, #0F8276 0%, #0B6B61 60%, #095049 100%);
  --texto-primario:    #1D1D1F;
  --texto-secundario:  #6E6E73;
  --texto-terciario:   #86868B;
  --texto-sobre-acento:#FFFFFF;
  --separador:         rgba(0, 0, 0, 0.08);
  --separador-fuerte:  rgba(0, 0, 0, 0.14);
  --campo-bg:          #FFFFFF;
  --hover-fila:        rgba(0, 0, 0, 0.045);
  --foco-anillo:       #0E8074;

  /* glass (window chrome emulation, with reduce-transparency fallback) */
  --glass-sidebar:     rgba(246, 246, 248, 0.78);
  --glass-toolbar:     rgba(250, 250, 252, 0.72);
  --glass-fallback-sidebar: #F2F2F4;
  --glass-fallback-toolbar: #F7F7F9;

  /* desktop backdrop behind window mockups */
  --backdrop-mockup:   linear-gradient(160deg, #BFD9D4 0%, #E0E5E3 45%, #C9D4DC 100%);

  color-scheme: light;
}

[data-theme="dark"] {
  --acento:            #3CC3B2;
  --acento-hover:      #5BD0C1;
  --acento-press:      #2FB3A4;
  --grad-marca-1:      #15968A;
  --grad-marca-2:      #0B6B61;

  --info:              #3FB7D4;
  --exito:             #56C96E;
  --aviso:             #E8A93C;
  --peligro:           #E6685F;

  --offline:           #98989D;
  --sync:              #6FA0EF;
  --conflicto:         #A78BFA;
  --reconectar:        #F08C3E;

  --tinte-acento:      rgba(60, 195, 178, 0.19);
  --tinte-info:        rgba(63, 183, 212, 0.19);
  --tinte-exito:       rgba(86, 201, 110, 0.19);
  --tinte-aviso:       rgba(232, 169, 60, 0.19);
  --tinte-peligro:     rgba(230, 104, 95, 0.19);
  --tinte-sync:        rgba(111, 160, 239, 0.19);
  --tinte-conflicto:   rgba(167, 139, 250, 0.19);
  --tinte-reconectar:  rgba(240, 140, 62, 0.19);

  --fondo-pagina:      #1A1A1C;                 /* derived from app fondo-ventana */
  --fondo-seccion:     #1E1E20;                 /* app fondo-ventana */
  --fondo-contenido:   #232326;                 /* app fondo-contenido */
  --fondo-elevado:     #2C2C2E;                 /* app fondo-elevado */
  --fondo-marca:       linear-gradient(165deg, #0F8276 0%, #0B6B61 60%, #073C36 100%);
  --texto-primario:    #F5F5F7;
  --texto-secundario:  #98989D;
  --texto-terciario:   #6E6E73;
  --texto-sobre-acento:#08221F;
  --separador:         rgba(255, 255, 255, 0.10);
  --separador-fuerte:  rgba(255, 255, 255, 0.16);
  --campo-bg:          #2C2C2E;
  --hover-fila:        rgba(255, 255, 255, 0.06);
  --foco-anillo:       #3CC3B2;

  --glass-sidebar:     rgba(40, 40, 44, 0.72);
  --glass-toolbar:     rgba(36, 36, 40, 0.68);
  --glass-fallback-sidebar: #26262A;
  --glass-fallback-toolbar: #2A2A2E;

  --backdrop-mockup:   linear-gradient(160deg, #15211F 0%, #1B2026 55%, #11181C 100%);

  color-scheme: dark;
}

:root {
  /* --- Type (system stack only, per brand) --- */
  --font-ui:   -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, "Cascadia Code", Consolas, monospace;

  /* Fluid web type scale (≥ app sizes; hero much larger) */
  --t-display:  clamp(2.6rem, 1.6rem + 4.4vw, 4.5rem);   /* 41.6 → 72 */
  --t-h1:       clamp(2.1rem, 1.5rem + 2.6vw, 3.25rem);  /* 33.6 → 52 */
  --t-h2:       clamp(1.7rem, 1.3rem + 1.7vw, 2.5rem);   /* 27 → 40 */
  --t-h3:       clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);  /* 20 → 24 */
  --t-lead:     clamp(1.075rem, 1rem + 0.35vw, 1.3rem);  /* 17 → 21 */
  --t-body:     1.0625rem;   /* 17 */
  --t-small:    0.9375rem;   /* 15 */
  --t-caption:  0.8125rem;   /* 13 */

  /* Spacing (4/8 base, extended for web rhythm) */
  --esp-4: 4px; --esp-8: 8px; --esp-12: 12px; --esp-16: 16px;
  --esp-24: 24px; --esp-32: 32px; --esp-48: 48px; --esp-64: 64px;
  --esp-80: 80px; --esp-96: 96px; --esp-128: 128px;

  /* Radius (app emulation) */
  --radio-control: 8px;
  --radio-card:    14px;
  --radio-card-lg: 20px;
  --radio-pildora: 999px;
  --radio-ventana: 12px;

  /* Shadows (app tokens) */
  --sombra-card:    0 1px 3px rgba(0, 0, 0, 0.10);
  --sombra-card-lg: 0 12px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0,0,0,0.06);
  --sombra-popover: 0 8px 24px rgba(0, 0, 0, 0.18);
  --sombra-ventana: 0 24px 80px rgba(0, 0, 0, 0.30), 0 0 0 0.5px rgba(0,0,0,0.18);

  /* Motion (app curves) */
  --easing-estandar: cubic-bezier(0.32, 0.72, 0, 1);
  --easing-salida:   cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   320ms;

  /* Layout */
  --ancho-max:  1180px;
  --ancho-prosa: 720px;
  --header-h:   64px;
}