/* ============================================================
   Club de Innovación · Uvitec — Color tokens
   Source of truth: tailwind.config.ts + brand style guide.
   Two brand hues: violeta (primary) and azul (secondary),
   used at roughly 30/30 with light tints filling the rest.
   ============================================================ */
:root {
  /* ---- Brand: Violeta (primary) ---- */
  --violet: #5b2984;          /* Violeta Club de Innovación — logo + primary actions */
  --violet-deep: #3d2d8a;     /* Mid-stop of the corporate gradient */
  --violet-soft: #f1eaf6;     /* Very light violet — soft fills, chips, icon wells */

  /* ---- Brand: Azul (secondary) ---- */
  --blue: #2c49a1;            /* Azul secundario — secondary accents, alt icon wells */
  --blue-soft: #e6ebf6;       /* Very light blue — soft fills */
  --navy: #0f2557;            /* Deep navy of social pieces / flyers */
  --navy-deep: #081a42;       /* Darkest navy — bottom of social gradients */

  /* ---- Ink (text) ---- */
  --ink: #1a1a1a;             /* Primary text */
  --ink-2: #4a4a4a;           /* Secondary text / body on light */
  --ink-3: #888888;           /* Tertiary text / captions, meta */

  /* ---- Lines & surfaces ---- */
  --line: #d4d4d4;            /* Default border */
  --line-2: #ebebeb;          /* Subtle divider */
  --surface: #ffffff;         /* Cards, nav, modals */
  --bg: #f6f8fc;              /* Page background — white with a cool blue temperature */

  /* ---- Feedback (green sync dot only real usage) ---- */
  --success: #34a853;         /* Google-calendar "synced" dot */

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */
  --color-primary: var(--violet);
  --color-primary-hover: #4d2270;      /* violet darkened ~10% for hover */
  --color-secondary: var(--blue);
  --text-heading: var(--ink);
  --text-body: var(--ink-2);
  --text-muted: var(--ink-3);
  --text-on-brand: #ffffff;
  --border-default: var(--line);
  --border-subtle: var(--line-2);
  --border-focus: var(--violet);
  --surface-page: var(--bg);
  --surface-card: var(--surface);
  --surface-soft: var(--violet-soft);
  --surface-soft-alt: var(--blue-soft);
  --link: var(--violet);
  --link-hover: var(--color-primary-hover);

  /* ============================================================
     Gradients — corporate violet→blue and its soft counterpart
     ============================================================ */
  --gradient-brand: linear-gradient(135deg, #5b2984 0%, #3d2d8a 45%, #2c49a1 100%);
  --gradient-brand-soft: linear-gradient(135deg, #ffffff 0%, #eef2fb 60%, #dbe4f7 100%);
  /* Social/editorial: deep navy with a soft top-right light bloom */
  --gradient-social: radial-gradient(120% 90% at 85% 8%, #2748a8 0%, #12275f 42%, #081a42 100%);
}