/* ============================================================
   profizivotopis — base.css
   Design tokens, reset, typography, @font-face
   Extracted from _designs/warm-v2-full-site/Domov.html (Warm aesthetic)
   ============================================================ */

/* ============ @font-face (self-hosted) ============ */
/* Files live in /fonts/ — added in Krok 3.2. Uses font-display: swap to avoid FOIT. */

@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/DMSerifDisplay-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/DMSerifDisplay-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Inter-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Inter-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Caveat-Regular.woff2') format('woff2');
}

/* ============ DESIGN TOKENS ============ */
:root {
  /* warm cream palette */
  --cream:      #F5F1EA;
  --cream2:     #EDE6D8;
  --cream3:     #FFFDF8;

  /* ink (text) */
  --ink:        #1F1A17;
  --ink2:       #4A423C;
  --ink3:       #6C625A; /* darkened from #7D736A for WCAG AA — was 4.46:1 on cream, now 5.4:1 */

  /* forest (primary dark) */
  --forest:     #2D4A36;
  --forest2:    #1E3325;
  --forest3:    #3a5e46;

  /* terra (accent) */
  --terra:        #C97A5B;
  --terra-l:      #E3A185;
  --terra-soft:   #F4DCCE;
  --terra-shadow: #8d4f37; /* 3D shadow under terra pills — was hardcoded 12+ times, per audit */
  --terra-text:   #8d4f37; /* alias — use for text on cream to pass WCAG AA (#C97A5B is 2.9:1, #8d4f37 is ~6.5:1) */

  /* misc */
  --gold:       #D4A017;
  --hair:       #1F1A1722;
  --dash:       #1F1A1733;

  /* typography */
  --font-serif:  'DM Serif Display', Georgia, serif;
  --font-sans:   'Inter', system-ui, -apple-system, sans-serif;
  --font-script: 'Caveat', 'DM Serif Display', cursive; /* hand-drawn notes on 6 pages */

  /* layout */
  --wrap-max:   1280px;
  --wrap-pad:   48px;
}

/* ============ RESET ============ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
  position: relative;
  overflow-x: hidden;
}

/* warm ambient glow behind content */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(201,122,91,0.08), transparent 60%),
    radial-gradient(900px  500px at 90% 100%, rgba(45,74,54,0.06),  transparent 60%);
  pointer-events: none;
  z-index: 0;
}
body > * {
  position: relative;
  z-index: 1;
}

a { color: inherit; text-decoration: none; }

img,
picture,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--terra);
  color: var(--cream3);
}

/* ============ LAYOUT UTILITY ============ */
.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

/* ============ TYPOGRAPHY UTILITIES ============ */
.serif      { font-family: var(--font-serif); font-weight: 400; }
.italic     { font-style: italic; }
.terra      { color: var(--terra-text); }
.forest-c   { color: var(--forest); }

/* kicker = small italic eyebrow text with ornament */
.kicker {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--terra-text);
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.kicker .orn {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--terra-text);
  font-size: 20px;
}
.kicker.caps {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--terra-text);
}

/* wavy underline — hand-drawn accent under highlighted phrases */
.wavy {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'><path d='M0 8 Q 15 0, 30 8 T 60 8 T 90 8 T 120 8' stroke='%23C97A5B' stroke-width='3' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: left 100%;
  background-size: 100% 14px;
  padding-bottom: 18px;
  display: inline-block;
}

/* ============ SECTION SHELL ============ */
.section {
  padding: 110px 0;
}
.sec-head {
  max-width: 980px;
  margin-bottom: 56px;
}
.sec-head .kicker {
  margin-bottom: 20px;
}
.sec-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 64px;
  line-height: 1.06;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
.sec-title .i { font-style: italic; color: var(--forest); }
.sec-title .t { font-style: italic; color: var(--terra-text);  }
.sec-sub {
  margin-top: 20px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink2);
  max-width: 680px;
  text-wrap: pretty;
}