/* =====================================================================
   A-Züst Solution — Colors & Type
   Single source of truth for design tokens. Import in any HTML page.
   ===================================================================== */

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

:root {
  /* ---------- BRAND COLORS (from logo) ---------- */
  --brand-primary:        #2D5F7C;   /* deep teal-blue — hexagon, wordmark */
  --brand-primary-700:    #244D66;   /* hover / pressed */
  --brand-primary-800:    #1B3A4D;   /* dark mode surface accent */
  --brand-primary-300:    #6B93AB;
  --brand-primary-100:    #D6E3EC;   /* tinted backgrounds */
  --brand-primary-050:    #EEF4F8;

  --brand-accent:         #FF6B35;   /* warm orange — energy dot, "SOLUTION" */
  --brand-accent-700:     #E1551F;
  --brand-accent-300:     #FFA483;
  --brand-accent-100:     #FFE4D6;

  --brand-neutral:        #5A6B7A;   /* tagline gray */

  /* ---------- NEUTRAL SCALE (cool slate) ---------- */
  --slate-050: #F7F9FB;
  --slate-100: #EEF1F4;
  --slate-200: #DDE3E9;
  --slate-300: #C2CCD4;
  --slate-400: #94A2AE;
  --slate-500: #6B7A88;
  --slate-600: #4D5A66;
  --slate-700: #36424C;
  --slate-800: #232C34;
  --slate-900: #14191E;

  /* ---------- SEMANTIC ROLES (light mode) ---------- */
  --bg:           #FFFFFF;        /* primary surface */
  --bg-subtle:    var(--slate-050);
  --bg-muted:     var(--slate-100);
  --surface:      #FFFFFF;        /* cards */
  --surface-2:    var(--slate-050);

  --fg1:          var(--slate-900);   /* headings, primary text */
  --fg2:          var(--slate-700);   /* body */
  --fg3:          var(--slate-500);   /* secondary, captions */
  --fg-muted:     var(--slate-400);   /* placeholders, disabled */
  --fg-on-brand:  #FFFFFF;

  --border:       var(--slate-200);
  --border-strong:var(--slate-300);
  --ring:         color-mix(in srgb, var(--brand-primary) 35%, transparent);

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

  --success:      #2F8F5E;
  --warning:      #C58A1F;
  --danger:       #C44545;
  --info:         var(--brand-primary);

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --font-display: var(--font-sans);

  /* Type scale — 1.250 (major third), tightened on small end */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.375rem;  /* 22 */
  --text-xl:   1.75rem;   /* 28 */
  --text-2xl:  2.25rem;   /* 36 */
  --text-3xl:  3rem;      /* 48 */
  --text-4xl:  3.75rem;   /* 60 */

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.55;
  --leading-loose:  1.75;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.18em;  /* used for SOLUTION-style labels */

  /* ---------- SPACING (4px base) ---------- */
  --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 ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;     /* default for cards & inputs */
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- ELEVATION (soft, low-contrast) ---------- */
  --shadow-xs: 0 1px 2px rgba(20, 25, 30, 0.04);
  --shadow-sm: 0 2px 4px rgba(20, 25, 30, 0.05), 0 1px 2px rgba(20, 25, 30, 0.04);
  --shadow-md: 0 8px 20px -8px rgba(20, 25, 30, 0.10), 0 2px 6px rgba(20, 25, 30, 0.05);
  --shadow-lg: 0 24px 48px -16px rgba(20, 25, 30, 0.18), 0 4px 12px rgba(20, 25, 30, 0.06);
  --shadow-focus: 0 0 0 3px var(--ring);

  /* ---------- MOTION ---------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  150ms;
  --dur-base:  220ms;
  --dur-slow:  420ms;

  /* ---------- LAYOUT ---------- */
  --container:    1200px;
  --container-sm: 720px;
  --header-h:     72px;
}

/* ---------- DARK MODE ---------- */
:root[data-theme="dark"],
.dark {
  --bg:           #0E1418;
  --bg-subtle:    #131B21;
  --bg-muted:     #1A242C;
  --surface:      #131B21;
  --surface-2:    #1A242C;

  --fg1:          #F2F5F8;
  --fg2:          #C8D1D9;
  --fg3:          #8B98A5;
  --fg-muted:     #5A6975;

  --border:       #243038;
  --border-strong:#324049;
  --ring:         color-mix(in srgb, var(--brand-accent) 45%, transparent);

  --link:         #8FB6CC;
  --link-hover:   #B5D0E0;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 20px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, 0.7);
}

/* =====================================================================
   SEMANTIC TYPE STYLES — apply via class or directly to elements
   ===================================================================== */

html, body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headline — hero */
.t-display, h1.display {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw + 1rem, 3.75rem);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  text-wrap: balance;
}

h1, .t-h1 {
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  text-wrap: balance;
}
h2, .t-h2 {
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  text-wrap: balance;
}
h3, .t-h3 {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--fg1);
}
h4, .t-h4 {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--fg1);
}

p, .t-body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg2);
  text-wrap: pretty;
}

.t-lead {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--fg2);
}

.t-small,
small {
  font-size: var(--text-sm);
  color: var(--fg3);
}

.t-caption {
  font-size: var(--text-xs);
  color: var(--fg3);
  line-height: var(--leading-snug);
}

/* Brand eyebrow label — orange, spaced caps. Used like "SOLUTION" in logo. */
.t-eyebrow {
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--brand-accent);
}

/* Mono — for code, technical labels, version numbers */
code, .t-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--fg1);
  background: var(--bg-muted);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
}
pre code {
  background: transparent;
  padding: 0;
}

a {
  color: var(--link);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); text-decoration: underline; }
a:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: 2px;
}

::selection { background: var(--brand-primary-100); color: var(--brand-primary-800); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}