/*
 * filename: swo.css
 * description: SafariHQ brand tokens + base cockpit layout. Centralised so every later agent includes one stylesheet and inherits the SWO look (amber, cream, Poppins, soft radii, line icons, sparkle accents). Edit tokens here, every panel updates.
 * project: safari-hq (Build #144)
 * version: 1.0.0
 * created: 2026-06-22 SAST
 * modified: 2026-06-22 SAST
 * changes: Initial brand stylesheet by Agent A.
 */

/* ---------- Tokens ----------------------------------------------------- */
:root {
    /* Brand palette */
    --swo-amber:        #D4A24C;
    --swo-amber-dark:   #B0832F;
    --swo-amber-soft:   #F5E6C4;
    --swo-cream:        #FAF6EE;
    --swo-cream-deep:   #F1E9D6;
    --swo-ink:          #1F1B16;
    --swo-ink-soft:     #4B4338;
    --swo-line:         #E5DCC6;
    --swo-white:        #FFFFFF;
    --swo-danger:       #B43A2A;
    --swo-success:      #4F7A3A;

    /* Spacing scale */
    --swo-s-0:  4px;
    --swo-s-1:  8px;
    --swo-s-2:  12px;
    --swo-s-3:  16px;
    --swo-s-4:  24px;
    --swo-s-5:  32px;
    --swo-s-6:  48px;

    /* Radii (soft curves) */
    --swo-r-1:  6px;
    --swo-r-2:  12px;
    --swo-r-3:  20px;
    --swo-r-pill: 999px;

    /* Type */
    --swo-font: 'Poppins', system-ui, -apple-system, Segoe UI, sans-serif;
    --swo-fw-light: 300;
    --swo-fw-reg:   400;
    --swo-fw-med:   500;
    --swo-fw-semi:  600;
    --swo-fw-bold:  700;

    /* Elevation */
    --swo-shadow-1: 0 1px 2px rgba(31,27,22,.06), 0 2px 4px rgba(31,27,22,.04);
    --swo-shadow-2: 0 4px 12px rgba(31,27,22,.08), 0 2px 4px rgba(31,27,22,.04);
}

/* ---------- Reset + base ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--swo-cream); }
body {
    font-family: var(--swo-font);
    font-weight: var(--swo-fw-reg);
    color: var(--swo-ink);
    background: var(--swo-cream);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--swo-amber-dark); text-decoration: none; }
a:hover { color: var(--swo-ink); text-decoration: underline; }

h1, h2, h3, h4 { font-weight: var(--swo-fw-semi); margin: 0 0 var(--swo-s-2); letter-spacing: -0.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- Brand chrome ---------------------------------------------- */
.swo-header {
    display: flex;
    align-items: center;
    gap: var(--swo-s-4);
    padding: var(--swo-s-3) var(--swo-s-4);
    background: var(--swo-white);
    border-bottom: 1px solid var(--swo-line);
    box-shadow: var(--swo-shadow-1);
    position: sticky;
    top: 0;
    z-index: 50;
}

.swo-header__brand { display: flex; align-items: center; gap: var(--swo-s-2); }
.swo-mark {
    width: 28px; height: 28px;
    border-radius: var(--swo-r-2);
    background: linear-gradient(135deg, var(--swo-amber), var(--swo-amber-dark));
    box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, var(--swo-shadow-1);
}
.swo-wordmark { font-weight: var(--swo-fw-med); font-size: 1.05rem; letter-spacing: -0.02em; }
.swo-wordmark strong { color: var(--swo-amber-dark); font-weight: var(--swo-fw-bold); }
.swo-build {
    font-size: 0.7rem; color: var(--swo-ink-soft);
    background: var(--swo-cream-deep);
    border-radius: var(--swo-r-pill);
    padding: 2px var(--swo-s-1);
}

.swo-nav {
    display: flex; gap: var(--swo-s-1);
    margin-left: auto; margin-right: auto;
    flex-wrap: wrap;
}
.swo-nav__link {
    display: inline-block;
    padding: var(--swo-s-1) var(--swo-s-3);
    border-radius: var(--swo-r-pill);
    color: var(--swo-ink-soft);
    font-weight: var(--swo-fw-med);
    font-size: 0.9rem;
    transition: background .15s ease, color .15s ease;
}
.swo-nav__link:hover { background: var(--swo-cream-deep); color: var(--swo-ink); text-decoration: none; }
.swo-nav__link.is-active {
    background: var(--swo-amber);
    color: var(--swo-white);
    box-shadow: var(--swo-shadow-1);
}

.swo-header__user { display: flex; align-items: center; gap: var(--swo-s-1); }
.swo-user__name { color: var(--swo-ink-soft); font-size: 0.9rem; }
.swo-sparkle {
    font-size: 1rem;
    filter: drop-shadow(0 0 6px rgba(212,162,76,.4));
}

/* ---------- Main grid + panels ---------------------------------------- */
.swo-main {
    flex: 1;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--swo-s-4);
}

.swo-panel {
    background: var(--swo-white);
    border: 1px solid var(--swo-line);
    border-radius: var(--swo-r-3);
    box-shadow: var(--swo-shadow-1);
    margin-bottom: var(--swo-s-4);
    overflow: hidden;
}
.swo-panel.is-active { box-shadow: var(--swo-shadow-2); }

.swo-panel__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--swo-s-3) var(--swo-s-4);
    border-bottom: 1px solid var(--swo-line);
    background: linear-gradient(180deg, var(--swo-white), var(--swo-cream));
}
.swo-panel__title { margin: 0; }
.swo-panel__body { padding: var(--swo-s-4); }

.swo-panel__placeholder {
    color: var(--swo-ink-soft);
    background: var(--swo-cream);
    border: 1px dashed var(--swo-line);
    border-radius: var(--swo-r-2);
    padding: var(--swo-s-4);
    text-align: center;
}

/* ---------- Reusable elements ---------------------------------------- */
.swo-btn {
    display: inline-flex; align-items: center; gap: var(--swo-s-1);
    padding: var(--swo-s-1) var(--swo-s-3);
    background: var(--swo-amber);
    color: var(--swo-white);
    border: 1px solid var(--swo-amber-dark);
    border-radius: var(--swo-r-pill);
    font-weight: var(--swo-fw-med);
    cursor: pointer;
    transition: background .15s ease, transform .05s ease;
}
.swo-btn:hover { background: var(--swo-amber-dark); }
.swo-btn:active { transform: translateY(1px); }
.swo-btn--ghost {
    background: transparent; color: var(--swo-ink); border-color: var(--swo-line);
}
.swo-btn--ghost:hover { background: var(--swo-cream-deep); }
.swo-btn--danger { background: var(--swo-danger); border-color: var(--swo-danger); }

.swo-input, .swo-select, .swo-textarea {
    width: 100%;
    padding: var(--swo-s-2) var(--swo-s-3);
    border: 1px solid var(--swo-line);
    border-radius: var(--swo-r-1);
    background: var(--swo-white);
}
.swo-input:focus, .swo-select:focus, .swo-textarea:focus {
    outline: 2px solid var(--swo-amber-soft);
    border-color: var(--swo-amber);
}

.swo-pill {
    display: inline-block;
    padding: 2px var(--swo-s-2);
    background: var(--swo-cream-deep);
    border-radius: var(--swo-r-pill);
    font-size: 0.78rem;
    color: var(--swo-ink-soft);
}
.swo-pill--amber { background: var(--swo-amber-soft); color: var(--swo-amber-dark); }
.swo-pill--success { background: #E2EFD7; color: var(--swo-success); }
.swo-pill--danger  { background: #F4D7D2; color: var(--swo-danger); }

/* Line-icon convention: SVG strokes are currentColor, never filled. */
.swo-icon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* Sparkle accent — use sparingly. */
.swo-sparkle--accent::after {
    content: "\2728";
    margin-left: var(--swo-s-1);
    color: var(--swo-amber);
}

/* ---------- Footer + toast ------------------------------------------- */
.swo-footer {
    padding: var(--swo-s-3) var(--swo-s-4);
    color: var(--swo-ink-soft);
    font-size: 0.8rem;
    display: flex; justify-content: space-between;
    border-top: 1px solid var(--swo-line);
    background: var(--swo-white);
}

.swo-toast {
    position: fixed; bottom: var(--swo-s-4); right: var(--swo-s-4);
    background: var(--swo-ink); color: var(--swo-white);
    padding: var(--swo-s-2) var(--swo-s-4);
    border-radius: var(--swo-r-pill);
    box-shadow: var(--swo-shadow-2);
    z-index: 100;
}
.swo-toast--error { background: var(--swo-danger); }
.swo-toast--ok    { background: var(--swo-success); }

/* ---------- Login page ----------------------------------------------- */
.swo-login {
    max-width: 360px; margin: 10vh auto;
    padding: var(--swo-s-5);
    background: var(--swo-white);
    border: 1px solid var(--swo-line);
    border-radius: var(--swo-r-3);
    box-shadow: var(--swo-shadow-2);
}
.swo-login h1 { text-align: center; margin-bottom: var(--swo-s-4); }
.swo-login form > * { margin-bottom: var(--swo-s-2); display: block; }
.swo-login .swo-err { color: var(--swo-danger); font-size: 0.9rem; }

/* ---------- Responsive ------------------------------------------------ */
@media (max-width: 720px) {
    .swo-header { flex-wrap: wrap; gap: var(--swo-s-2); }
    .swo-nav { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; }
    .swo-main { padding: var(--swo-s-2); }
    .swo-panel__head, .swo-panel__body { padding: var(--swo-s-3); }
}