/* ============================================================
   HRIZONS Design Tokens
   Single source of truth. Import this into every HRIZONS file.
   ============================================================ */

/* Carlito is the default font - a metrics-compatible, freely-licensed
   twin of Calibri. Source Serif 4 is reserved for italic sub-statements. */
@import url("https://fonts.googleapis.com/css2?family=Carlito:ital,wght@0,400;0,700;1,400;1,700&family=Source+Serif+4:ital,wght@0,400;0,500;1,400;1,500&display=swap");

:root {
  /* ---------- Color: Brand ---------- */
  --hrz-orange:        #E86D1F;   /* Primary accent — the sun */
  --hrz-orange-deep:   #C25612;   /* Pressed / link hover */
  --hrz-orange-glow:   #F2A571;   /* Mid-stop of sunrise gradient */
  --hrz-orange-soft:   #F9D2B5;   /* Tints, subtle backgrounds */
  --hrz-cream:         #FEF0E6;   /* Warmest tint */

  /* ---------- Color: Neutrals ---------- */
  --hrz-ink:           #111111;   /* Headlines, wordmark */
  --hrz-graphite:      #2A2A2A;   /* Body text on light */
  --hrz-slate:         #4F5762;   /* Secondary text, captions */
  --hrz-fog:           #8A929C;   /* Tertiary, placeholder */
  --hrz-mist:          #E5E7EB;   /* Hairlines, dividers */
  --hrz-bone:          #F7F5F2;   /* Warm off-white surface */
  --hrz-paper:         #FFFFFF;

  /* ---------- Color: Reversed ---------- */
  --hrz-navy:          #0F1B2D;   /* Footer, dark sections */
  --hrz-navy-deep:     #08111F;
  --hrz-on-navy:       #E8ECF2;
  --hrz-on-navy-soft:  #9AA4B2;

  /* ---------- Color: System ---------- */
  --hrz-success:       #2E7D5B;
  --hrz-warning:       #C58B2B;
  --hrz-danger:        #B23A2E;
  --hrz-info:          #2D5B8A;

  /* ---------- Signature gradient (the sunrise) ---------- */
  --hrz-sunrise: radial-gradient(
    circle at 50% 100%,
    #FFFFFF 0%,
    #FEF0E6 16%,
    #F9D2B5 40%,
    #F2A571 63%,
    #E86D1F 91%,
    #E86D1F 100%
  ); /* @kind other */
  --hrz-horizon-rule: linear-gradient(
    to right,
    transparent 0%,
    var(--hrz-ink) 18%,
    var(--hrz-ink) 82%,
    transparent 100%
  );

  /* ---------- Type: families ---------- */
  /* Carlito is the default - freely-licensed, metrics-compatible with Calibri. */
  --hrz-font-display:  Carlito, Calibri, "Helvetica Neue", Arial, sans-serif;
  --hrz-font-body:     Carlito, Calibri, "Helvetica Neue", Arial, sans-serif;
  --hrz-font-italic:   "Source Serif 4", Georgia, serif;

  /* ---------- Type: scale (modular, 1.250) ---------- */
  --hrz-text-xs:    12px;   /* 0.75rem  — eyebrow, micro */
  --hrz-text-sm:    14px;   /* 0.875rem — captions, meta */
  --hrz-text-base:  16px;   /* 1rem     — body */
  --hrz-text-lg:    18px;   /* 1.125rem — lead body */
  --hrz-text-xl:    22px;   /* sub-statements */
  --hrz-text-2xl:   28px;   /* card titles, h4 */
  --hrz-text-3xl:   36px;   /* h3 */
  --hrz-text-4xl:   48px;   /* h2 / section header */
  --hrz-text-5xl:   64px;   /* h1 / hero */
  --hrz-text-6xl:   84px;   /* display, used sparingly */

  /* ---------- Type: weight ---------- */
  --hrz-w-regular:  400; /* @kind font */
  --hrz-w-medium:   500; /* @kind font */
  --hrz-w-semibold: 600; /* @kind font */
  --hrz-w-bold:     700; /* @kind font */
  --hrz-w-black:    800; /* @kind font */

  /* ---------- Type: line-height ---------- */
  --hrz-lh-tight:    1.05; /* @kind font */
  --hrz-lh-snug:     1.2; /* @kind font */
  --hrz-lh-normal:   1.45; /* @kind font */
  --hrz-lh-relaxed:  1.6; /* @kind font */

  /* ---------- Type: tracking ---------- */
  --hrz-track-tight:  -0.02em; /* @kind font */
  --hrz-track-normal: 0; /* @kind font */
  --hrz-track-eyebrow: 0.18em; /* @kind font */

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

  /* ---------- Geometry ---------- */
  --hrz-radius-none: 0;
  --hrz-radius-sm:   4px;
  --hrz-radius-md:   8px;
  --hrz-radius-lg:   14px;
  --hrz-radius-pill: 999px;

  --hrz-border:      1px solid var(--hrz-mist);
  --hrz-border-ink:  1px solid var(--hrz-ink);

  --hrz-shadow-sm:    0 1px 2px rgba(15,27,45,.06);
  --hrz-shadow-card:  0 1px 2px rgba(15,27,45,.06), 0 8px 24px rgba(15,27,45,.08);
  --hrz-shadow-lift:  0 2px 6px rgba(15,27,45,.08), 0 24px 48px rgba(15,27,45,.12);
  --hrz-shadow-glow:  0 0 60px rgba(232,109,31,.35);

  /* ---------- Layout ---------- */
  --hrz-container:   1200px; /* @kind spacing */
  --hrz-container-wide: 1440px; /* @kind spacing */
  --hrz-gutter:      24px; /* @kind spacing */

  /* ---------- Motion ---------- */
  --hrz-ease-out:    cubic-bezier(.2, .7, .2, 1); /* @kind other */
  --hrz-ease-in-out: cubic-bezier(.5, 0, .2, 1); /* @kind other */
  --hrz-dur-fast:    150ms; /* @kind other */
  --hrz-dur-base:    240ms; /* @kind other */
  --hrz-dur-slow:    420ms; /* @kind other */
}

/* ============================================================
   Base reset + body type
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--hrz-font-body);
  font-size: var(--hrz-text-base);
  line-height: var(--hrz-lh-relaxed);
  color: var(--hrz-graphite);
  background: var(--hrz-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Typographic primitives — class-based, opt-in
   ============================================================ */

.hrz-display {
  font-family: var(--hrz-font-display);
  font-weight: var(--hrz-w-black);
  font-size: var(--hrz-text-6xl);
  line-height: var(--hrz-lh-tight);
  letter-spacing: var(--hrz-track-tight);
  color: var(--hrz-ink);
  text-wrap: balance;
}

.hrz-h1 {
  font-family: var(--hrz-font-display);
  font-weight: var(--hrz-w-bold);
  font-size: var(--hrz-text-5xl);
  line-height: var(--hrz-lh-tight);
  letter-spacing: var(--hrz-track-tight);
  color: var(--hrz-ink);
  text-wrap: balance;
}

.hrz-h2 {
  font-family: var(--hrz-font-display);
  font-weight: var(--hrz-w-bold);
  font-size: var(--hrz-text-4xl);
  line-height: var(--hrz-lh-snug);
  letter-spacing: var(--hrz-track-tight);
  color: var(--hrz-ink);
  text-wrap: balance;
}

.hrz-h3 {
  font-family: var(--hrz-font-display);
  font-weight: var(--hrz-w-semibold);
  font-size: var(--hrz-text-3xl);
  line-height: var(--hrz-lh-snug);
  color: var(--hrz-ink);
}

.hrz-h4 {
  font-family: var(--hrz-font-display);
  font-weight: var(--hrz-w-semibold);
  font-size: var(--hrz-text-2xl);
  line-height: var(--hrz-lh-snug);
  color: var(--hrz-ink);
}

.hrz-eyebrow {
  font-family: var(--hrz-font-display);
  font-weight: var(--hrz-w-semibold);
  font-size: var(--hrz-text-xs);
  line-height: 1;
  letter-spacing: var(--hrz-track-eyebrow);
  text-transform: uppercase;
  color: var(--hrz-orange);
}

/* The italic sub-statement under hero headings — a brand signature.
   See "Customer Focused. Powered by the Cloud." / italic intro. */
.hrz-substatement {
  font-family: var(--hrz-font-italic);
  font-style: italic;
  font-weight: var(--hrz-w-regular);
  font-size: var(--hrz-text-xl);
  line-height: var(--hrz-lh-relaxed);
  color: var(--hrz-graphite);
  max-width: 56ch;
  text-wrap: pretty;
}

.hrz-lead {
  font-family: var(--hrz-font-body);
  font-size: var(--hrz-text-lg);
  line-height: var(--hrz-lh-relaxed);
  color: var(--hrz-graphite);
  max-width: 70ch;
  text-wrap: pretty;
}

.hrz-body {
  font-family: var(--hrz-font-body);
  font-size: var(--hrz-text-base);
  line-height: var(--hrz-lh-relaxed);
  color: var(--hrz-graphite);
  max-width: 70ch;
  text-wrap: pretty;
}

.hrz-meta {
  font-family: var(--hrz-font-body);
  font-size: var(--hrz-text-sm);
  line-height: var(--hrz-lh-normal);
  color: var(--hrz-slate);
}

/* ============================================================
   The horizon rule — a brand-specific divider
   A long thin line that fades at both edges, evoking the logo.
   ============================================================ */

.hrz-horizon {
  height: 1px;
  border: 0;
  background: var(--hrz-horizon-rule);
  margin: var(--hrz-space-8) 0;
}

/* ============================================================
   Buttons
   ============================================================ */

.hrz-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--hrz-space-2);
  font-family: var(--hrz-font-display);
  font-weight: var(--hrz-w-semibold);
  font-size: var(--hrz-text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 22px;
  border-radius: var(--hrz-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--hrz-dur-fast) var(--hrz-ease-out),
              color var(--hrz-dur-fast) var(--hrz-ease-out),
              border-color var(--hrz-dur-fast) var(--hrz-ease-out),
              transform var(--hrz-dur-fast) var(--hrz-ease-out);
}

.hrz-btn--primary {
  background: var(--hrz-orange);
  color: var(--hrz-paper);
}
.hrz-btn--primary:hover { background: var(--hrz-orange-deep); }

.hrz-btn--ink {
  background: var(--hrz-ink);
  color: var(--hrz-paper);
}
.hrz-btn--ink:hover { background: var(--hrz-graphite); }

.hrz-btn--ghost {
  background: transparent;
  color: var(--hrz-ink);
  border-color: var(--hrz-ink);
}
.hrz-btn--ghost:hover { background: var(--hrz-ink); color: var(--hrz-paper); }

.hrz-btn--link {
  padding: 0;
  background: transparent;
  color: var(--hrz-orange);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--hrz-text-base);
  border-bottom: 1px solid currentColor;
  border-radius: 0;
}
.hrz-btn--link:hover { color: var(--hrz-orange-deep); }

/* ============================================================
   Card
   ============================================================ */

.hrz-card {
  background: var(--hrz-paper);
  border: var(--hrz-border);
  border-radius: var(--hrz-radius-md);
  padding: var(--hrz-space-6);
  box-shadow: var(--hrz-shadow-sm);
  transition: box-shadow var(--hrz-dur-base) var(--hrz-ease-out),
              transform var(--hrz-dur-base) var(--hrz-ease-out);
}
.hrz-card:hover { box-shadow: var(--hrz-shadow-card); }

/* ============================================================
   The "sunburst" — a decorative element built from tokens.
   Use sparingly: behind hero text, in a corner, as a section opener.
   ============================================================ */

.hrz-sunburst {
  width: 90px;
  aspect-ratio: 1;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  clip-path: inset(0 0 50% 0);
  background: var(--hrz-sunrise);
  opacity: 0.95;
}