/* ============================================================
   Caminario App Theme — adopted 1:1 from caminario.com (sales site)
   Drop this into the app shell BEFORE app.css component rules.
   Fonts: load in <head>:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&display=swap" rel="stylesheet">
   ============================================================ */

:root{
  /* palette (from caminario.com css/site.css) */
  --cream:#F7F3EE;        /* page background */
  --ink:#2C2416;          /* primary text */
  --terracotta:#C4785A;   /* primary accent / buttons */
  --terracotta-deep:#8a3d2b; /* hover / active */
  --sage:#8B9A7D;         /* secondary accent */
  --amber:#D4A574;        /* warm tertiary */
  --muted:#5a5248;        /* secondary text */
  --faint:#7a7166;        /* tertiary text */
  --line:#e8e0d4;         /* borders / dividers */
  --card:#fffdf9;         /* card surface */
  --sage-soft:color-mix(in srgb, var(--sage) 18%, var(--cream));
  --amber-soft:color-mix(in srgb, var(--amber) 16%, var(--cream));

  /* layout */
  --max:68rem; --content:42rem; --header-h:4.25rem;
  --radius:10px; --radius-sm:6px;
  --gap:1rem; --pad:1.25rem;

  /* type */
  --font-ui:"Source Sans 3","Source Sans Pro",system-ui,-apple-system,sans-serif;
  --font-display:Georgia,"Times New Roman",serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  color-scheme:light;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{
  background:var(--cream); color:var(--ink);
  font-family:var(--font-ui); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.display{font-family:var(--font-display); font-weight:400; color:var(--ink); line-height:1.25}
h1{font-size:clamp(1.6rem,2.4vw,2.2rem)}
h2{font-size:clamp(1.3rem,2vw,1.6rem)}
h3{font-size:1.15rem}
p{margin:0 0 .9rem}
a{color:var(--terracotta-deep); text-decoration:none}
a:hover{text-decoration:underline}
small,.faint{color:var(--faint)}
.muted{color:var(--muted)}

/* layout helpers */
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:1.25rem}
.content{max-width:var(--content); margin-inline:auto}
.stack>*+*{margin-top:var(--gap)}

/* header */
.app-header{
  height:var(--header-h); display:flex; align-items:center; gap:1rem;
  padding-inline:1.25rem; background:var(--cream);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;
}
.app-header .wordmark{font-family:var(--font-display); font-size:1.4rem; color:var(--ink)}

/* cards */
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--pad);
}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-ui); font-weight:600; font-size:1rem;
  padding:.7rem 1.4rem; border-radius:var(--radius-sm); border:1px solid transparent;
  background:var(--terracotta); color:#fff; cursor:pointer; transition:background .15s ease;
}
.btn:hover{background:var(--terracotta-deep); text-decoration:none}
.btn.secondary{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.secondary:hover{background:var(--sage-soft)}
.btn.ghost{background:transparent; color:var(--terracotta-deep)}
.btn[disabled]{opacity:.5; cursor:not-allowed}

/* inputs */
label{display:block; font-weight:600; color:var(--muted); margin-bottom:.35rem}
input[type=text],input[type=email],input[type=password],textarea,select{
  width:100%; font:inherit; color:var(--ink); background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:.65rem .8rem;
}
input:focus,textarea:focus,select:focus{outline:2px solid var(--sage); outline-offset:1px; border-color:var(--sage)}
textarea{min-height:7rem; resize:vertical}

/* progress (completion %) */
.progress{height:.5rem; background:var(--line); border-radius:999px; overflow:hidden}
.progress>span{display:block; height:100%; background:var(--sage)}
.pill{display:inline-block; font-size:.8rem; padding:.15rem .6rem; border-radius:999px;
  background:var(--amber-soft); color:var(--muted)}

/* sensitivity chips */
.sens-open{background:var(--sage-soft)}
.sens-restricted{background:color-mix(in srgb,var(--terracotta) 16%,var(--cream)); color:var(--terracotta-deep)}

/* version stamp — ALWAYS bottom-right (Marcel: "v nummer unten rechts immer") */
.version-stamp{
  position:fixed; right:.75rem; bottom:.6rem; z-index:50;
  font-family:var(--font-mono); font-size:.72rem; color:var(--faint);
  background:color-mix(in srgb,var(--card) 80%,transparent); padding:.15rem .45rem;
  border-radius:999px; pointer-events:none; user-select:none;
}

/* mobile */
@media (max-width:640px){
  body{font-size:15px}
  .app-header{height:auto; padding-block:.6rem}
}