/* ==========================================================================
   Sysmatica Design System — Tokens
   Fuente de verdad: /brand-ai-sysmatica (manual de marca v1.0)
   Extensión web: sombras, glow y movimiento (ver DESIGN.md › "Extensiones tech")
   ========================================================================== */

@font-face { font-family: "Archivo"; font-weight: 300; font-style: normal; font-display: swap; src: url("assets/fonts/Archivo-Light.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/Archivo-Regular.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 500; font-style: normal; font-display: swap; src: url("assets/fonts/Archivo-Medium.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 600; font-style: normal; font-display: swap; src: url("assets/fonts/Archivo-SemiBold.woff2") format("woff2"); }

:root {
  /* ---- 1. Color · primitivos (palettes.json) --------------------------- */
  --sx-blue:    #2136AD;  /* primary   */
  --sx-sky:     #526AFA;  /* secondary */
  --sx-sun:     #F0B805;  /* accent    */
  --sx-jungle:  #77AD3D;  /* accent    */
  --sx-tomato:  #E74727;  /* accent    */
  --sx-sea:     #48BAF9;  /* accent    */

  --sx-black:       #000000;
  --sx-ink:         #020817;  /* inkBlack     */
  --sx-prussian:    #0F172A;  /* prussianBlue */
  --sx-grey-dark:   #BFBFBF;
  --sx-grey-mid:    #E6E6E6;
  --sx-grey-light:  #F7F7F7;
  --sx-white:       #FFFFFF;

  /* RGB sueltos, para sombras y glows con alpha */
  --sx-blue-rgb:     33 54 173;
  --sx-sky-rgb:      82 106 250;
  --sx-sea-rgb:      72 186 249;
  --sx-prussian-rgb: 15 23 42;

  /* ---- 2. Tipografía (typography.json) --------------------------------- */
  --sx-font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sx-font-icons: "Material Symbols Outlined";

  --sx-weight-light: 300;
  --sx-weight-regular: 400;
  --sx-weight-medium: 500;
  --sx-weight-semibold: 600;

  /* Escala web. El manual define 95 / 36 / 20 pt; se completa con pasos intermedios. */
  --sx-text-hero:   clamp(2.75rem, 1.35rem + 6vw, 5.9375rem); /* → 95px */
  --sx-text-h1:     clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
  --sx-text-h2:     clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
  --sx-text-intro:  clamp(1.375rem, 1.1rem + 1.2vw, 2.25rem);  /* → 36px */
  --sx-text-h3:     1.375rem;
  --sx-text-lead:   1.25rem;   /* 20px — body del manual */
  --sx-text-body:   1.0625rem;
  --sx-text-small:  0.875rem;
  --sx-text-eyebrow: 0.875rem;

  --sx-leading-display: 1;     /* 100% */
  --sx-leading-intro: 1.1;     /* 110% */
  --sx-leading-body: 1.3;      /* 130% */
  --sx-leading-prose: 1.5;     /* párrafos largos en pantalla */
  --sx-measure: 62ch;

  /* ---- 3. Espaciado · base 4px, "espacios amplios" ---------------------- */
  --sx-space-1: 0.25rem;
  --sx-space-2: 0.5rem;
  --sx-space-3: 0.75rem;
  --sx-space-4: 1rem;
  --sx-space-5: 1.5rem;
  --sx-space-6: 2rem;
  --sx-space-7: 3rem;
  --sx-space-8: 4rem;
  --sx-space-9: 6rem;
  --sx-space-10: 8rem;
  --sx-section: clamp(4rem, 2rem + 8vw, 9rem);
  --sx-gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --sx-container: 76rem;

  /* ---- 4. Forma · el chanfle del signo ---------------------------------- */
  /* En el signo el corte es ~30% del alto de la barra. */
  --sx-chamfer-xs: 6px;
  --sx-chamfer-sm: 10px;
  --sx-chamfer-md: 16px;
  --sx-chamfer-lg: 28px;
  --sx-chamfer-xl: 44px;
  --sx-radius: 2px;            /* inputs y piezas chicas: casi recto */

  /* ---- 5. Movimiento ----------------------------------------------------- */
  --sx-dur-instant: 90ms;
  --sx-dur-fast:    160ms;
  --sx-dur-base:    240ms;
  --sx-dur-slow:    420ms;
  --sx-dur-slower:  720ms;
  --sx-dur-ambient: 9s;

  --sx-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);     /* entra rápido, frena suave */
  --sx-ease-in:     cubic-bezier(0.7, 0, 0.84, 0);     /* salidas */
  --sx-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* desplazamientos */
  --sx-ease-snap:   cubic-bezier(0.2, 0, 0, 1);        /* UI precisa: tabs, toggles */
  --sx-ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.1 27.9%, 1.075 30.4%, 1.014 36.4%, 0.994 39.4%, 0.984 42.6%, 0.983 46.3%, 0.998 58%, 1.002 66%, 1);
  --sx-stagger: 70ms;

  /* ---- 6. Capas ---------------------------------------------------------- */
  --sx-z-sticky: 100;
  --sx-z-overlay: 200;
  --sx-z-modal: 300;
  --sx-z-toast: 400;
}

/* ==========================================================================
   Semánticos · tema claro (default: "usar fondos claros siempre que sea posible")
   ========================================================================== */
:root,
[data-theme="light"] {
  color-scheme: light;

  --sx-bg:            var(--sx-white);
  --sx-bg-subtle:     var(--sx-grey-light);
  --sx-surface:       var(--sx-white);
  --sx-surface-raised: var(--sx-white);
  --sx-border:        var(--sx-grey-mid);
  --sx-border-strong: var(--sx-grey-dark);

  --sx-text:          var(--sx-ink);
  --sx-text-muted:    color-mix(in srgb, var(--sx-prussian) 70%, white);
  --sx-text-faint:    color-mix(in srgb, var(--sx-prussian) 45%, white);

  --sx-primary:        var(--sx-blue);
  --sx-primary-hover:  var(--sx-sky);
  --sx-on-primary:     var(--sx-white);
  --sx-primary-soft:   color-mix(in srgb, var(--sx-blue) 7%, white);
  --sx-link:           var(--sx-blue);
  --sx-focus:          var(--sx-sky);

  --sx-success: var(--sx-jungle);
  --sx-warning: var(--sx-sun);
  --sx-danger:  var(--sx-tomato);
  --sx-info:    var(--sx-sea);

  --sx-pattern-ink: rgb(var(--sx-prussian-rgb) / 0.28);
  --sx-pattern-ink-lit: rgb(var(--sx-blue-rgb) / 0.6);

  /* Sombras: nunca gris neutro; siempre teñidas con el azul de marca.
     Se definen como drop-shadow porque las piezas chanfleadas usan clip-path. */
  --sx-elev-1: drop-shadow(0 1px 1px rgb(var(--sx-prussian-rgb) / 0.08)) drop-shadow(0 2px 4px rgb(var(--sx-blue-rgb) / 0.06));
  --sx-elev-2: drop-shadow(0 1px 2px rgb(var(--sx-prussian-rgb) / 0.08)) drop-shadow(0 8px 14px rgb(var(--sx-blue-rgb) / 0.10));
  --sx-elev-3: drop-shadow(0 2px 3px rgb(var(--sx-prussian-rgb) / 0.08)) drop-shadow(0 18px 28px rgb(var(--sx-blue-rgb) / 0.16));
  --sx-elev-4: drop-shadow(0 4px 6px rgb(var(--sx-prussian-rgb) / 0.10)) drop-shadow(0 32px 48px rgb(var(--sx-blue-rgb) / 0.22));
  --sx-glow:   drop-shadow(0 6px 18px rgb(var(--sx-sky-rgb) / 0.45));

  /* Equivalentes box-shadow para piezas rectas (inputs, popovers rectos) */
  --sx-shadow-1: 0 1px 2px rgb(var(--sx-prussian-rgb) / 0.08), 0 2px 6px rgb(var(--sx-blue-rgb) / 0.06);
  --sx-shadow-2: 0 2px 4px rgb(var(--sx-prussian-rgb) / 0.06), 0 12px 24px -6px rgb(var(--sx-blue-rgb) / 0.16);
  --sx-shadow-3: 0 4px 8px rgb(var(--sx-prussian-rgb) / 0.08), 0 28px 56px -12px rgb(var(--sx-blue-rgb) / 0.26);
  --sx-ring:     0 0 0 3px rgb(var(--sx-sky-rgb) / 0.35);
}

/* ==========================================================================
   Tema oscuro · para momentos tech (hero, demos, footers). Se aplica por sección.
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --sx-bg:            var(--sx-ink);
  --sx-bg-subtle:     var(--sx-prussian);
  --sx-surface:       var(--sx-prussian);
  --sx-surface-raised: color-mix(in srgb, var(--sx-prussian) 88%, var(--sx-sky));
  --sx-border:        rgb(255 255 255 / 0.10);
  --sx-border-strong: rgb(255 255 255 / 0.22);

  --sx-text:          var(--sx-white);
  --sx-text-muted:    var(--sx-grey-dark);
  --sx-text-faint:    color-mix(in srgb, var(--sx-grey-dark) 60%, var(--sx-ink));

  --sx-primary:        var(--sx-sky);
  --sx-primary-hover:  color-mix(in srgb, var(--sx-sky) 80%, white);
  --sx-on-primary:     var(--sx-white);
  --sx-primary-soft:   rgb(var(--sx-sky-rgb) / 0.14);
  --sx-link:           var(--sx-sea);
  --sx-focus:          var(--sx-sea);

  --sx-pattern-ink: rgb(255 255 255 / 0.2);
  --sx-pattern-ink-lit: rgb(255 255 255 / 0.42);

  /* En oscuro la elevación es luz, no sombra. */
  --sx-elev-1: drop-shadow(0 1px 0 rgb(0 0 0 / 0.5));
  --sx-elev-2: drop-shadow(0 8px 16px rgb(0 0 0 / 0.45)) drop-shadow(0 0 18px rgb(var(--sx-sky-rgb) / 0.10));
  --sx-elev-3: drop-shadow(0 18px 30px rgb(0 0 0 / 0.55)) drop-shadow(0 0 28px rgb(var(--sx-sky-rgb) / 0.18));
  --sx-elev-4: drop-shadow(0 30px 50px rgb(0 0 0 / 0.6)) drop-shadow(0 0 44px rgb(var(--sx-sky-rgb) / 0.26));
  --sx-glow:   drop-shadow(0 0 22px rgb(var(--sx-sky-rgb) / 0.6));

  --sx-shadow-1: 0 1px 0 rgb(0 0 0 / 0.5);
  --sx-shadow-2: 0 12px 24px -6px rgb(0 0 0 / 0.6), 0 0 24px rgb(var(--sx-sky-rgb) / 0.12);
  --sx-shadow-3: 0 28px 56px -12px rgb(0 0 0 / 0.7), 0 0 40px rgb(var(--sx-sky-rgb) / 0.2);
  --sx-ring:     0 0 0 3px rgb(var(--sx-sea-rgb) / 0.4);
}