/* Kare Digital — global design system
   Tokens + shared type/color/spacing. Page CSS should consume these,
   not redefine fonts or a parallel palette. */

:root {
  --font-heading: "Space Grotesk", sans-serif;
  --font-body: "Manrope", sans-serif;

  --color-bg: #ffffff;
  --color-bg-soft: #f6f7f7;
  --color-bg-muted: #f1f3f3;
  --color-surface: #ffffff;
  --color-text: #3d4a4c;
  --color-text-muted: #5c6a6c;
  --color-heading: #0c1416;
  --color-border: rgba(12, 20, 22, 0.09);
  --color-border-strong: rgba(12, 20, 22, 0.14);
  --color-brand: #008f88;
  --color-brand-hover: #007570;
  --color-brand-soft: rgba(0, 143, 136, 0.09);
  --color-dark: #0a1416;
  --color-dark-text: #ffffff;
  --color-dark-muted: rgba(255, 255, 255, 0.68);
  --color-dark-border: rgba(255, 255, 255, 0.12);
  --color-dark-soft: #0e1c1e;

  --space-section-compact: clamp(3.25rem, 5.5vw, 4.75rem);
  --space-section-normal: clamp(4.75rem, 8vw, 7.25rem);
  --space-section-large: clamp(5.5rem, 9vw, 8.5rem);
  --space-section-hero: clamp(5rem, 9vh, 7.5rem);
  --space-stack: clamp(2.15rem, 4.2vw, 3.35rem);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --shadow-soft: 0 1px 2px rgba(12, 20, 22, 0.04), 0 8px 24px rgba(12, 20, 22, 0.06);
  --shadow-shot: 0 16px 40px rgba(12, 20, 22, 0.10);

  --fs-body: 1.0625rem;
  --lh-body: 1.65;
  --fs-lead: clamp(1.125rem, 1.45vw, 1.25rem);
  --fs-h1: clamp(2.05rem, 4vw, 3.2rem);
  --fs-h2: clamp(1.85rem, 3.35vw, 2.75rem);
  --fs-h3: clamp(1.28rem, 2vw, 1.55rem);
  --fs-eyebrow: 0.75rem;
  --fw-body: 400;
  --fw-ui: 500;
  --fw-heading: 600;

  --container-max: 1200px;
  --container-wide: 1280px;

  /* Bridge existing theme / marketing tokens */
  --tj-ff-body: var(--font-body);
  --tj-ff-heading: var(--font-heading);
  --tj-fs-body: 17px;
  --tj-fs-p: 17px;
  --tj-fs-h1: var(--fs-h1);
  --tj-fs-h2: var(--fs-h2);
  --tj-fs-h3: var(--fs-h3);
  --tj-fs-h4: 1.25rem;
  --tj-color-heading-primary: var(--color-heading);
  --tj-color-text-body: var(--color-text);
  --tj-color-text-body-3: var(--color-text-muted);
  --tj-color-theme-primary: var(--color-brand);
  --tj-color-theme-dark: var(--color-dark);
  --tj-color-theme-dark-2: var(--color-dark-soft);
  --tj-color-theme-bg: var(--color-bg-muted);
  --tj-color-theme-bg-2: var(--color-bg-soft);
  --tj-color-grey-1: var(--color-bg);
  --tj-color-border-1: var(--color-border);
  --kare-primary: var(--color-brand);
  --kare-primary-dark: var(--color-brand-hover);
  --kare-soft: var(--color-bg-muted);
  --kare-border: var(--color-border);
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  color: var(--color-heading);
}

h1 {
  font-size: var(--fs-h1);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.16;
  letter-spacing: -0.03em;
}

h3 {
  font-size: var(--fs-h3);
  line-height: 1.22;
  letter-spacing: -0.025em;
}

h4 {
  font-size: 1.25rem;
  line-height: 1.28;
}

/* Nav, buttons, forms, footer stay on the body face */
.mainmenu,
.header-language,
.header-brochure-link,
.tj-primary-btn,
.btn-text,
button,
input,
textarea,
select,
label,
.sub-title,
.home-eyebrow,
.pp-eyebrow,
.follow-eyebrow,
.footer-widget,
.form-input,
.kd-cookie-banner {
  font-family: var(--font-body);
}

.home-cover-hero__title,
.home-sec-head__title,
.home-product-showcase__title,
.home-end-cta__title,
.home-path__num,
.home-recognize__index,
.home-svcs__num,
.home-why__num,
.pp-h1, .pp-h2, .pp-h3,
.follow-h1, .follow-h2,
.rs-intro__title,
.rs-mast__title,
.ar-intro__title,
.ar-article__title,
.ar-card__title,
.rs-quote blockquote,
.banner-title,
.sec-title {
  font-family: var(--font-heading);
}

@media (min-width: 1200px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 1180px;
  }
}

@media (min-width: 1400px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1240px;
  }
}

/* Buttons */
.tj-primary-btn {
  font-weight: 600;
  border-radius: var(--radius-pill);
}

.tj-primary-btn:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
}

/* Navigation */
.mainmenu ul > li > a {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.header-language a,
.header-brochure-link {
  font-weight: 500;
}

.mainmenu ul > li > .sub-menu {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}

.header-subpage-fixed {
  box-shadow: 0 1px 0 var(--color-border);
}

/* Footer */
.tj-footer-section.footer-3 {
  background-color: var(--color-dark);
}

.tj-footer-section.footer-3 .footer-main-area {
  padding-top: clamp(4rem, 7vw, 6.25rem);
  padding-bottom: clamp(3.25rem, 6vw, 5.25rem);
}

.tj-footer-section.footer-3 .footer-widget .title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  margin-bottom: 1.15rem;
}

.tj-footer-section.footer-3 .footer-widget ul li a {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
}

.tj-footer-section.footer-3 .footer-widget ul li a:hover,
.tj-footer-section.footer-3 .footer-widget ul li a:focus-visible {
  color: #fff;
}

.footer-text p {
  font-size: 0.98rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.58);
}

.footer-contact-info p,
.footer-contact-info a {
  font-size: 0.98rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}

.footer-contact-info a:hover,
.footer-contact-info a:focus-visible {
  color: #fff;
}

.tj-copyright-area {
  border-top: 1px solid var(--color-dark-border);
}

.tj-copyright-area .copyright-text p {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.42);
}

/* Forms */
.form-input input,
.form-input textarea,
.contact-form input,
.contact-form textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-heading);
  border-radius: var(--radius-md);
  border-color: var(--color-border-strong);
}

.form-input input,
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"] {
  min-height: 48px;
}

.form-input input:focus,
.form-input textarea:focus,
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--color-brand);
  outline: 2px solid var(--color-brand-soft);
  outline-offset: 0;
}

/* Shared section helpers */
.section-soft {
  background: var(--color-bg-soft);
}

.section-dark {
  background: var(--color-dark);
  color: var(--color-dark-text);
}

.sec-heading .sub-title {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  border: 0;
  padding: 0;
  color: var(--color-brand);
  border-radius: 0;
}

.sec-heading .sec-title {
  font-family: var(--font-heading);
  font-weight: 600;
}

.kd-cookie-banner,
.kd-cookie-settings,
.kd-cookie-banner__title {
  font-family: var(--font-body);
}

.kd-cookie-banner__title {
  font-family: var(--font-heading);
  font-weight: 600;
}

/* Focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
}

@media (max-width: 575.98px) {
  body {
    font-size: 1rem;
  }

  h1 {
    line-height: 1.16;
  }

  h2 {
    line-height: 1.2;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .home-cover-hero__scroll i,
  .home-cover-hero__glow,
  .home-cover-hero__orbit {
    animation: none !important;
  }
}