/* ============================================================
   HEPTA TECHNOLOGIES — Colors & Type
   Source of truth: GUIA-ESTILO.pdf (Netfreelance, cliente: Hepta)
   ============================================================ */

/* ---- Fonts (Google Fonts substitute — see README font note) ---- */
@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@100;200;300;400;500;600;700;800;900&family=Covered+By+Your+Grace&display=swap');

:root {
  /* ---------------------------------------------------------------
     CORPORATE COLORS  (from guía de estilo, page 1)
     --------------------------------------------------------------- */
  --hepta-cyan-light:    #5DEDED;   /* C65  M0  Y4  K0   — primary cyan */
  --hepta-cyan:          #33CCCC;   /* C82  M0  Y10 K0   — auxiliary cyan */
  --hepta-blue-gray:     #586980;   /* C63 M39 Y25 K10  — secondary blue-gray */
  --hepta-navy:          #283549;   /* C78 M55 Y38 K33  — corporate navy */
  --hepta-navy-deep:     #182B42;   /* C87 M58 Y39 K37  — deepest navy */
  --hepta-navy-soft:     #2E4360;   /* gradient end stop (extracted from logo SVG) */

  /* ---------------------------------------------------------------
     CORPORATE GRADIENT (135° per spec)
     --------------------------------------------------------------- */
  --hepta-gradient: linear-gradient(135deg, #182B42 0%, #2E4360 100%);
  --hepta-gradient-cyan: linear-gradient(135deg, #33CCCC 0%, #5DEDED 100%);

  /* ---------------------------------------------------------------
     NEUTRALS — derived to round out the palette for UI use
     --------------------------------------------------------------- */
  --hepta-white:        #FFFFFF;
  --hepta-paper:        #F7FAFB;
  --hepta-mist:         #ECF1F4;
  --hepta-line:         #D9E0E6;
  --hepta-muted:        #93A0AE;
  --hepta-ink:          #1B2536;   /* body text — slightly darker than navy-deep */
  --hepta-black:        #0B121E;

  /* ---------------------------------------------------------------
     SEMANTIC TOKENS — fg/bg/border
     --------------------------------------------------------------- */
  --bg-page:        var(--hepta-white);
  --bg-surface:     var(--hepta-white);
  --bg-subtle:      var(--hepta-paper);
  --bg-muted:       var(--hepta-mist);
  --bg-inverse:     var(--hepta-navy-deep);

  --fg-1:           var(--hepta-ink);          /* primary copy */
  --fg-2:           var(--hepta-blue-gray);    /* secondary copy */
  --fg-3:           var(--hepta-muted);        /* hint / meta */
  --fg-on-dark:     var(--hepta-white);
  --fg-on-cyan:     var(--hepta-navy-deep);

  --accent:         var(--hepta-cyan);
  --accent-text:    #0E7676;                /* darker cyan for text on white — WCAG AA */
  --accent-hover:   #2BB8B8;
  --accent-soft:    var(--hepta-cyan-light);
  --link:           var(--hepta-cyan);
  --link-hover:     var(--hepta-navy-deep);

  --border:         var(--hepta-line);
  --border-strong:  var(--hepta-blue-gray);
  --focus-ring:     0 0 0 3px rgba(51, 204, 204, 0.35);

  /* ---------------------------------------------------------------
     STATUS — derived; not part of original guide
     --------------------------------------------------------------- */
  --status-success: #2EB67D;
  --status-warning: #F2A93B;
  --status-danger:  #E5484D;
  --status-info:    var(--hepta-cyan);

  /* ---------------------------------------------------------------
     TYPOGRAPHY — families
     --------------------------------------------------------------- */
  --font-corporate: 'Catamaran', 'Helvetica Neue', Arial, sans-serif;          /* corporativa */
  --font-aux:       'Catamaran', 'Helvetica Neue', Arial, sans-serif;          /* auxiliar 1 — uses lighter weights */
  --font-handwrite: 'Covered By Your Grace', 'Bradley Hand', cursive;          /* auxiliar 2 — accent only */
  --font-mono:      ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Weights from Catamaran family */
  --w-thin:        100;
  --w-extralight:  200;
  --w-light:       300;
  --w-regular:     400;
  --w-medium:      500;
  --w-semibold:    600;
  --w-bold:        700;
  --w-extrabold:   800;
  --w-black:       900;

  /* Type scale — fluid-ish, mobile baseline 16px */
  --fs-display: clamp(2.5rem, 4.5vw + 1rem, 4.5rem);
  --fs-h1:      clamp(2rem, 2.5vw + 1rem, 3.25rem);
  --fs-h2:      clamp(1.625rem, 1.5vw + 1rem, 2.25rem);
  --fs-h3:      1.5rem;
  --fs-h4:      1.25rem;
  --fs-h5:      1.125rem;
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  --ls-tight:   -0.02em;
  --ls-snug:    -0.01em;
  --ls-wide:    0.04em;
  --ls-caps:    0.12em;

  /* ---------------------------------------------------------------
     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;
  --space-24: 96px;

  /* ---------------------------------------------------------------
     RADII — soft, slightly modern; subtle on inputs/cards
     --------------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------
     SHADOWS — anchored on navy-deep with low alpha
     --------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(24, 43, 66, 0.06);
  --shadow-sm: 0 2px 6px rgba(24, 43, 66, 0.08);
  --shadow-md: 0 8px 20px rgba(24, 43, 66, 0.10);
  --shadow-lg: 0 18px 40px rgba(24, 43, 66, 0.14);
  --shadow-cyan: 0 12px 30px rgba(51, 204, 204, 0.28);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6);

  /* ---------------------------------------------------------------
     MOTION
     --------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-normal:  240ms;
  --dur-slow:    420ms;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY ROLES
   ============================================================ */
html { color-scheme: light; }
body {
  font-family: var(--font-corporate);
  font-weight: var(--w-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display, h1.display {
  font-family: var(--font-corporate);
  font-weight: var(--w-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

h1, .h1 {
  font-family: var(--font-corporate);
  font-weight: var(--w-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
  color: var(--fg-1);
}

h2, .h2 {
  font-family: var(--font-corporate);
  font-weight: var(--w-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg-1);
}

h3, .h3 {
  font-family: var(--font-corporate);
  font-weight: var(--w-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-corporate);
  font-weight: var(--w-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

h5, .h5 {
  font-family: var(--font-corporate);
  font-weight: var(--w-semibold);
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

p, .p {
  font-family: var(--font-corporate);
  font-weight: var(--w-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-1);
}

.lead {
  font-family: var(--font-corporate);
  font-weight: var(--w-light);
  font-size: 1.25rem;
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

.small,  small { font-size: var(--fs-small); color: var(--fg-2); }
.micro            { font-size: var(--fs-micro); color: var(--fg-3); }

.eyebrow {
  font-family: var(--font-corporate);
  font-weight: var(--w-semibold);
  font-size: 0.78rem;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--accent);
}

.handwrite {
  font-family: var(--font-handwrite);
  font-weight: var(--w-regular);
  letter-spacing: 0;
}

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

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); }

::selection {
  background: var(--hepta-cyan);
  color: var(--hepta-navy-deep);
}