/* =====================================================================
   Kuczyński Kancelaria — Design Tokens
   Colors, Typography, Spacing, Shadow, Motion
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Color: ink / navy ---------- */
  --ink-900: #07172B; /* hero, footer, deepest navy            */
  --ink-800: #0E2A47; /* secondary navy, dark section blocks   */
  --ink-700: #16365A; /* dark card surface, hover on dark CTA  */
  --ink-600: #1F4571; /* used sparingly for stacked depth      */

  /* ---------- Color: gold / sand accents ---------- */
  --gold-700: #9C7E3E; /* pressed / on light                   */
  --gold-500: #C6A15B; /* primary accent: CTA, hairlines       */
  --gold-300: #D9BF85; /* hover on gold                        */
  --gold-100: #EFE3C7; /* subtle gold tint background          */
  --sand-100: #E9DFC8; /* warm light section                   */

  /* ---------- Color: paper / text ---------- */
  --paper-50: #F7F5F0; /* default light section                */
  --paper-0:  #FFFFFF; /* card on light                        */
  --text-900: #1E252E; /* body text on light                   */
  --text-700: #3A4452; /* secondary body                       */
  --text-600: #6B7280; /* helper / caption                     */
  --text-300: #B7BFC9; /* placeholder                          */
  --line-200: #D6DCE5; /* dividers on light                    */
  --line-100: #ECEFF3;

  /* ---------- On dark surfaces ---------- */
  --text-on-dark:        #F4EFE3;
  --text-on-dark-muted:  #B7B19F;
  --line-on-dark:        rgba(198, 161, 91, 0.18);
  --line-on-dark-soft:   rgba(244, 239, 227, 0.08);

  /* ---------- Semantic ---------- */
  --bg:            var(--paper-50);
  --bg-elevated:   var(--paper-0);
  --bg-inverse:    var(--ink-900);
  --bg-warm:       var(--sand-100);
  --fg:            var(--text-900);
  --fg-muted:      var(--text-600);
  --accent:        var(--gold-500);
  --accent-strong: var(--gold-700);
  --border:        var(--line-200);
  --border-soft:   var(--line-100);

  /* ---------- Typography: families ---------- */
  --font-serif: "Cormorant Garamond", "Garamond", "Times New Roman", Georgia, serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Typography: scale (desktop) ---------- */
  --fs-display: 76px;  /* hero                 */
  --fs-h1:      48px;
  --fs-h2:      32px;
  --fs-h3:      22px;
  --fs-lead:    20px;
  --fs-body:    17px;
  --fs-small:   15px;
  --fs-caption: 13px;
  --fs-eyebrow: 12px;

  /* ---------- Line heights ---------- */
  --lh-display: 1.08;
  --lh-heading: 1.18;
  --lh-lead:    1.5;
  --lh-body:    1.65;
  --lh-tight:   1.3;

  /* ---------- Letter spacing ---------- */
  --tracking-display: -0.012em;
  --tracking-heading: -0.005em;
  --tracking-body:    0;
  --tracking-eyebrow: 0.14em;

  /* ---------- Spacing scale (4 px base) ---------- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ---------- Radii ---------- */
  --radius-0: 0;
  --radius-1: 2px;   /* buttons, fields           */
  --radius-2: 4px;   /* cards                     */
  --radius-3: 8px;   /* modal, dropdown           */

  /* ---------- Shadows (deliberately quiet) ---------- */
  --shadow-1: 0 1px 0 rgba(15, 42, 71, 0.04), 0 1px 2px rgba(15, 42, 71, 0.04);
  --shadow-2: 0 8px 24px -12px rgba(7, 23, 43, 0.18);
  --shadow-3: 0 20px 48px -24px rgba(7, 23, 43, 0.32);
  --hairline-gold: 0 1px 0 var(--gold-500);

  /* ---------- Layout ---------- */
  --container: 1200px;
  --container-narrow: 880px;
  --gutter: 24px;

  /* ---------- Motion ---------- */
  --ease-std:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 240ms;
  --dur-4: 320ms;
  --dur-6: 600ms;
}

/* =====================================================================
   Semantic element styles — apply to bare HTML
   ===================================================================== */

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--ink-900);
  margin: 0;
  letter-spacing: var(--tracking-heading);
  line-height: var(--lh-heading);
  text-wrap: pretty;
}

h1.display, .display {
  font-size: var(--fs-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-display);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 var(--space-4); color: var(--text-700); }

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--text-700);
  font-weight: 400;
}

.caption { font-size: var(--fs-caption); color: var(--text-600); line-height: var(--lh-tight); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold-700);
}

.eyebrow--on-dark { color: var(--gold-500); }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--gold-500);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-2) var(--ease-std);
}
a:hover { text-decoration-color: var(--gold-300); }

hr {
  border: 0;
  border-top: 1px solid var(--line-200);
  margin: var(--space-12) 0;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* On-dark variants */
.on-dark              { color: var(--text-on-dark); background: var(--ink-900); }
.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4          { color: var(--text-on-dark); }
.on-dark p           { color: var(--text-on-dark-muted); }
.on-dark .lead       { color: var(--text-on-dark); }
.on-dark hr          { border-top-color: var(--line-on-dark-soft); }

/* =====================================================================
   Reusable utility blocks
   ===================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section {
  padding: var(--space-24) 0;
}

@media (max-width: 768px) {
  :root {
    --fs-display: 44px;
    --fs-h1:      32px;
    --fs-h2:      24px;
    --fs-h3:      20px;
    --fs-lead:    18px;
    --fs-body:    16px;
  }
  .section { padding: var(--space-16) 0; }
}

/* Hairline accent under headings (gold premium tick) */
.hairline-gold {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--gold-500);
  vertical-align: middle;
}

/* =====================================================================
   Subtle technology background — used on dark hero / sections
   Inspired by the LinkedIn banner: diagonal lines + dotted data tracks
   ===================================================================== */

.tech-bg {
  position: relative;
  background: var(--ink-900);
  overflow: hidden;
  isolation: isolate;
}
.tech-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(115deg, transparent 0%, transparent 60%, rgba(198,161,91,0.05) 60%, rgba(198,161,91,0.05) 60.15%, transparent 60.3%),
    linear-gradient(115deg, transparent 0%, transparent 72%, rgba(198,161,91,0.04) 72%, rgba(198,161,91,0.04) 72.1%, transparent 72.2%),
    linear-gradient(115deg, transparent 0%, transparent 84%, rgba(198,161,91,0.06) 84%, rgba(198,161,91,0.06) 84.12%, transparent 84.25%);
  pointer-events: none;
  z-index: 0;
}
.tech-bg > * { position: relative; z-index: 1; }