/* ============================================================
   UTILACY — Colors & Type Foundations
   Petrol + yellow. Clean, bold, enterprise. German-language brand.
   Load this file and reference the CSS variables below.
   ============================================================ */

/* ---------- FONT FACES ---------- */
@font-face {
  font-family: "Zekton";
  src: url("fonts/zekton_rg.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Medium.ttf") format("truetype");
  /* only a Medium master was provided; map the full UI range to it so heading
     weights (600/700) bind to the REAL Montserrat face rather than a fallback */
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  /* variable face — also serve 600/700 by clamping the axis */
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  /* ============================================================
     COLOR — PRIMARY (PETROL)
     #008085 is THE brand color. Everything else orbits it.
     ============================================================ */
  --petrol-bright:  #0C868B;   /* hover / lifted state              */
  --petrol:         #008085;   /* PRIMARY — page bg, brand surfaces */
  --petrol-dark:    #047377;   /* buttons, links on light           */
  --petrol-darker:  #04696C;   /* pressed / deeper fills            */
  --petrol-mid:     #017579;   /* card fill on a petrol background  */
  --petrol-deep:    #044C4F;   /* darkest — section bars, footers   */

  /* ============================================================
     COLOR — SECONDARY (YELLOW ACCENT)
     Sparingly. Highlights, accents, key links, selection.
     ============================================================ */
  --yellow:       #FEDF02;
  --yellow-dark:  #F5BD1E;

  /* ============================================================
     COLOR — NEUTRALS
     ============================================================ */
  --white:        #FFFFFF;
  --grey:         #555555;   /* body copy on white                 */
  --grey-light:   #8A8A8A;
  --ink:          #0B2B2C;   /* near-black with a petrol cast      */

  /* On-petrol text tints (text/borders over a petrol background)  */
  --on-petrol:        rgba(255,255,255,1);
  --on-petrol-80:     rgba(255,255,255,0.80);
  --on-petrol-70:     rgba(255,255,255,0.70);
  --on-petrol-20:     rgba(255,255,255,0.20);
  --on-petrol-10:     rgba(255,255,255,0.10);

  /* ============================================================
     SEMANTIC TOKENS
     ============================================================ */
  --bg:             var(--petrol);      /* default page background  */
  --bg-deep:        var(--petrol-deep); /* section bars / footer    */
  --surface:        var(--white);       /* light content cards      */
  --surface-petrol: var(--petrol-mid);  /* glass card on petrol     */

  --fg:             var(--white);       /* text on petrol           */
  --fg-muted:       var(--on-petrol-80);
  --fg-on-light:    var(--petrol-dark); /* headings on white        */
  --fg-body-light:  var(--grey);        /* body copy on white       */

  --accent:         var(--yellow);
  --accent-strong:  var(--yellow-dark);

  --border-on-petrol: var(--on-petrol-20);
  --border-light:     #E2E8E8;

  /* ============================================================
     TYPE — FAMILIES
     Zekton  → brand wordmark + big display (techno, geometric)
     Montserrat → UI, headings, default body (medium-weight brand)
     Source Sans 3 → long-form prose / dense body
     JetBrains Mono → code, technical labels, tabular data
     ============================================================ */
  --font-display: "Zekton", "Montserrat", system-ui, sans-serif;
  --font-sans:    "Montserrat", "Source Sans 3", system-ui, -apple-system, sans-serif;
  --font-prose:   "Source Sans 3", "Montserrat", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ============================================================
     TYPE — TYPE SCALE  (1.250 major-third, 16px base)
     ============================================================ */
  --text-xs:    0.75rem;   /* 12 — captions, legal               */
  --text-sm:    0.875rem;  /* 14 — labels, meta                  */
  --text-base:  1rem;      /* 16 — body                          */
  --text-lg:    1.125rem;  /* 18 — lead body (site default)      */
  --text-xl:    1.25rem;   /* 20                                 */
  --text-2xl:   1.5rem;    /* 24 — h3                            */
  --text-3xl:   1.875rem;  /* 30 — h2                            */
  --text-4xl:   2.25rem;   /* 36 — h1                            */
  --text-5xl:   3rem;      /* 48 — hero                          */
  --text-6xl:   3.75rem;   /* 60 — big display                   */

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.6;   /* body / prose                       */

  --weight-regular: 400;
  --weight-medium:  500;   /* brand default body weight          */
  --weight-semibold:600;
  --weight-bold:    700;

  --tracking-display: -0.01em;
  --tracking-wide:    0.08em;  /* eyebrows / mono labels (uppercase) */

  /* ============================================================
     RADII / SHADOW / SPACING
     ============================================================ */
  --radius-sm:  4px;    /* buttons, inputs (site uses rounded-sm) */
  --radius-md:  8px;
  --radius-lg:  12px;   /* cards (rounded-xl)                     */
  --radius-2xl: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(4,76,79,0.08);
  --shadow-md: 0 4px 12px rgba(4,76,79,0.12);
  --shadow-lg: 0 12px 32px rgba(4,76,79,0.18);   /* card shadow-xl */

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-8: 48px; --space-10: 64px;
  --space-12: 96px;

  --maxw: 1280px;   /* breakpoint-xl container */
}

/* ============================================================
   GLOBAL BASE
   Guarantees the brand sans is the default everywhere — without this,
   any unstyled text falls back to the browser default (Times New Roman).
   ============================================================ */
html, body {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply on a page that has loaded this file. Defaults assume a
   PETROL page background (the brand default).
   ============================================================ */

.u-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
}

.u-h1, h1.u {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}
.u-h2, h2.u {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
}
.u-h3, h3.u {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
}
.u-lead {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}
.u-body, p.u {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
.u-prose {
  font-family: var(--font-prose);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}
/* Eyebrow / kicker — uppercase mono-ish label, often yellow */
.u-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
}
.u-code, code.u, pre.u {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Gradient brand text (white → yellow), used in hero headlines */
.u-text-gradient {
  background: linear-gradient(135deg, #ffffff 30%, var(--yellow) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Yellow text selection — a signature brand detail */
::selection { background: var(--yellow); color: var(--petrol-deep); }