/* ============================================================
   Intiza Design System — Colors & Type
   Source: Intiza Manual de Marca, 2023
   ============================================================ */

/* Font — Archivo (Google Fonts)
   Used as the single brand typeface across digital and print.
   Weights: 300 / 400 / 500 / 700. Italic available.
*/
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ---------- PRIMARY PALETTE ------------------------------ */
  --intiza-azul-oscuro: #0526D0;   /* main brand blue */
  --intiza-celeste:     #DFE8F7;   /* light blue, soft surfaces */
  --intiza-negro:       #000000;
  --intiza-blanco:      #FFFFFF;

  /* Azul Oscuro tints (10% steps, per manual) */
  --azul-oscuro-90: #1E3DD5;
  --azul-oscuro-80: #3754DB;
  --azul-oscuro-70: #506BE1;
  --azul-oscuro-60: #6982E7;
  --azul-oscuro-50: #8299EC;
  --azul-oscuro-40: #9BB0F2;
  --azul-oscuro-30: #B4C7F8;
  --azul-oscuro-20: #CDD4F5;
  --azul-oscuro-10: #E6EAFA;

  /* Celeste tints */
  --celeste-90: #E2EAF8;
  --celeste-80: #E6EDF9;
  --celeste-70: #E9EFF9;
  --celeste-60: #ECF1FA;
  --celeste-50: #EFF4FB;
  --celeste-40: #F2F6FB;
  --celeste-30: #F5F8FC;
  --celeste-20: #F9FBFD;
  --celeste-10: #FCFDFE;

  /* ---------- SECONDARY PALETTE (product accents) ---------- */
  --intiza-azul-claro:  #067AFB;   /* Cobranzas accent */
  --intiza-violeta:     #4C49BD;   /* Pagos accent */
  --intiza-verde:       #02AEB9;   /* Proveedores accent */

  /* Greys */
  --intiza-gris-claro:  #E5E7EB;
  --intiza-gris:        #9CA3AF;
  --intiza-gris-oscuro: #4B5563;

  /* ---------- SEMANTIC SURFACES ---------------------------- */
  --bg:                 #FFFFFF;
  --bg-soft:            #F6F9FE;     /* near-celeste, panel bg */
  --bg-muted:           #DFE8F7;
  --bg-inverse:         #0526D0;
  --surface-card:       #FFFFFF;
  --surface-elevated:   #FFFFFF;
  --surface-glass:      rgba(255,255,255,0.55);

  /* Foreground */
  --fg-1:               #0A1233;     /* primary text — near black with blue cast */
  --fg-2:               #3B4565;     /* secondary text */
  --fg-3:               #6B7591;     /* tertiary / captions */
  --fg-disabled:        #B8C0D6;
  --fg-on-primary:      #FFFFFF;
  --fg-on-accent:       #FFFFFF;
  --fg-link:            var(--intiza-azul-oscuro);

  /* Borders */
  --border-soft:        #E4EAF5;
  --border:             #D6DEEE;
  --border-strong:      #B8C4DD;
  --border-focus:       var(--intiza-azul-oscuro);

  /* Status (derived, NOT in manual — flagged) */
  --success:            #02AEB9;     /* reuses Verde */
  --warning:            #E0A800;
  --danger:             #D6336C;
  --info:               var(--intiza-azul-claro);

  /* ---------- GRADIENTS (manual: "transición") ------------- */
  --gradient-brand:     linear-gradient(135deg, #0526D0 0%, #067AFB 100%);
  --gradient-soft:      linear-gradient(135deg, #DFE8F7 0%, #FFFFFF 100%);
  --gradient-deep:      linear-gradient(135deg, #0526D0 0%, #4C49BD 100%);
  --gradient-azul-celeste: linear-gradient(180deg, #0526D0 0%, #DFE8F7 100%);
  --gradient-glass:     linear-gradient(135deg, rgba(255,255,255,0.45) 0%, rgba(223,232,247,0.25) 100%);

  /* ---------- RADII --------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-card: 16px;       /* default for containers */

  /* ---------- SPACING (8pt grid) -------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* ---------- SHADOWS / ELEVATION ------------------------- */
  /* Soft, blue-tinted; never neutral grey */
  --shadow-1: 0 1px 2px rgba(5, 38, 208, 0.05);
  --shadow-2: 0 2px 8px rgba(5, 38, 208, 0.06), 0 1px 2px rgba(5, 38, 208, 0.04);
  --shadow-3: 0 8px 24px rgba(5, 38, 208, 0.08), 0 2px 6px rgba(5, 38, 208, 0.05);
  --shadow-4: 0 16px 40px rgba(5, 38, 208, 0.12), 0 4px 12px rgba(5, 38, 208, 0.06);
  --shadow-focus: 0 0 0 4px rgba(5, 38, 208, 0.18);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6);

  /* ---------- MOTION -------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    280ms;

  /* ---------- TYPOGRAPHY ---------------------------------- */
  --font-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Type scale — minimalist, generous, optical sizes */
  --fs-display:  72px;
  --fs-h1:       48px;
  --fs-h2:       36px;
  --fs-h3:       28px;
  --fs-h4:       22px;
  --fs-h5:       18px;
  --fs-body-lg:  18px;
  --fs-body:     16px;
  --fs-body-sm:  14px;
  --fs-caption:  12px;
  --fs-eyebrow:  12px;

  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-base:     1.5;
  --lh-relaxed:  1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.12em;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY
   The manual specifies: "minimalist, always lowercase" for
   display and headings. Body text retains normal casing.
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display, h1.display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: none;
}

h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: none;
  margin: 0;
}
h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  text-transform: none;
  margin: 0;
}
h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  text-transform: none;
  margin: 0;
}
h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  margin: 0;
}
h5, .h5 {
  font-size: var(--fs-h5);
  font-weight: var(--fw-medium);
  margin: 0;
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--intiza-azul-oscuro);
}

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-base); color: var(--fg-2); }
.caption { font-size: var(--fs-caption); line-height: 1.4; color: var(--fg-3); }

.highlight {
  /* "destacados" — manual: pill containers */
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--intiza-celeste);
  color: var(--intiza-azul-oscuro);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-sm);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

a {
  color: var(--fg-link);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
a:hover { opacity: 0.7; }