/* =====================================================================
   HONEYPOT Cologne — Bewerbung · Cream world
   Adapts the HONEYPOT design tokens to the light/cream surface.
   ===================================================================== */

/* @import must precede all other rules (CSS spec) — keep it first or it is ignored. */
@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;1,6..96,400&family=Nunito+Sans:opsz,wght@6..12,300;6..12,400;6..12,500;6..12,600;6..12,700&display=swap");
@font-face {
    font-family: "HONEYPOT Bodoni";
    src: url("fonts/HONEYPOT-Bodoni72.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ---- Gold ramp (from brand artwork) ---- */
    --gold-50:  #fdf7e4;
    --gold-100: #f9ecc2;
    --gold-200: #f1d36d;
    --gold-300: #ebd28e;
    --gold-400: #e9c865;
    --gold-500: #c69b47;
    --gold-600: #c29747;
    --gold-700: #a67a2f;
    --gold-800: #7a581f;
    --gold-900: #4a3612;

    --gold:    #c29747;
    --gold-hi: #f1d36d;
    --gold-lo: #c69b47;

    --gold-gradient:      linear-gradient(135deg, #c29747 0%, #f1d36d 54%, #c69b47 100%);
    --gold-gradient-soft: linear-gradient(135deg, #c29747 0%, #f1d36d 35%, #ebd28e 54%, #e9c865 74%, #c69b47 100%);
    --gold-foil: linear-gradient(105deg, #a67a2f 0%, #c29747 18%, #f1d36d 38%, #ebd28e 50%, #e9c865 62%, #c69b47 82%, #a67a2f 100%);

    /* ---- Cream-world neutrals ---- */
    --paper:       #fdf7e4;   /* canvas */
    --paper-2:     #fbf2d8;   /* warm wash */
    --card:        #fffdf6;   /* raised surface */
    --card-2:      #fbf6e7;   /* selected/tinted surface */

    --ink:         #1a160d;   /* headings — warm near-black */
    --ink-body:    #57503d;   /* body */
    --ink-muted:   #8a7f63;   /* muted / captions */
    --ink-subtle:  #b3a684;   /* hairline labels */

    --gold-text:   #97701f;   /* legible gold on cream (deep) */

    --border:        rgba(166, 122, 47, 0.26);
    --border-strong: rgba(166, 122, 47, 0.55);
    --hairline:      rgba(166, 122, 47, 0.18);

    --success: #6f8a3c;
    --danger:  #a13a2e;

    /* ---- Type ---- */
    --font-display: "HONEYPOT Bodoni", "Bodoni Moda", "Didot", Georgia, serif;
    --font-head-sans: "Avenir Next", "Avenir", "Nunito Sans", "Helvetica Neue", system-ui, sans-serif;
    --font-sans:    "Nunito Sans", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
    --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --tr-wide:   0.18em;
    --tr-wider:  0.32em;
    --tr-widest: 0.5em;

    /* ---- Spacing / radii ---- */
    --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;

    --radius: 4px;            /* tweakable: brand is square-ish */
    --radius-chip: 999px;

    --shadow-card: 0 1px 2px rgba(74, 54, 18, 0.05), 0 12px 36px rgba(74, 54, 18, 0.07);
    --shadow-lift: 0 2px 4px rgba(74, 54, 18, 0.06), 0 20px 56px rgba(74, 54, 18, 0.12);
    --glow-gold:   0 0 0 1px rgba(194,151,71,0.45), 0 14px 40px rgba(194,151,71,0.22);

    --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
    --ease-enter: cubic-bezier(0, 0.55, 0.2, 1);
    --dur-fast: 160ms;
    --dur: 280ms;
    --dur-slow: 520ms;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink-body);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Warm vignette behind everything */
body.hp-app {
    background:
        radial-gradient(ellipse 80% 50% at 50% -8%, rgba(194,151,71,0.14) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 50% 108%, rgba(194,151,71,0.10) 0%, transparent 60%),
        var(--paper);
    min-height: 100vh;
}

/* ---- Type helpers ---- */
.t-display { font-family: var(--font-display); font-weight: 400; color: var(--ink); letter-spacing: -0.01em; }
.t-gold {
    background: var(--gold-gradient);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.eyebrow {
    font-family: var(--font-sans);
    font-size: 11px; font-weight: 600;
    letter-spacing: var(--tr-wider); text-transform: uppercase;
    color: var(--gold-text);
}
.rule-gold { height: 1px; border: 0; background: var(--gold-gradient); opacity: 0.55; }

/* ---- Buttons (action) ---- */
.hp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 30px; border: 0; border-radius: var(--radius);
    font-family: var(--font-sans); font-size: 12px; font-weight: 700;
    letter-spacing: 0.26em; text-transform: uppercase; cursor: pointer;
    transition: all var(--dur) var(--ease); text-decoration: none; white-space: nowrap;
}
.hp-btn--gold { background: var(--gold-gradient); color: #2a1f08; position: relative; overflow: hidden; }
.hp-btn--gold:hover { filter: brightness(1.05); box-shadow: 0 10px 32px rgba(194,151,71,0.34); }
.hp-btn--gold:disabled { opacity: 0.45; cursor: not-allowed; filter: none; box-shadow: none; }
.hp-btn--ghost { background: transparent; color: var(--ink-body); border: 1px solid var(--border-strong); }
.hp-btn--ghost:hover { color: var(--gold-text); border-color: var(--gold-700); }
.hp-btn:focus-visible { outline: 2px solid var(--gold-700); outline-offset: 3px; }

/* foil sheen sweep on gold buttons */
.hp-btn--gold::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.55) 48%, transparent 66%);
    transform: translateX(-120%);
    transition: transform var(--dur-slow) var(--ease);
}
.hp-btn--gold:hover::after { transform: translateX(120%); }

/* ---- Inputs ---- */
.hp-input, textarea.hp-input {
    width: 100%; background: var(--card); border: 1px solid var(--border);
    color: var(--ink); font-family: var(--font-sans); font-size: 17px;
    padding: 15px 16px; border-radius: var(--radius); outline: none;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.hp-input::placeholder { color: var(--ink-subtle); }
.hp-input:focus { border-color: var(--gold-700); box-shadow: 0 0 0 3px rgba(194,151,71,0.16); }
textarea.hp-input { resize: none; line-height: 1.55; }

/* ---- Option rows (Ja/Nein, levels) ---- */
.hp-opt {
    display: flex; align-items: center; gap: 14px; width: 100%;
    background: var(--card); border: 1px solid var(--border); color: var(--ink);
    font-family: var(--font-sans); font-size: 17px; text-align: left;
    padding: 16px 18px; border-radius: var(--radius); cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
}
.hp-opt:hover { border-color: var(--gold-700); background: var(--card-2); }
.hp-opt.is-sel {
    border-color: transparent; color: #2a1f08; font-weight: 700;
    background: var(--gold-gradient); box-shadow: var(--glow-gold);
}
.hp-opt__key {
    flex: none; width: 26px; height: 26px; border-radius: 999px;
    border: 1px solid var(--border-strong); display: grid; place-items: center;
    font-size: 11px; font-weight: 700; letter-spacing: 0; color: var(--gold-text);
    background: rgba(194,151,71,0.07);
}
.hp-opt.is-sel .hp-opt__key { background: rgba(42,31,8,0.16); border-color: rgba(42,31,8,0.3); color: #2a1f08; }

/* ---- Chips ---- */
.hp-chip {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--card); border: 1px solid var(--border); color: var(--ink);
    font-family: var(--font-sans); font-size: 15px; font-weight: 600;
    padding: 11px 20px; border-radius: var(--radius-chip); cursor: pointer;
    transition: all var(--dur-fast) var(--ease); user-select: none;
}
.hp-chip:hover { border-color: var(--gold-700); background: var(--card-2); }
.hp-chip.is-sel {
    border-color: transparent; color: #2a1f08; font-weight: 700;
    background: var(--gold-gradient); box-shadow: 0 6px 18px rgba(194,151,71,0.28);
}

/* ---- Cards ---- */
.hp-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-card);
}

/* ---- Scrollbar (subtle) ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(166,122,47,0.28); border-radius: 999px; border: 2px solid var(--paper); }
::-webkit-scrollbar-track { background: transparent; }

/* ---- Step transition ---- */
/* Base state is always visible; the entrance is a pure enhancement.
   No fill-mode, so if the animation timeline never starts (e.g. a
   throttled/offscreen frame) the content still shows at full opacity. */
@media (prefers-reduced-motion: no-preference) {
    .step-enter { animation: stepIn var(--dur) var(--ease-enter); }
}
@keyframes stepIn {
    from { transform: translateY(12px); }
    to   { transform: translateY(0); }
}

/* range input */
input[type="range"].hp-range {
    width: 100%; height: 3px; -webkit-appearance: none; appearance: none;
    background: var(--border); border-radius: 999px; outline: none; cursor: pointer;
}
input[type="range"].hp-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 999px;
    background: var(--gold-gradient); border: 3px solid var(--card);
    box-shadow: 0 2px 8px rgba(194,151,71,0.4); cursor: pointer;
}
input[type="range"].hp-range::-moz-range-thumb {
    width: 26px; height: 26px; border-radius: 999px; background: var(--gold-600);
    border: 3px solid var(--card); box-shadow: 0 2px 8px rgba(194,151,71,0.4); cursor: pointer;
}
input[type="range"].hp-range:disabled { opacity: 0.4; }