@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* ============ Design tokens: Ahenfie TV/FM · black · gold · white ============ */
:root {
    /* "blue-*" names are kept for compatibility; they now hold the black scale */
    --blue-950: #050505;
    --blue-900: #0D0D0D;
    --blue-800: #171717;
    --blue-700: #1F1F1F;   /* primary (black) */
    --blue-600: #3A3A3A;
    --blue-100: #F1E6C8;
    --blue-50:  #FAF5E8;

    /* "red-*" names now hold the Ahenfie gold scale */
    --red-700: #A87A12;
    --red-600: #D4A12A;    /* accent (gold) */
    --red-100: #F3E2B3;
    --red-50:  #FBF3DF;

    --gold-ink:   #8A6410;  /* gold for text on light backgrounds */
    --gold-light: #F0C75E;  /* gold for text on dark backgrounds */
    --on-accent:  #111111;  /* text on gold fills */

    --danger-700: #B42318;
    --danger-600: #D92D20;
    --danger-100: #FEE4E2;
    --danger-50:  #FEF3F2;

    --white: #FFFFFF;
    --bg:    #F7F5F0;
    --ink:   #141414;
    --ink-2: #3D3A35;
    --muted: #6F6A60;
    --line:  #E8E3D8;

    --green-700: #11724A;
    --green-50:  #E8F6EF;
    --amber-700: #8A5A00;
    --amber-50:  #FFF5DF;

    --radius-sm: 8px;
    --radius:    12px;
    --radius-lg: 18px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
    --shadow:    0 4px 16px rgba(0, 0, 0, .08);
    --shadow-lg: 0 18px 50px rgba(0, 0, 0, .16);

    --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
    --font-body:    'DM Sans', system-ui, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: 1.15;
    margin: 0 0 .5em;
    letter-spacing: -0.02em;
    color: var(--ink);
}

a { color: var(--blue-700); text-decoration: none; }
a:hover { color: var(--gold-ink); }

img { max-width: 100%; display: block; }

/* Keep the hidden attribute working even on elements given a display value */
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--red-600); outline-offset: 2px; }

/* ============ Buttons ============ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .72rem 1.25rem;
    border: 1.5px solid transparent;
    border-radius: var(--radius-sm);
    font: 600 15px/1.2 var(--font-body);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, transform .05s, box-shadow .15s;
    text-decoration: none;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; }

.btn-primary { background: var(--blue-700); color: var(--white); }
.btn-primary:hover { background: var(--blue-800); color: var(--white); box-shadow: 0 6px 16px rgba(212, 161, 42, .28); }

.btn-accent { background: var(--red-600); color: var(--on-accent); }
.btn-accent:hover { background: var(--red-700); color: var(--on-accent); box-shadow: 0 6px 16px rgba(212,161,42, .28); }

.btn-outline { background: var(--white); color: var(--blue-700); border-color: var(--line); }
.btn-outline:hover { border-color: var(--blue-700); color: var(--blue-700); }

.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--bg); color: var(--blue-700); }

.btn-danger { background: var(--white); color: var(--danger-700); border-color: var(--danger-100); }
.btn-danger:hover { background: var(--danger-600); border-color: var(--danger-600); color: var(--white); }

.btn:disabled { opacity: .6; cursor: not-allowed; }

.btn-block { width: 100%; }
.btn-sm { padding: .45rem .8rem; font-size: 13px; }

/* ============ Forms ============ */
.form-group { margin-bottom: 1.1rem; }

.form-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: .4rem;
    font-weight: 600;
    font-size: 14px;
    color: var(--ink-2);
}
.form-label a { font-weight: 500; font-size: 13px; }

.input-wrap { position: relative; }
.input-wrap > svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--muted);
    pointer-events: none;
}

.form-control {
    width: 100%;
    padding: .72rem .95rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
    font: 15px var(--font-body);
    color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
}
.input-wrap > svg + .form-control { padding-left: 2.75rem; padding-top: .78rem; padding-bottom: .78rem; }
textarea.form-control { resize: vertical; min-height: 96px; line-height: 1.55; }
select.form-control {
    appearance: none;
    padding-right: 2.4rem;
    background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236B7690' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .8rem center;
    cursor: pointer;
}
.form-control:disabled, .form-control[readonly] { background: var(--bg); color: var(--muted); }
.form-control::placeholder { color: #A39D90; }
.form-control:focus {
    outline: none;
    border-color: var(--blue-700);
    box-shadow: 0 0 0 4px rgba(212, 161, 42, .12);
}
.form-control.is-invalid { border-color: var(--danger-600); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 4px rgba(217, 45, 32, .12); }

.toggle-password {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: none;
    padding: 6px;
    color: var(--muted);
    cursor: pointer;
    border-radius: 6px;
    display: grid;
    place-items: center;
}
.toggle-password:hover { color: var(--blue-700); }
.toggle-password svg { width: 18px; height: 18px; }
.input-wrap.has-toggle .form-control { padding-right: 2.75rem; }

.field-error { color: var(--danger-700); font-size: 13px; margin-top: .35rem; }
.field-hint  { color: var(--muted); font-size: 13px; margin-top: .35rem; }

.checkbox {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: 14px;
    color: var(--ink-2);
    cursor: pointer;
}
.checkbox input { accent-color: var(--blue-700); width: 16px; height: 16px; margin-top: 2px; }

/* ============ Alerts ============ */
.alert {
    padding: .8rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1.1rem;
    font-size: 14px;
    border-left: 4px solid;
}
.alert-success { background: var(--green-50); color: var(--green-700); border-color: var(--green-700); }
.alert-error   { background: var(--danger-50); color: var(--danger-700); border-color: var(--danger-600); }
.alert-info    { background: var(--blue-50);  color: var(--blue-800);  border-color: var(--blue-700); }
.alert-warning { background: var(--amber-50); color: var(--amber-700); border-color: #E0A100; }
.alert a { font-weight: 600; word-break: break-all; }