/* ============================================================
   SILUNA — Canonical Brand Stylesheet
   Source of truth: kaufkraft-rechner (Inflationstool) + siluna-website/links.html
   Use this design language for ALL future Simon/SILUNA tools & websites:
   light/white background, warm gold accent, editorial serif + clean sans.
   Import or copy this file, then build pages with the classes below.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* Backgrounds */
  --color-bg:            #FFFFFF;   /* primary page background */
  --color-bg-subtle:     #FAF8F4;   /* warm cream — alternating sections, cards */

  /* Text */
  --color-ink:           #1C1A16;   /* headings, primary text, dark accent blocks */
  --color-ink-soft:      #55524A;   /* body copy, secondary text */
  --color-ink-faint:     #8B877C;   /* tertiary / meta text */

  /* Accent (gold) */
  --color-accent:        #C39A44;   /* solid fills: buttons, icons, dots, avatar rings */
  --color-accent-dark:   #A8813A;   /* text/links ON light backgrounds (eyebrows, hover) */
  --color-accent-tint:   #F7F0E1;   /* light gold tint background (badges, highlighted cards) */

  /* Structure */
  --color-border:        #E9E4D8;   /* all hairline borders on light surfaces */
  --color-loss:          #9C4A3C;   /* negative/warning accent (use sparingly) */

  /* Fonts */
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;  /* headlines, big numbers */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* everything else */

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-lg: 0 30px 60px -20px rgba(28,26,22,.16);
  --shadow-sm: 0 8px 20px -16px rgba(28,26,22,.25);

  --container-max: 1180px;
}

/* ============ Base ============ */
*,*::before,*::after{box-sizing:border-box;}
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-ink);
  font-family:var(--font-sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block;}
a{color:var(--color-accent-dark);text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-serif);font-weight:600;line-height:1.15;margin:0;letter-spacing:-0.01em;color:var(--color-ink);}
p{margin:0;line-height:1.7;color:var(--color-ink-soft);}
.container{max-width:var(--container-max);margin:0 auto;padding:0 28px;}

/* ============ Eyebrow / badge label ============ */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-sans);font-weight:700;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--color-accent-dark);
}
.eyebrow::before{content:'';width:24px;height:1px;background:var(--color-accent-dark);}

.badge{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.4rem .9rem;border:1px solid var(--color-border);border-radius:var(--radius-pill);
  background:var(--color-bg);color:var(--color-ink-soft);
  font-size:.7rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
}
.badge-diamond{color:var(--color-accent);font-size:.65rem;}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-sans);font-weight:700;font-size:.94rem;
  padding:16px 30px;border-radius:var(--radius-pill);border:1.5px solid transparent;cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--color-accent);color:#fff;}
.btn-primary:hover{background:var(--color-accent-dark);transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.btn-ghost{background:transparent;color:var(--color-ink-soft);border-color:var(--color-border);}
.btn-ghost:hover{border-color:var(--color-accent);color:var(--color-accent-dark);}
.btn-block{width:100%;}

/* ============ Cards ============ */
.card{
  background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:1.5rem;box-shadow:var(--shadow-sm);
}
.card-accent{border-color:var(--color-accent);background:var(--color-accent-tint);}

/* A single deliberate DARK block for emphasis on an otherwise light page
   (e.g. a strong CTA). Use sparingly — one per page, max. */
.cta-block{
  background:var(--color-ink);border-radius:var(--radius-lg);
  padding:1.75rem 1.5rem;color:#EDEBE5;
}
.cta-block h2,.cta-block h3{color:#fff;}
.cta-block a.btn-primary{background:var(--color-accent);}
.cta-block .eyebrow{color:var(--color-accent);}
.cta-block .eyebrow::before{background:var(--color-accent);}

/* ============ Avatar / round photo (gold ring) ============ */
.avatar-ring{
  border-radius:50%;object-fit:cover;display:block;
  border:3px solid var(--color-bg);
  box-shadow:0 0 0 2px var(--color-accent), var(--shadow-lg);
}

/* ============ Pill link/nav buttons (e.g. link-in-bio pages) ============ */
.pill-link{
  display:flex;align-items:center;justify-content:center;gap:10px;padding:16px;
  border:1.5px solid var(--color-border);border-radius:var(--radius-pill);
  background:var(--color-bg);color:var(--color-ink);font-weight:600;font-size:.94rem;
  box-shadow:var(--shadow-sm);transition:all .2s ease;
}
.pill-link:hover{border-color:var(--color-accent);transform:translateY(-2px);}
.pill-link.primary{background:var(--color-accent);color:#fff;border-color:var(--color-accent);}
.pill-link.primary:hover{background:var(--color-accent-dark);border-color:var(--color-accent-dark);}

/* ============ Chips / selectable pills (tools, filters) ============ */
.chip{
  border:1.5px solid var(--color-border);background:var(--color-bg);color:var(--color-ink-soft);
  border-radius:var(--radius-pill);padding:.55rem 1.05rem;font-size:.88rem;font-weight:500;
  transition:all .15s ease;
}
.chip:hover{border-color:var(--color-accent);}
.chip.is-selected{background:var(--color-ink);border-color:var(--color-ink);color:#fff;}

/* ============ Result / stat display ============ */
.result-number{
  font-family:var(--font-serif);font-weight:700;color:var(--color-ink);
  font-size:clamp(2.2rem,9vw,3.2rem);line-height:1.1;letter-spacing:-.01em;
}
.result-label{font-size:.82rem;font-weight:600;color:var(--color-ink-soft);}

/* ============ Utility text colors ============ */
.text-ink{color:var(--color-ink);}
.text-soft{color:var(--color-ink-soft);}
.text-faint{color:var(--color-ink-faint);}
.text-accent{color:var(--color-accent-dark);}