/* ===================================================================
 * Arton Limited — Colors & Type
 * ===================================================================
 * Brand foundations extracted from arton.co.ke (Sep 2025).
 * Primary navy + gold accent, derived from the ARTON LIMITED logo.
 *
 * Fonts: original site uses a generic sans for body and a heavier
 * sans-serif for headings (typical WordPress / Slider Revolution theme).
 * We substitute with the nearest Google Fonts matches; see README.
 * ================================================================ */

/* ---------- Webfonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Brand palette ---------- */
  --arton-navy-900: #050d1c;   /* deepest, near-black backgrounds */
  --arton-navy-800: #0a1730;   /* primary brand navy (logo wordmark) */
  --arton-navy-700: #11264a;   /* hover / interactive navy */
  --arton-navy-600: #1c3a6b;   /* secondary navy */
  --arton-navy-500: #2a528f;   /* link / accent navy */
  --arton-navy-300: #8ea0bf;   /* muted navy / disabled */
  --arton-navy-100: #e6ebf3;   /* tinted surface */

  --arton-gold-700: #b88a00;   /* dark gold, hover */
  --arton-gold-600: #d9a300;
  --arton-gold-500: #f5c518;   /* primary gold (logo circle) */
  --arton-gold-400: #f8d24a;
  --arton-gold-100: #fef4d0;   /* gold tinted surface */

  --arton-white:    #ffffff;
  --arton-off:      #f6f7f9;   /* page-bg / section alternate */
  --arton-paper:    #fbfbfa;
  --arton-line:     #e3e6ec;
  --arton-line-strong: #c9cfd9;

  /* ---------- Greys / text ---------- */
  --arton-ink:      #0e1830;   /* body text on light */
  --arton-ink-2:    #475067;   /* secondary text */
  --arton-ink-3:    #6c7689;   /* tertiary / meta */
  --arton-ink-4:    #98a1b3;   /* placeholder */

  /* ---------- Semantic ---------- */
  --arton-success:  #1f8a5b;
  --arton-warning:  #d9a300;   /* uses brand gold */
  --arton-danger:   #c53030;
  --arton-info:     #2a528f;

  /* ---------- Foreground tokens ---------- */
  --fg-1: var(--arton-ink);
  --fg-2: var(--arton-ink-2);
  --fg-3: var(--arton-ink-3);
  --fg-on-dark: #ffffff;
  --fg-on-gold: var(--arton-navy-800);

  /* ---------- Background tokens ---------- */
  --bg-1: var(--arton-white);
  --bg-2: var(--arton-off);
  --bg-3: var(--arton-navy-100);
  --bg-dark: var(--arton-navy-800);
  --bg-darker: var(--arton-navy-900);

  /* ---------- Border tokens ---------- */
  --border-1: var(--arton-line);
  --border-2: var(--arton-line-strong);
  --border-strong: var(--arton-navy-800);

  /* ---------- Brand interactive ---------- */
  --primary:        var(--arton-navy-800);
  --primary-hover:  var(--arton-navy-700);
  --primary-press:  var(--arton-navy-900);
  --accent:         var(--arton-gold-500);
  --accent-hover:   var(--arton-gold-600);
  --accent-press:   var(--arton-gold-700);

  /* ---------- Type families ---------- */
  --font-display: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type scale (semantic) ---------- */
  /* Display — hero & section openers, generous spacing */
  --h-display-size: 56px;
  --h-display-line: 1.08;
  --h-display-weight: 800;
  --h-display-tracking: -0.02em;

  --h1-size: 40px;
  --h1-line: 1.15;
  --h1-weight: 700;
  --h1-tracking: -0.015em;

  --h2-size: 30px;
  --h2-line: 1.2;
  --h2-weight: 700;
  --h2-tracking: -0.01em;

  --h3-size: 22px;
  --h3-line: 1.3;
  --h3-weight: 700;
  --h3-tracking: -0.005em;

  --h4-size: 18px;
  --h4-line: 1.4;
  --h4-weight: 600;
  --h4-tracking: 0em;

  --eyebrow-size: 12px;
  --eyebrow-line: 1.2;
  --eyebrow-weight: 700;
  --eyebrow-tracking: 0.18em;   /* uppercase eyebrows over headings */

  --body-size: 16px;
  --body-line: 1.65;
  --body-weight: 400;

  --body-lg-size: 18px;
  --body-lg-line: 1.6;

  --body-sm-size: 14px;
  --body-sm-line: 1.55;

  --meta-size: 12px;
  --meta-line: 1.4;
  --meta-weight: 500;
  --meta-tracking: 0.04em;

  --code-size: 14px;
  --code-line: 1.5;

  /* ---------- Spacing ---------- */
  --space-0: 0;
  --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;
  --space-32: 128px;

  /* ---------- Radii ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;     /* default for cards, inputs (matches WP corporate feel) */
  --r-lg: 10px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-1: 0 1px 2px rgba(10, 23, 48, 0.06),
              0 1px 1px rgba(10, 23, 48, 0.04);
  --shadow-2: 0 4px 10px rgba(10, 23, 48, 0.08),
              0 2px 4px rgba(10, 23, 48, 0.04);
  --shadow-3: 0 12px 28px rgba(10, 23, 48, 0.14),
              0 6px 10px rgba(10, 23, 48, 0.06);
  --shadow-gold: 0 8px 24px rgba(245, 197, 24, 0.32);
  --shadow-inset: inset 0 -2px 0 rgba(10, 23, 48, 0.08);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-pad: 24px;
}

/* ===================================================================
 * Semantic type primitives
 * Apply by class — keep document-level h1..h6 free for outline.
 * ================================================================ */

.t-display, .t-h1, .t-h2, .t-h3, .t-h4 {
  font-family: var(--font-display);
  color: var(--fg-1);
  margin: 0;
}

.t-display {
  font-size: var(--h-display-size);
  line-height: var(--h-display-line);
  font-weight: var(--h-display-weight);
  letter-spacing: var(--h-display-tracking);
}
.t-h1 {
  font-size: var(--h1-size);
  line-height: var(--h1-line);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-tracking);
}
.t-h2 {
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  font-weight: var(--h2-weight);
  letter-spacing: var(--h2-tracking);
}
.t-h3 {
  font-size: var(--h3-size);
  line-height: var(--h3-line);
  font-weight: var(--h3-weight);
  letter-spacing: var(--h3-tracking);
}
.t-h4 {
  font-size: var(--h4-size);
  line-height: var(--h4-line);
  font-weight: var(--h4-weight);
}

.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  line-height: var(--eyebrow-line);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--arton-gold-600);
}

.t-body {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-line);
  font-weight: var(--body-weight);
  color: var(--fg-2);
}
.t-body-lg {
  font-family: var(--font-body);
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-line);
  color: var(--fg-2);
}
.t-body-sm {
  font-family: var(--font-body);
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
  color: var(--fg-2);
}
.t-meta {
  font-family: var(--font-body);
  font-size: var(--meta-size);
  line-height: var(--meta-line);
  font-weight: var(--meta-weight);
  letter-spacing: var(--meta-tracking);
  color: var(--fg-3);
  text-transform: uppercase;
}
.t-code {
  font-family: var(--font-mono);
  font-size: var(--code-size);
  line-height: var(--code-line);
  background: var(--arton-navy-100);
  color: var(--arton-navy-800);
  padding: 1px 6px;
  border-radius: var(--r-xs);
}

/* link */
.t-link {
  color: var(--arton-navy-700);
  text-decoration: none;
  border-bottom: 1px solid var(--arton-gold-500);
  transition: color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.t-link:hover {
  color: var(--arton-gold-700);
  border-bottom-color: var(--arton-gold-700);
}

/* ===================================================================
 * Document defaults (opt-in via .arton-doc on a wrapper)
 * ================================================================ */
.arton-doc {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-line);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.arton-doc h1 { font: 700 var(--h1-size)/var(--h1-line) var(--font-display); letter-spacing: var(--h1-tracking); margin: 0 0 var(--space-4); color: var(--fg-1); }
.arton-doc h2 { font: 700 var(--h2-size)/var(--h2-line) var(--font-display); letter-spacing: var(--h2-tracking); margin: 0 0 var(--space-3); color: var(--fg-1); }
.arton-doc h3 { font: 700 var(--h3-size)/var(--h3-line) var(--font-display); margin: 0 0 var(--space-3); color: var(--fg-1); }
.arton-doc h4 { font: 600 var(--h4-size)/var(--h4-line) var(--font-display); margin: 0 0 var(--space-2); color: var(--fg-1); }
.arton-doc p  { margin: 0 0 var(--space-4); color: var(--fg-2); }
.arton-doc strong { color: var(--fg-1); font-weight: 600; }
.arton-doc a { color: var(--arton-navy-700); text-decoration: none; border-bottom: 1px solid var(--arton-gold-500); }
.arton-doc a:hover { color: var(--arton-gold-700); }