/* ============================================================================
   KompMajstor — Design System Tokens
   ----------------------------------------------------------------------------
   Reverse-engineered from kompmajstor.eu (Astra theme + Beaver Builder).
   Load Google Fonts via the @import at the top, then `@import` this file
   from anywhere you want the brand vocabulary.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@500;700;800&display=swap");

:root {
  /* ---- Brand colors ----------------------------------------------------- */
  --km-gold:        #fabc41;  /* primary brand color — wordmark, CTAs, link */
  --km-gold-deep:   #a77d29;  /* monochrome wordmark fill, hover-darker     */
  --km-gold-tint:   #f8da9c;  /* current-menu-item highlight                */
  --km-gold-tint-2: #f4d087;  /* menu-item hover                            */
  --km-mint:        #bcebcb;  /* secondary accent / success                 */
  --km-navy:        #04395e;  /* body text + button fill (primary text)     */
  --km-slate:       #8491a3;  /* muted captions, meta                       */
  --km-bronze:      #735f3d;  /* rare accent                                */
  --km-cream:       #f9f9f9;  /* card surface / button text on dark         */
  --km-ink:         #424242;  /* dark UI surfaces                           */
  --km-black:       #000000;  /* site title                                 */

  /* Functional surfaces (derived) */
  --km-page-bg:        #ecf0f2;
  --km-page-bg-image:  url("assets/bg-shape.jpg");
  --km-card-bg:        #ffffff;
  --km-card-bg-alt:    var(--km-cream);
  --km-divider:        #e1e4e6;
  --km-text-meta:      #868686;

  /* ---- Foreground tokens (semantic) ------------------------------------ */
  --fg-1:           var(--km-navy);     /* primary text                     */
  --fg-2:           var(--km-ink);      /* secondary text                   */
  --fg-3:           var(--km-slate);    /* muted / meta                     */
  --fg-on-gold:     var(--km-navy);     /* text over gold band              */
  --fg-on-navy:     var(--km-cream);    /* text over navy fill              */
  --fg-link:        var(--km-gold);
  --fg-link-hover:  var(--km-navy);
  --fg-heading:     var(--km-gold);     /* the brand commits to gold headings */

  /* ---- Type families --------------------------------------------------- */
  --font-display:   "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:      "Lato", "Helvetica Neue", Arial, sans-serif;
  --font-mono:      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Type scale (desktop) -------------------------------------------- */
  --fs-h1:          75px;
  --fs-h2:          50px;
  --fs-h3:          32px;
  --fs-h4:          20px;
  --fs-h5:          18px;
  --fs-h6:          15px;
  --fs-body:        17px;
  --fs-small:       15px;
  --fs-button:      14px;
  --fs-caption:     13px;

  --lh-h1:          1.4;
  --lh-h2:          1.3;
  --lh-h3:          1.3;
  --lh-h4:          1.2;
  --lh-body:        1.6;

  --fw-regular:     400;
  --fw-medium:      500;
  --fw-bold:        700;
  --fw-black:       800;

  /* ---- Spacing scale --------------------------------------------------- */
  --sp-1:           4px;
  --sp-2:           8px;
  --sp-3:           12px;
  --sp-4:           16px;
  --sp-5:           24px;
  --sp-6:           32px;
  --sp-7:           48px;
  --sp-8:           64px;
  --sp-9:           96px;
  --sp-block:       3em;     /* default block padding from Astra */

  /* ---- Radii ----------------------------------------------------------- */
  --radius-xs:      2px;
  --radius:         3px;     /* the brand radius — buttons, inputs, badges */
  --radius-lg:      8px;     /* reserve for new components only */

  /* ---- Borders --------------------------------------------------------- */
  --border-width:   2px;
  --border-color:   var(--km-navy);

  /* ---- Shadows --------------------------------------------------------- */
  --shadow-card:    0 6px 15px -2px rgba(16, 24, 40, .05);
  --shadow-popover: 0 12px 32px -8px rgba(4, 57, 94, .18);

  /* ---- Motion ---------------------------------------------------------- */
  --duration:       .2s;
  --ease:           linear;        /* the brand explicitly uses linear */
  --transition:     all var(--duration) var(--ease);

  /* ---- Layout ---------------------------------------------------------- */
  --container:      1200px;
  --container-narrow: 750px;
  --gutter-mobile:  2.4em;
  --gutter-tablet:  5.67em;
  --gutter-desktop: 6.67em;
}

/* ============================================================================
   Semantic base — drop these into <body> to inherit the brand defaults.
   Pure typography + colors only. No layout opinions.
   ========================================================================== */

html { font-size: 106.25%; }    /* ≈ 17px root */
@media (max-width: 921px) { html { font-size: 96.9%; } }
@media (max-width: 544px) { html { font-size: 96.9%; } }

body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 1rem;
  line-height: var(--lh-body);
  color: var(--fg-1);
  background-color: var(--km-page-bg);
  background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0)),
                    var(--km-page-bg-image);
  background-repeat: repeat;
  background-position: center center;
  background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--fg-heading);
  margin: 0 0 .5em;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
h5 { font-size: var(--fs-h5); line-height: var(--lh-h4); }
h6 { font-size: var(--fs-h6); line-height: 1.25; }

@media (max-width: 921px) {
  h1 { font-size: 45px; } h2 { font-size: 32px; } h3 { font-size: 25px; }
}
@media (max-width: 544px) {
  h1 { font-size: 30px; } h2 { font-size: 23px; } h3 { font-size: 20px; }
}

p { margin: 0 0 1.4em; }
strong, b { font-weight: var(--fw-bold); color: var(--fg-1); }
em, i { font-style: italic; }

a {
  color: var(--fg-link);
  text-decoration: none;
  transition: var(--transition);
}
a:hover, a:focus { color: var(--fg-link-hover); }

::selection { background-color: var(--km-gold); color: var(--km-black); }

/* Code (utilitarian — the brand site doesn't really show code) */
code, pre {
  font-family: var(--font-mono);
  background: #eee;
  border-radius: var(--radius-xs);
  padding: 0 .3em;
  font-size: .9em;
}
pre { padding: 1em; overflow-x: auto; }

/* Blockquote — light left bar */
blockquote {
  margin: 1.5em;
  padding-left: 1em;
  border-left: 5px solid rgba(0,0,0,.05);
  color: var(--fg-1);
}

/* ============================================================================
   Convenience helper classes — opt-in.
   ========================================================================== */

.km-display    { font-family: var(--font-display); font-weight: var(--fw-bold); }
.km-body       { font-family: var(--font-body); }

.km-tagline    {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  letter-spacing: .04em;
  color: var(--km-gold);
  text-transform: uppercase;
}

.km-wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  letter-spacing: .04em;
  color: var(--km-gold);
  text-transform: uppercase;
}

.km-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--km-slate);
}