/* ============================================================
   Absentix — Foundations: Colors + Type
   ============================================================
   Brand: Absentix (https://www.absentix.com)
   Sector: Workforce absenteeism consulting + RPA platform
   Locale: Spanish / Basque Country (Bilbao)
   ============================================================ */

/* ---------- WEB FONTS ----------
   Bitter (Google Fonts) — display serif. Closest substitute we found
   for the wordmark; Absentix may use a different licensed serif.
   FLAGGED FOR USER: please confirm the real display font.
   Source Sans 3 — body sans, broad multilingual support (Spanish/Basque).
*/
@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ============================================================
     BRAND COLORS — sampled directly from the logo
     ============================================================ */
  --brand-teal:        #1BB89B;   /* wordmark — primary */
  --brand-teal-600:    #14A188;
  --brand-teal-700:    #0E8A74;
  --brand-teal-500:    #1BB89B;   /* alias */
  --brand-teal-400:    #4DC9B3;
  --brand-teal-300:    #82D9C9;
  --brand-teal-200:    #B5E8DD;
  --brand-teal-100:    #DBF2EC;
  --brand-teal-50:     #EFF9F6;

  --brand-blue:        #036DB7;   /* brackets — secondary */
  --brand-blue-700:    #03579A;
  --brand-blue-600:    #036DB7;   /* alias */
  --brand-blue-500:    #1A82CB;
  --brand-blue-400:    #4A9CD8;
  --brand-blue-300:    #7DB7E2;
  --brand-blue-200:    #B0D2EC;
  --brand-blue-100:    #DCE9F6;
  --brand-blue-50:     #EEF4FB;

  /* ============================================================
     NEUTRALS — warm-leaning grays
     Tuned to sit alongside teal without going icy.
     ============================================================ */
  --neutral-0:    #FFFFFF;
  --neutral-25:   #FBFBF9;       /* page background, warm white */
  --neutral-50:   #F5F6F4;
  --neutral-100:  #ECEDEA;
  --neutral-200:  #DDDEDA;
  --neutral-300:  #C5C7C2;
  --neutral-400:  #9CA09B;
  --neutral-500:  #6F736E;
  --neutral-600:  #4F534F;
  --neutral-700:  #353835;       /* primary body text */
  --neutral-800:  #1F2220;
  --neutral-900:  #0D0F0E;

  /* ============================================================
     SEMANTIC COLORS
     ============================================================ */
  --success:       #1BB89B;       /* uses brand teal */
  --success-bg:    #DBF2EC;
  --success-fg:    #0E8A74;

  --warning:       #E8A726;
  --warning-bg:    #FBEFD1;
  --warning-fg:    #8A5A00;

  --danger:        #D7464C;
  --danger-bg:    #FADCDD;
  --danger-fg:    #8A1A20;

  --info:          #036DB7;       /* uses brand blue */
  --info-bg:       #DCE9F6;
  --info-fg:       #03579A;

  /* ============================================================
     SEMANTIC TOKENS  (fg / bg / border / surface)
     ============================================================ */
  --fg-1:          var(--neutral-800);   /* high-emphasis text */
  --fg-2:          var(--neutral-700);   /* body */
  --fg-3:          var(--neutral-500);   /* secondary / supporting */
  --fg-4:          var(--neutral-400);   /* disabled / hint */
  --fg-on-brand:   #FFFFFF;

  --bg-page:       var(--neutral-25);
  --bg-surface:    var(--neutral-0);
  --bg-subtle:     var(--neutral-50);
  --bg-muted:      var(--neutral-100);

  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-focus:  var(--brand-blue);

  --link:          var(--brand-blue);
  --link-hover:    var(--brand-blue-700);

  /* ============================================================
     TYPE
     ============================================================ */
  --font-display:  "Bitter", "Bree Serif", "Georgia", serif;
  --font-body:     "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:     "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Sizes — fluid-friendly scale */
  --size-xs:    12px;
  --size-sm:    14px;
  --size-base:  16px;
  --size-md:    18px;
  --size-lg:    20px;
  --size-xl:    24px;
  --size-2xl:   30px;
  --size-3xl:   38px;
  --size-4xl:   48px;
  --size-5xl:   60px;
  --size-6xl:   76px;

  /* Weights */
  --w-regular:   400;
  --w-medium:    500;
  --w-semibold:  600;
  --w-bold:      700;

  /* Line-heights */
  --lh-tight:    1.12;
  --lh-snug:     1.28;
  --lh-normal:   1.5;
  --lh-relaxed:  1.7;

  /* Letter-spacing */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* ============================================================
     SPACING / RADII / SHADOWS / LAYOUT
     ============================================================ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 72px;
  --sp-11: 96px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(15, 32, 30, 0.04);
  --shadow-sm: 0 2px 6px rgba(15, 32, 30, 0.06), 0 1px 2px rgba(15, 32, 30, 0.04);
  --shadow-md: 0 8px 18px rgba(15, 32, 30, 0.08), 0 2px 4px rgba(15, 32, 30, 0.05);
  --shadow-lg: 0 18px 38px rgba(15, 32, 30, 0.10), 0 6px 12px rgba(15, 32, 30, 0.06);
  --shadow-focus: 0 0 0 3px rgba(3, 109, 183, 0.28);

  --container-max: 1200px;
  --content-max: 720px;

  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      320ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
html { font-size: 16px; }
body {
  font-family: var(--font-body);
  color: var(--fg-2);
  background: var(--bg-page);
  font-size: var(--size-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

.h-display, .h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  color: var(--fg-1);
  font-weight: var(--w-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-snug);
  margin: 0;
}

.h-display { font-size: var(--size-6xl); line-height: 1.04; letter-spacing: -0.025em; font-weight: var(--w-bold); }
.h1        { font-size: var(--size-5xl); }
.h2        { font-size: var(--size-4xl); }
.h3        { font-size: var(--size-3xl); }
.h4        { font-size: var(--size-2xl); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--w-semibold);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-teal-700);
}

.lead {
  font-family: var(--font-body);
  font-size: var(--size-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  font-weight: var(--w-regular);
}

p, .body  { font-size: var(--size-base); line-height: var(--lh-normal); color: var(--fg-2); }
.body-sm  { font-size: var(--size-sm); line-height: var(--lh-normal); color: var(--fg-3); }
.body-xs  { font-size: var(--size-xs); line-height: var(--lh-normal); color: var(--fg-3); }

.label {
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: var(--w-semibold);
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
  color: var(--fg-1);
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }