/* ============================================================================
   EQ Design Tokens
   Sky / Deep / Ice / Ink — Plus Jakarta Sans — 8px grid — no shadows/gradients
   ============================================================================ */

:root {
    /* Colour */
    --eq-sky:        #3DA8D8;
    --eq-deep:       #2986B4;
    --eq-ice:        #EAF5FB;
    --eq-ink:        #1A1A2E;
    --eq-grey:       #666666;
    --eq-white:      #FFFFFF;
    --eq-border:     #D7E6EE;
    --eq-success:    #1F8A4C;
    --eq-warn:       #B88600;
    --eq-error:      #B83232;

    /* Typography */
    --eq-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Spacing — 8px grid */
    --eq-s-1:  4px;
    --eq-s-2:  8px;
    --eq-s-3: 12px;
    --eq-s-4: 16px;
    --eq-s-5: 24px;
    --eq-s-6: 32px;
    --eq-s-7: 48px;
    --eq-s-8: 64px;

    /* Radius */
    --eq-r-card: 8px;
    --eq-r-cta:  6px;
    --eq-r-pill: 999px;

    /* Layout */
    --eq-max-width: 1200px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font-family: var(--eq-font);
    color: var(--eq-ink);
    background: var(--eq-ice);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--eq-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Layout shell */
.eq-shell {
    max-width: var(--eq-max-width);
    margin: 0 auto;
    padding: var(--eq-s-5) var(--eq-s-4);
}

/* Header */
.eq-header {
    background: var(--eq-white);
    border-bottom: 1px solid var(--eq-border);
}
.eq-header-inner {
    max-width: var(--eq-max-width);
    margin: 0 auto;
    padding: var(--eq-s-4) var(--eq-s-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eq-s-4);
}
.eq-brand {
    font-weight: 800;
    font-size: 18px;
    color: var(--eq-ink);
}
.eq-brand-sub {
    color: var(--eq-grey);
    font-weight: 500;
    margin-left: var(--eq-s-2);
}
.eq-userbar {
    display: flex;
    align-items: center;
    gap: var(--eq-s-3);
    font-size: 13px;
    color: var(--eq-grey);
}

/* Footer */
.eq-footer {
    max-width: var(--eq-max-width);
    margin: 0 auto;
    padding: var(--eq-s-6) var(--eq-s-4);
    color: var(--eq-grey);
    font-size: 12px;
    text-align: center;
}

/* Cards */
.eq-card {
    background: var(--eq-white);
    border: 1px solid var(--eq-border);
    border-radius: var(--eq-r-card);
    padding: var(--eq-s-5);
}

/* Buttons */
.eq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--eq-s-3) var(--eq-s-5);
    border-radius: var(--eq-r-cta);
    font-family: var(--eq-font);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    text-decoration: none;
}
.eq-btn-primary {
    background: var(--eq-sky);
    color: var(--eq-white);
}
.eq-btn-primary:hover { background: var(--eq-deep); text-decoration: none; }
.eq-btn-secondary {
    background: var(--eq-white);
    color: var(--eq-deep);
    border-color: var(--eq-border);
}
.eq-btn-secondary:hover { background: var(--eq-ice); }
.eq-btn-ghost {
    background: transparent;
    color: var(--eq-grey);
}
.eq-btn-ghost:hover { color: var(--eq-ink); }

/* Forms */
.eq-field { display: flex; flex-direction: column; gap: var(--eq-s-2); margin-bottom: var(--eq-s-4); }
.eq-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--eq-ink);
}
.eq-input, .eq-select, .eq-textarea {
    font-family: var(--eq-font);
    font-size: 14px;
    padding: var(--eq-s-3);
    border: 1px solid var(--eq-border);
    border-radius: var(--eq-r-cta);
    background: var(--eq-white);
    color: var(--eq-ink);
    width: 100%;
}
.eq-input:focus, .eq-select:focus, .eq-textarea:focus {
    outline: 2px solid var(--eq-sky);
    outline-offset: -1px;
    border-color: var(--eq-sky);
}

/* Flash messages */
.eq-flash {
    padding: var(--eq-s-3) var(--eq-s-4);
    border-radius: var(--eq-r-cta);
    margin-bottom: var(--eq-s-4);
    font-size: 14px;
    border: 1px solid var(--eq-border);
}
.eq-flash-error { background: #FDECEC; border-color: #F4C2C2; color: var(--eq-error); }
.eq-flash-success { background: #E8F5EC; border-color: #B8E0C2; color: var(--eq-success); }
.eq-flash-info { background: var(--eq-ice); color: var(--eq-deep); }

/* Login-specific centre layout */
.eq-login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--eq-s-4);
}
.eq-login-card { width: 100%; max-width: 420px; }

/* Hero numbers / placeholders */
.eq-placeholder {
    text-align: center;
    padding: var(--eq-s-7) var(--eq-s-4);
    color: var(--eq-grey);
}