/* ============================================================
   Your Guild — design system (Visual Identity Brief)
   "Walking into a master craftsman's studio at dusk."
   ============================================================ */

:root {
    /* Palette */
    --guild-black: #0F0D0B;
    --espresso:    #2D1F15;
    --warm-wood:   #8B5E3C;
    --stone:       #9E8672;
    --sand:        #C4A882;
    --parchment:   #F0E8DC;
    --aged-gold:   #B8963E;
    --cream:       #FAF6F1;
    --danger:      #8B2020;

    /* Type */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body:    'Inter', system-ui, -apple-system, sans-serif;

    /* Spacing (8px base) */
    --s-1: 8px;  --s-2: 16px;  --s-3: 24px;  --s-4: 32px;  --s-5: 48px;  --s-6: 64px;

    /* Radius */
    --r-card: 12px;  --r-btn: 8px;  --r-input: 6px;

    --maxw: 1200px;
    --readable: 680px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--parchment);
    background: var(--guild-black);
    -webkit-font-smoothing: antialiased;
}

h1, h2, .display {
    font-family: var(--font-display);
    line-height: 1.2;
    font-weight: 700;
    color: var(--parchment);
    margin: 0 0 var(--s-2);
}
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 600; }
h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.25rem; margin: 0 0 var(--s-1); }

p { margin: 0 0 var(--s-2); max-width: var(--readable); }
h1:focus, h2:focus { outline: none; }

a { color: var(--sand); text-decoration: none; }
a:hover { color: var(--parchment); }

.muted { color: var(--sand); }
.fine  { color: var(--stone); font-size: 0.85rem; }

/* Layout helpers */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-3); }
.center    { text-align: center; }
.stack > * + * { margin-top: var(--s-2); }
.screen { min-height: 100vh; display: flex; flex-direction: column; }

/* Buttons — sentence case, flat, no shadow */
.btn {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 14px 24px;
    border-radius: var(--r-btn);
    border: 1px solid transparent;
    cursor: pointer;
    transition: filter 0.15s ease, background 0.15s ease;
    display: inline-block;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--warm-wood); color: var(--cream); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.1); }
.btn-secondary { background: transparent; color: var(--sand); border-color: var(--warm-wood); }
.btn-secondary:hover:not(:disabled) { color: var(--parchment); }
.btn-ghost { background: transparent; color: var(--sand); }
.btn-ghost:hover { color: var(--parchment); }

/* Cards */
.card {
    background: var(--espresso);
    border: 1px solid var(--stone);
    border-radius: var(--r-card);
    padding: var(--s-3);
}

/* Forms */
label.field-label { display: block; font-weight: 500; font-size: 0.9rem; margin-bottom: var(--s-1); color: var(--sand); }
.input, input[type=text], input[type=email], input[type=password], input[type=url], select, textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--parchment);
    background: var(--guild-black);
    border: 1px solid var(--stone);
    border-radius: var(--r-input);
    padding: 12px 14px;
}
.input:focus, input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--warm-wood);
}
::placeholder { color: var(--stone); }

/* Selectable option chips (onboarding) */
.option {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--guild-black);
    color: var(--parchment);
    border: 1px solid var(--stone);
    border-radius: var(--r-input);
    padding: 14px 16px;
    margin-bottom: var(--s-1);
    cursor: pointer;
    font-size: 1rem;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.option:hover { border-color: var(--sand); }
.option.selected { border-color: var(--warm-wood); background: var(--espresso); }

/* Role label chip */
.role-label { font-weight: 500; font-size: 0.8rem; color: var(--warm-wood); letter-spacing: 0.02em; }

/* Progress bar */
.progress-track { height: 4px; background: var(--espresso); border-radius: 2px; overflow: hidden; }
.progress-fill  { height: 100%; background: var(--warm-wood); transition: width 0.3s ease; }

.validation-message { color: #d98a8a; font-size: 0.85rem; }

/* ---- WASM loader (rebranded warm) ---- */
.loading-progress {
    position: absolute; display: block; width: 8rem; height: 8rem;
    inset: 30vh 0 auto 0; margin: 0 auto;
}
.loading-progress circle {
    fill: none; stroke: var(--espresso); stroke-width: 0.5rem;
    transform-origin: 50% 50%; transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: var(--warm-wood);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
    position: absolute; text-align: center; color: var(--sand);
    inset: calc(30vh + 3.25rem) 0 auto 0;
}
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Gathering your team"); }

/* ---- Blazor error UI ---- */
#blazor-error-ui {
    background: var(--espresso); color: var(--parchment);
    bottom: 0; left: 0; width: 100%; position: fixed; z-index: 1000;
    display: none; padding: 0.7rem 1.25rem;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.4);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
.blazor-error-boundary { background: var(--danger); color: var(--cream); padding: 1rem; }
.blazor-error-boundary::after { content: "Something went wrong."; }