/* ------------------------------------------------------------------ */
/*  HABiTEK Design System — Foundations                               */
/*  Derived from HABiTEK ÉTS official logos and ETS badge collection  */
/* ------------------------------------------------------------------ */

/* ---- Web fonts ---------------------------------------------------- */
/* Brand wordmark uses a heavy industrial sans (custom). Closest       */
/* Google Fonts match flagged in README.md: Saira Condensed (display)  */
/* + Barlow (text + UI). These are loaded from Google Fonts so the     */
/* system works without local font files.                              */

@import url("https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500;700;800;900&family=Barlow:wght@400;500;600;700;800&family=Barlow+Condensed:wght@500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap");

:root {
  /* ---------------------------------------------------------------- */
  /*  COLOR — Brand                                                    */
  /* ---------------------------------------------------------------- */
  /*  Three-color brand: Crimson red (HABiTEK red), Charcoal (slate),  */
  /*  Energy yellow (orbit dot). Sampled from the official PNG logos.  */

  --habitek-red:        #B61F2A;   /* primary brand red */
  --habitek-red-deep:   #8E1620;   /* pressed / accent shadow */
  --habitek-red-soft:   #E5535C;   /* hover lift */
  --habitek-red-tint:   #FBE9EB;   /* tinted bg */

  --habitek-charcoal:   #3F3F3F;   /* secondary brand neutral, used in wordmark "HAB" */
  --habitek-graphite:   #2A2A2A;   /* extreme contrast, body text on light */
  --habitek-ink:        #141414;   /* near-black, headings */

  --habitek-yellow:     #F5C518;   /* energy / orbit yellow */
  --habitek-yellow-deep:#D9A800;
  --habitek-yellow-soft:#FFE680;

  /* ---------------------------------------------------------------- */
  /*  COLOR — Neutrals (warm-cool gray scale tuned to the charcoal)   */
  /* ---------------------------------------------------------------- */
  --gray-0:  #FFFFFF;
  --gray-50: #FAFAF9;
  --gray-100:#F2F2F1;
  --gray-200:#E5E5E3;
  --gray-300:#CFCFCC;
  --gray-400:#A8A8A4;
  --gray-500:#76766F;
  --gray-600:#52524C;
  --gray-700:#3F3F3F;   /* matches habitek-charcoal */
  --gray-800:#2A2A2A;
  --gray-900:#141414;

  /* ---------------------------------------------------------------- */
  /*  COLOR — Badge palette (ETS partnership tiers)                   */
  /* ---------------------------------------------------------------- */
  --badge-eco-green:     #1F6B3A;   /* Collaborateur Éco-Tech */
  --badge-eco-green-bg:  #F4F6F2;
  --badge-navy:          #14294B;   /* Innovateur Durable */
  --badge-navy-accent:   #F2C94C;
  --badge-gold:          #E8A82A;   /* Partenaire Haute Performance */
  --badge-gold-deep:     #6B4A12;
  --badge-orange:        #D9711C;   /* Supporter Énergétique */
  --badge-orange-deep:   #8A3F0E;
  --badge-crimson:       #8E1A24;   /* Visionnaire Net Zéro */
  --badge-crimson-accent:#E8B92F;

  /* ---------------------------------------------------------------- */
  /*  SEMANTIC COLOR                                                  */
  /* ---------------------------------------------------------------- */
  --bg-page:        var(--gray-50);
  --bg-surface:     var(--gray-0);
  --bg-surface-2:   var(--gray-100);
  --bg-inverse:     var(--habitek-ink);

  --fg-1:           var(--habitek-graphite);   /* primary text */
  --fg-2:           var(--gray-600);            /* secondary text */
  --fg-3:           var(--gray-500);            /* tertiary / metadata */
  --fg-on-red:      #FFFFFF;
  --fg-on-yellow:   var(--habitek-ink);
  --fg-on-dark:     #FFFFFF;

  --border-subtle:  var(--gray-200);
  --border-strong:  var(--gray-300);
  --border-ink:     var(--habitek-ink);

  --accent:             var(--habitek-red);
  --accent-hover:       var(--habitek-red-soft);
  --accent-pressed:     var(--habitek-red-deep);
  --accent-fg:          var(--fg-on-red);

  --energy:             var(--habitek-yellow);
  --energy-fg:          var(--habitek-ink);

  --status-success:     var(--badge-eco-green);
  --status-warning:     var(--badge-orange);
  --status-info:        var(--badge-navy);
  --status-danger:      var(--habitek-red);

  /* ---------------------------------------------------------------- */
  /*  TYPOGRAPHY — Families                                           */
  /* ---------------------------------------------------------------- */
  /*  Display:   industrial condensed for headlines & wordmark feel    */
  /*  Text:      humanist sans for body (Barlow ≈ logo subline)        */
  /*  Mono:      JetBrains Mono for code / metric callouts             */
  --font-display: "Saira Condensed", "Barlow Condensed", Impact, sans-serif;
  --font-text:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------------------------------------------------------------- */
  /*  TYPOGRAPHY — Scale                                              */
  /* ---------------------------------------------------------------- */
  --fs-overline:  0.75rem;   /* 12 — uppercase eyebrows */
  --fs-caption:   0.8125rem; /* 13 — captions / metadata */
  --fs-body-sm:   0.875rem;  /* 14 */
  --fs-body:      1rem;      /* 16 */
  --fs-body-lg:   1.125rem;  /* 18 */
  --fs-h6:        1.25rem;   /* 20 */
  --fs-h5:        1.5rem;    /* 24 */
  --fs-h4:        1.875rem;  /* 30 */
  --fs-h3:        2.5rem;    /* 40 */
  --fs-h2:        3.5rem;    /* 56 */
  --fs-h1:        4.75rem;   /* 76 */
  --fs-display:   6.5rem;    /* 104 — hero takeover */

  --lh-tight:  1.02;
  --lh-snug:   1.15;
  --lh-normal: 1.4;
  --lh-loose:  1.6;

  --ls-display:   -0.02em;   /* slight optical compression */
  --ls-headline:  -0.01em;
  --ls-uppercase:  0.12em;   /* eyebrow / overline tracking */
  --ls-body:       0;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-heavy:    800;
  --fw-black:    900;

  /* ---------------------------------------------------------------- */
  /*  SPACING                                                         */
  /* ---------------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10:128px;

  /* ---------------------------------------------------------------- */
  /*  RADII (squared brand — radii are restrained)                    */
  /* ---------------------------------------------------------------- */
  --radius-0:    0;
  --radius-1:    2px;
  --radius-2:    4px;
  --radius-3:    8px;     /* default for cards / inputs */
  --radius-4:    12px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------- */
  /*  ELEVATION                                                       */
  /* ---------------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(20,20,20,0.06), 0 1px 1px rgba(20,20,20,0.04);
  --shadow-2: 0 2px 6px rgba(20,20,20,0.08), 0 1px 2px rgba(20,20,20,0.04);
  --shadow-3: 0 8px 20px rgba(20,20,20,0.10), 0 3px 6px rgba(20,20,20,0.05);
  --shadow-4: 0 18px 40px rgba(20,20,20,0.14), 0 6px 12px rgba(20,20,20,0.06);
  --shadow-energy: 0 6px 0 var(--habitek-red-deep);   /* signature solid drop, no blur */
  --shadow-inset:  inset 0 0 0 1px rgba(20,20,20,0.08);

  /* ---------------------------------------------------------------- */
  /*  MOTION                                                          */
  /* ---------------------------------------------------------------- */
  --ease-standard: cubic-bezier(.2,.6,.2,1);
  --ease-emphatic: cubic-bezier(.2,.8,.2,1);
  --duration-quick:  120ms;
  --duration-base:   200ms;
  --duration-slow:   320ms;
}

/* ------------------------------------------------------------------ */
/*  Element-level semantic styles                                      */
/* ------------------------------------------------------------------ */

html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--habitek-ink);
  text-transform: uppercase;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-headline);
  color: var(--habitek-ink);
  text-transform: uppercase;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-headline);
  color: var(--habitek-ink);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-text);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--habitek-ink);
  margin: 0;
}
h5, .h5 {
  font-family: var(--font-text);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  color: var(--habitek-ink);
  margin: 0;
}
h6, .h6 {
  font-family: var(--font-text);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h6);
  line-height: var(--lh-snug);
  color: var(--habitek-ink);
  margin: 0;
}

p, .body {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-1);
  margin: 0;
}

.eyebrow, .overline {
  font-family: var(--font-text);
  font-weight: var(--fw-bold);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-uppercase);
  text-transform: uppercase;
  color: var(--habitek-red);
  display: inline-block;
}

small, .caption {
  font-size: var(--fs-caption);
  color: var(--fg-2);
  line-height: var(--lh-normal);
}

code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  background: var(--bg-surface-2);
  padding: 0.1em 0.3em;
  border-radius: var(--radius-1);
}

a {
  color: var(--habitek-red);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--duration-quick) var(--ease-standard);
}
a:hover { color: var(--habitek-red-deep); }

/* Brand utility — reusable orbit motif separator */
.orbit-rule {
  display: block;
  height: 2px;
  background: linear-gradient(to right,
              var(--habitek-red) 0 32%,
              var(--habitek-yellow) 32% 38%,
              var(--habitek-charcoal) 38% 100%);
  border: 0;
}