/* ============================================================
   Solucom — Colors & Typography Tokens
   ============================================================
   Source of truth for all visual primitives used across the
   Solucom marketing site. Sampled from the live solucom.si
   pages (home, services, contact). When in doubt, defer to
   these tokens over inline values.
   ============================================================ */

/* Web fonts are loaded once, non-render-blocking, via the consolidated
   `sol-fonts` stylesheet enqueued in plugin.php (Poppins, Open Sans,
   JetBrains Mono, Sora, Inter — trimmed weights, no italics). The old
   render-blocking @import here was removed for PageSpeed. */

:root {
  /* ----------------------------------------------------------
     COLORS — Brand
     ----------------------------------------------------------
     The brand pivots on a single confident teal accent paired
     with a deep ink-navy for headings. Whites and warm-leaning
     greys carry the rest of the page.
     ---------------------------------------------------------- */

  /* Primary teal — used for the logo mark, the "com" wordmark
     half, primary CTAs, link colors, accordion expanders, and
     the testimonial accent panel. */
  --color-teal-50:   #E8F6F1;   /* page band tint */
  --color-teal-100:  #C6E9DC;   /* soft panels */
  --color-teal-200:  #8FD4BD;
  --color-teal-300:  #5BC2A2;
  --color-teal-400:  #2EBE99;   /* PRIMARY — buttons, accents */
  --color-teal-500:  #25A684;   /* hover / pressed */
  --color-teal-600:  #1F8F71;   /* darker accent */
  --color-teal-700:  #18745B;

  /* Ink — heading & nav text. A muted navy, never pure black. */
  --color-ink-900:   #0F2C4A;   /* H1 heading color */
  --color-ink-800:   #1B3A5C;   /* card headings, nav active */
  --color-ink-700:   #2C4A6B;
  --color-ink-600:   #3F5B7A;

  /* Slate / body greys */
  --color-slate-700: #4A5C6F;   /* body copy */
  --color-slate-600: #6A7A8C;   /* secondary copy */
  --color-slate-500: #8A98A8;   /* placeholder / muted */
  --color-slate-400: #B6C0CC;   /* borders, input outlines */
  --color-slate-300: #D6DCE4;   /* divider rules */
  --color-slate-200: #EBEFF3;   /* card backgrounds, hairlines */
  --color-slate-100: #F4F6F9;   /* page sections */

  --color-white:     #FFFFFF;
  --color-bg:        #FFFFFF;
  --color-bg-soft:   #F6FAF8;   /* subtle off-white wash */

  /* Semantic surface tokens */
  --fg-1:            var(--color-ink-900);   /* primary text & H1 */
  --fg-2:            var(--color-slate-700); /* body copy */
  --fg-3:            var(--color-slate-600); /* muted/secondary */
  --fg-accent:       var(--color-teal-400);  /* links, accents */
  --fg-on-accent:    var(--color-white);

  --bg-1:            var(--color-white);
  --bg-2:            var(--color-bg-soft);
  --bg-accent:       var(--color-teal-400);
  --bg-accent-soft:  var(--color-teal-50);
  --bg-ink:          var(--color-ink-900);

  --border-1:        var(--color-slate-300);
  --border-2:        var(--color-slate-200);
  --border-accent:   var(--color-teal-400);

  /* Status (not heavily used on solucom.si; included for forms) */
  --color-success:   #2EBE99;
  --color-warning:   #E8A33D;
  --color-danger:    #D9534F;

  /* ----------------------------------------------------------
     TYPE — Families
     ----------------------------------------------------------
     The site pairs a rounded, geometric sans for display
     (headings, nav, buttons) with a humanist sans for body
     copy. Poppins is the closest readily-available match to
     the wordmark + heading face; Open Sans matches the body.
     If brand-true fonts are provided later, override --font-*.
     ---------------------------------------------------------- */
  --font-display:   'Poppins', 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:      'Open Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:      ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Weights — display goes heavy; body sticks to 400/600. */
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-black:       800;

  /* Size scale — heavy on the display end because hero
     headings on the live site run ~56-64px. */
  --fs-12:  0.75rem;     /*  12 — eyebrow / micro */
  --fs-14:  0.875rem;    /*  14 — small */
  --fs-16:  1rem;        /*  16 — body default */
  --fs-18:  1.125rem;    /*  18 — lead paragraph */
  --fs-20:  1.25rem;     /*  20 — card body */
  --fs-24:  1.5rem;      /*  24 — card title */
  --fs-28:  1.75rem;     /*  28 — H4 */
  --fs-32:  2rem;        /*  32 — H3 */
  --fs-40:  2.5rem;      /*  40 — H2 */
  --fs-48:  3rem;        /*  48 — H2 large */
  --fs-56:  3.5rem;      /*  56 — Hero */
  --fs-64:  4rem;        /*  64 — Display */

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Tracking */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em;   /* used on small all-caps eyebrows */

  /* ----------------------------------------------------------
     SPACING — 4px base grid
     ---------------------------------------------------------- */
  --space-1:   0.25rem;   /* 4  */
  --space-2:   0.5rem;    /* 8  */
  --space-3:   0.75rem;   /* 12 */
  --space-4:   1rem;      /* 16 */
  --space-5:   1.25rem;   /* 20 */
  --space-6:   1.5rem;    /* 24 */
  --space-8:   2rem;      /* 32 */
  --space-10:  2.5rem;    /* 40 */
  --space-12:  3rem;      /* 48 */
  --space-16:  4rem;      /* 64 */
  --space-20:  5rem;      /* 80 */
  --space-24:  6rem;      /* 96 */
  --space-32:  8rem;      /* 128 */

  /* ----------------------------------------------------------
     RADII
     ----------------------------------------------------------
     Solucom uses very pill-like buttons (radius 999) and
     softly-rounded cards (8–12px). Almost nothing has sharp
     corners.
     ---------------------------------------------------------- */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-pill:  999px;

  /* ----------------------------------------------------------
     SHADOWS — used very lightly. Cards float on a faint
     1-pixel border + a near-imperceptible shadow.
     ---------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(15, 44, 74, 0.04);
  --shadow-2: 0 2px 8px rgba(15, 44, 74, 0.06);
  --shadow-3: 0 8px 24px rgba(15, 44, 74, 0.08);
  --shadow-4: 0 16px 40px rgba(15, 44, 74, 0.10);

  /* ----------------------------------------------------------
     MOTION
     ---------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;

  /* Layout */
  --container-max: 1200px;
  --container-pad: clamp(1rem, 4vw, 2.5rem);
}

/* ============================================================
   SEMANTIC TYPE — drop-in classes that mirror live-site usage.
   ============================================================ */

.t-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-2);
}

.t-display, h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(var(--fs-40), 5vw, var(--fs-64));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.t-h2, h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(var(--fs-32), 3.5vw, var(--fs-48));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.t-h3, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.t-h4, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.t-lead {
  font-family: var(--font-body);
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.t-body, p {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.t-small {
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.t-link {
  color: var(--fg-accent);
  text-decoration: none;
  font-weight: var(--fw-semibold);
}
.t-link:hover { color: var(--color-teal-500); }

.t-nav {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-14);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-1);
}

/* The signature green hand-drawn underline beneath section
   headings ("Tailored Solutions to Scale Your Business"). */
.t-underline-brush {
  display: inline-block;
  background-image: linear-gradient(transparent 78%, var(--color-teal-400) 78%, var(--color-teal-400) 92%, transparent 92%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 0.1em;
}