/* ============================================================
   Inthichack Design System — Colors & Type
   B2B hospitality · cleaning chemicals · laundry machines · Laos
   ============================================================ */

/* Webfont: Google Sans Flex — official brand font.
   Single variable file covers weight, optical size, width, grade,
   slant, and roundness axes. The Inthichack wordmark itself is
   delivered as a PNG asset; UI type uses Google Sans Flex
   across the system. JetBrains Mono is loaded from Google Fonts
   for monospace use. */
@font-face {
  font-family: "Google Sans Flex";
  src: url("../fonts/GoogleSansFlex-Variable.ttf") format("truetype-variations"),
       url("../fonts/GoogleSansFlex-Variable.ttf") format("truetype");
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-style: normal;
  font-display: swap;
}
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Brand colors ---------- */
  --itc-navy:        #1B2C6B;   /* primary — wordmark, headings, primary buttons */
  --itc-navy-700:    #233680;
  --itc-navy-500:    #3A4FA0;
  --itc-navy-300:    #8C97C2;
  --itc-navy-100:    #DDE2F0;
  --itc-navy-050:    #EEF1F8;

  --itc-orange:      #F47A20;   /* accent — high-priority CTAs, the i-dot */
  --itc-orange-600:  #D9651A;
  --itc-orange-400:  #F89D5B;
  --itc-orange-100:  #FCE3CE;
  --itc-orange-050:  #FFF4EA;

  --itc-white:       #FFFFFF;
  --itc-ink:         #0F1530;   /* deepest text — almost-black with navy bias */
  --itc-slate-900:   #1A2138;
  --itc-slate-700:   #3E4663;
  --itc-slate-500:   #6B7290;
  --itc-slate-300:   #B7BCCF;
  --itc-slate-200:   #D6DAE6;
  --itc-slate-100:   #ECEEF5;
  --itc-slate-050:   #F6F7FB;

  /* ---------- Semantic foreground ---------- */
  --fg-1:    var(--itc-ink);        /* primary copy, headlines on light */
  --fg-2:    var(--itc-slate-700);  /* body copy */
  --fg-3:    var(--itc-slate-500);  /* secondary / meta */
  --fg-mute: var(--itc-slate-300);  /* placeholder / disabled */
  --fg-inv:  var(--itc-white);      /* on navy / on photo */
  --fg-link: var(--itc-navy);
  --fg-accent: var(--itc-orange-600);

  /* ---------- Semantic background ---------- */
  --bg-page:    var(--itc-white);
  --bg-soft:    var(--itc-slate-050);   /* alt sections */
  --bg-sunken:  var(--itc-slate-100);   /* fields, wells */
  --bg-navy:    var(--itc-navy);        /* dark sections */
  --bg-navy-deep: #131F4E;
  --bg-orange:  var(--itc-orange);
  --bg-card:    var(--itc-white);

  /* ---------- Status ---------- */
  --status-success: #1E8E5C;
  --status-success-bg: #E4F4EC;
  --status-warning: #B5781B;
  --status-warning-bg: #FBF1DE;
  --status-danger:  #C0322B;
  --status-danger-bg:  #FBE5E2;
  --status-info:    var(--itc-navy);
  --status-info-bg: var(--itc-navy-050);

  /* ---------- Borders ---------- */
  --border-1: #E2E5EF;   /* default hairline */
  --border-2: #CDD2E2;   /* stronger */
  --border-focus: var(--itc-orange);

  /* ---------- Radii (soft, echoing the wordmark) ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---------- Spacing ---------- */
  --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;

  /* ---------- Shadow / elevation ---------- */
  --shadow-1: 0 1px 2px rgba(15, 21, 48, 0.06), 0 1px 1px rgba(15, 21, 48, 0.04);
  --shadow-2: 0 4px 12px rgba(15, 21, 48, 0.08), 0 1px 2px rgba(15, 21, 48, 0.05);
  --shadow-3: 0 10px 28px rgba(15, 21, 48, 0.10), 0 2px 6px rgba(15, 21, 48, 0.06);
  --shadow-4: 0 20px 48px rgba(15, 21, 48, 0.16), 0 4px 12px rgba(15, 21, 48, 0.08);
  --shadow-orange: 0 8px 20px rgba(244, 122, 32, 0.28);
  --shadow-navy:   0 8px 20px rgba(27, 44, 107, 0.28);
  --shadow-inset:  inset 0 1px 0 rgba(255,255,255,0.08);

  /* ---------- Type families ---------- */
  --font-display: "Google Sans Flex", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Google Sans Flex", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type scale (executive, generous) ---------- */
  --fs-display: 72px;  --lh-display: 1.04; --ls-display: -0.025em;
  --fs-h1:      54px;  --lh-h1:      1.08; --ls-h1:      -0.022em;
  --fs-h2:      40px;  --lh-h2:      1.12; --ls-h2:      -0.018em;
  --fs-h3:      28px;  --lh-h3:      1.20; --ls-h3:      -0.012em;
  --fs-h4:      22px;  --lh-h4:      1.30; --ls-h4:      -0.008em;
  --fs-lead:    20px;  --lh-lead:    1.50; --ls-lead:    -0.005em;
  --fs-body:    16px;  --lh-body:    1.60; --ls-body:    0;
  --fs-small:   14px;  --lh-small:   1.55; --ls-small:   0.002em;
  --fs-micro:   12px;  --lh-micro:   1.45; --ls-micro:   0.04em;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 360ms;
}

/* ============================================================
   Base type
   ============================================================ */

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

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--fg-1);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--fg-1);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--fg-1);
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
  color: var(--fg-1);
}
.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
  text-wrap: balance;
}
.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
  color: var(--fg-2);
  text-wrap: pretty;
}
p, .body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); text-wrap: pretty; }
small, .small { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-3); }
.micro {
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-micro);
  text-transform: none; /* never all caps per brand */
  color: var(--fg-3);
  font-weight: 600;
}
code, .mono { font-family: var(--font-mono); font-size: 0.92em; }

/* Eyebrow / kicker — sentence case, never uppercase */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--itc-orange-600);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--itc-orange);
  display: inline-block;
}