/* =========================================================================
   MiSecretaria.ai — Colors & Type tokens
   "Minimalismo amable con mascota y calidez"
   ========================================================================= */

/* -------- Webfonts ------------------------------------------------------- */
/* Body / UI — Plus Jakarta Sans (rounded, modern, friendly)
   FALLBACK / SUBSTITUTION: Source files not provided. Loading from Google
   Fonts. Replace with licensed assets when available. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* Numerals / Mono — JetBrains Mono for code / IDs / phone tickers */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ----------------------------------------------------------------------
     COLOR — Brand
     The MiSecretaria.ai brand sits on a single hue: a soft, slightly-cool
     periwinkle-indigo. Lots of light tints. One saturated hero blue.
     ---------------------------------------------------------------------- */
  --brand-50:  #F4F4FE;   /* page-tint, hover wash */
  --brand-100: #ECECFB;   /* badge bg, icon bubble */
  --brand-200: #D9D9F7;   /* dividers on tint, ring soft */
  --brand-300: #B9B7F0;   /* disabled primary, subtle text */
  --brand-400: #8E8AE6;   /* hover preview, decorative */
  --brand-500: #6C66E0;   /* PRIMARY — buttons, active, links, mascot accent */
  --brand-600: #5A53D6;   /* button hover */
  --brand-700: #443DBE;   /* button press, headline accent */
  --brand-800: #2F2A8A;   /* deep ink, rare */
  --brand-900: #1B1758;   /* logo monochrome dark */

  /* Lavender — secondary tint, used for cards/bubbles behind icons */
  --lavender-50:  #FBFBFF;
  --lavender-100: #F1F0FB;
  --lavender-200: #E4E2F6;
  --lavender-300: #C8C5EB;

  /* ----------------------------------------------------------------------
     COLOR — Neutrals (cool slate, slightly purple-tinted)
     ---------------------------------------------------------------------- */
  --ink-900: #0F1226;     /* primary heading, mascot face */
  --ink-800: #1B1F3B;
  --ink-700: #2F3556;     /* body strong */
  --ink-600: #4B5170;     /* body */
  --ink-500: #6B7191;     /* secondary text */
  --ink-400: #8A8FA8;     /* tertiary / placeholder */
  --ink-300: #B4B8CC;     /* disabled text */
  --ink-200: #DCDEE9;     /* borders */
  --ink-100: #EDEEF4;     /* hairlines, table rows */
  --ink-50:  #F6F7FB;     /* surface tint, sidebar bg */
  --ink-0:   #FFFFFF;     /* surface */

  /* Page background — barely off-white, with a hint of cool */
  --bg-page: #FAFAFE;
  --bg-surface: #FFFFFF;
  --bg-surface-2: #F6F7FB;
  --bg-sidebar: #FBFBFF;

  /* ----------------------------------------------------------------------
     COLOR — Semantic
     ---------------------------------------------------------------------- */
  --success-50:  #E8F7EE;
  --success-100: #D2F0DC;
  --success-500: #29B26A;     /* "Resuelta", check icons */
  --success-700: #15803D;
  --success-text:#0F6B3A;

  --warning-50:  #FFF4E0;
  --warning-100: #FFE7BF;
  --warning-500: #E89324;     /* "Pendiente", "Borrador" */
  --warning-700: #A35E08;
  --warning-text:#7A4406;

  --danger-50:   #FDECEC;
  --danger-100:  #F9D5D6;
  --danger-500:  #E04848;     /* "Escalada", "Fallido" */
  --danger-700:  #B11E1E;
  --danger-text: #8C1414;

  --info-50:   #E8F1FF;
  --info-100:  #D1E3FF;
  --info-500:  #2F7BFF;       /* "INFO" log tag, "Ver todas" links */
  --info-700:  #1B5BCC;

  /* Voice/AI accents — used sparingly in waveforms, sparkles */
  --accent-cyan: #7BD7E8;
  --accent-pink: #F0A4D6;     /* mascot blush on white variants */

  /* ----------------------------------------------------------------------
     ELEVATION — soft, indigo-tinted shadows. Never gray.
     ---------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(28, 27, 79, 0.04);
  --shadow-sm: 0 2px 6px rgba(28, 27, 79, 0.05), 0 1px 2px rgba(28, 27, 79, 0.04);
  --shadow-md: 0 6px 18px rgba(28, 27, 79, 0.06), 0 2px 4px rgba(28, 27, 79, 0.04);
  --shadow-lg: 0 18px 40px rgba(28, 27, 79, 0.08), 0 4px 12px rgba(28, 27, 79, 0.05);
  --shadow-xl: 0 32px 60px rgba(28, 27, 79, 0.10), 0 8px 20px rgba(28, 27, 79, 0.06);
  --shadow-focus: 0 0 0 4px rgba(108, 102, 224, 0.18);

  /* ----------------------------------------------------------------------
     RADII — generously rounded. Never sharp.
     ---------------------------------------------------------------------- */
  --radius-xs: 6px;     /* tags, mini chips */
  --radius-sm: 10px;    /* buttons, inputs, badges */
  --radius-md: 14px;    /* small cards, list rows */
  --radius-lg: 20px;    /* primary cards, modals */
  --radius-xl: 28px;    /* hero cards */
  --radius-pill: 999px; /* pills, avatars */

  /* ----------------------------------------------------------------------
     SPACING — 4px base scale
     ---------------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ----------------------------------------------------------------------
     BORDERS
     ---------------------------------------------------------------------- */
  --border: 1px solid var(--ink-200);
  --border-soft: 1px solid var(--ink-100);
  --border-strong: 1px solid var(--ink-300);
  --border-brand: 1px solid var(--brand-200);

  /* ----------------------------------------------------------------------
     TYPE — Families
     ---------------------------------------------------------------------- */
  --font-sans: 'Plus Jakarta Sans', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;

  /* TYPE — Sizes (clamp where appropriate) */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  28px;
  --text-4xl:  36px;
  --text-5xl:  48px;
  --text-6xl:  64px;

  /* Animation */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.6, 0, .2, 1);
  --dur-fast: 120ms;
  --dur-med: 220ms;
  --dur-slow: 380ms;
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES
   Use these on <h1>, <p>, <code>, etc., or via @apply-style mixins below.
   ========================================================================= */
html, body {
  font-family: var(--font-sans);
  color: var(--ink-700);
  background: var(--bg-page);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 5vw, var(--text-6xl));
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink-900);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  text-wrap: balance;
}

h3, .h3 {
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink-900);
}

h4, .h4 {
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1.3;
  color: var(--ink-900);
}

h5, .h5 {
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.35;
  color: var(--ink-800);
}

h6, .h6, .eyebrow {
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-600);
}

p, .body {
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--ink-600);
  text-wrap: pretty;
}

.body-lg {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--ink-600);
}

.body-sm {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink-500);
}

small, .caption {
  font-size: var(--text-xs);
  color: var(--ink-500);
  line-height: 1.4;
}

a, .link {
  color: var(--brand-600);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover, .link:hover { color: var(--brand-700); }

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--ink-50);
  border: var(--border-soft);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  color: var(--ink-800);
}

.metric {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

.metric-sm {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

/* Selection */
::selection {
  background: var(--brand-200);
  color: var(--brand-900);
}