@import url("./haiven-design-system.css");

:root {
    --haiven-brand-canvas: #02060d;
    --haiven-brand-surface: #081222;
    --haiven-brand-surface-raised: #0d1b30;
    --haiven-brand-blue: #67b7ff;
    --haiven-brand-cyan: #95fff0;
    --haiven-brand-text: #f7fbff;
    --haiven-brand-muted: #b3c2d7;
    --haiven-brand-border: rgb(129 176 255 / 18%);
    --haiven-brand-border-strong: rgb(151 190 255 / 34%);
    --haiven-brand-radius: 12px;
    --haiven-brand-shadow: 0 20px 60px rgb(0 0 0 / 25%);
}

.haiven-theme {
    color-scheme: dark;
    --haiven-color-bg: var(--haiven-brand-canvas);
    --haiven-color-surface: var(--haiven-brand-surface);
    --haiven-color-surface-strong: var(--haiven-brand-surface-raised);
    --haiven-color-text: var(--haiven-brand-text);
    --haiven-color-text-muted: var(--haiven-brand-muted);
    --haiven-color-muted: var(--haiven-brand-muted);
    --haiven-color-border: var(--haiven-brand-border);
    --haiven-color-border-strong: var(--haiven-brand-border-strong);
    --haiven-color-accent: var(--haiven-brand-blue);
    --haiven-color-accent-strong: var(--haiven-brand-cyan);
    --haiven-color-focus: rgb(103 183 255 / 22%);
    margin: 0;
    color: var(--haiven-color-text);
    font-family: var(--haiven-font-body);
    background: var(--haiven-color-bg);
}

.haiven-theme :is(h1, h2, h3, h4) {
    color: var(--haiven-color-text);
    font-family: var(--haiven-font-display);
    letter-spacing: -.035em;
}
.haiven-theme :is(a, .btn-link) { color: var(--haiven-color-accent); }
.haiven-theme a:hover { color: var(--haiven-color-accent-strong); }
.haiven-theme :focus-visible { outline: 2px solid var(--haiven-brand-cyan); outline-offset: 4px; }
.haiven-theme h1[tabindex="-1"]:focus { outline: none; box-shadow: none; }

.haiven-theme :is(.portal-panel, .portal-stat-card, .portal-hero, .portal-loading-state,
    .portal-empty-state, .portal-confirmation-panel, .portal-secret-panel, .haiven-account-card) {
    color: var(--haiven-color-text);
    background: var(--haiven-color-surface);
    border: 1px solid var(--haiven-color-border);
    border-radius: var(--haiven-brand-radius);
    box-shadow: var(--haiven-brand-shadow);
}
.haiven-theme :is(.portal-panel, .portal-stat-card, .portal-hero) { min-width: 0; }
.haiven-theme .portal-panel { overflow-x: auto; }
.haiven-theme :is(.portal-activity-list li, .portal-timeline li) {
    color: var(--haiven-color-text);
    background: var(--haiven-color-surface-strong);
    border-color: var(--haiven-color-border);
    overflow-wrap: anywhere;
}
.haiven-theme :is(.portal-eyebrow, .portal-overline, .haiven-eyebrow) { color: var(--haiven-brand-blue); }
.haiven-theme :is(.portal-form-note, .portal-muted, .text-muted, .portal-subtitle,
    .portal-page-header p, .portal-panel-header p, .portal-hero p, .portal-stat-card span,
    .portal-stat-card p, .portal-panel p, .portal-table-subtext, .portal-activity-list span,
    .portal-timeline p, .haiven-muted) { color: var(--haiven-color-text-muted) !important; }

.haiven-theme :is(.form-control, .form-select,
    .portal-form-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .portal-form-field select, .portal-form-field textarea) {
    min-height: 2.9rem;
    padding: .75rem .9rem;
    color: var(--haiven-color-text);
    background: var(--haiven-color-bg);
    border: 1px solid var(--haiven-color-border-strong);
    border-radius: 8px;
    font: inherit;
}
.haiven-theme :is(input, textarea)::placeholder { color: #8296b2; }
.haiven-theme :is(input, textarea, select):focus {
    color: var(--haiven-color-text);
    background: var(--haiven-color-bg);
    border-color: var(--haiven-brand-blue);
    box-shadow: 0 0 0 3px var(--haiven-color-focus);
}
.haiven-theme :is(input, textarea, select):disabled { opacity: .65; }
.haiven-theme :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--haiven-brand-blue); }
.haiven-theme .portal-form-field label { color: var(--haiven-color-text); }

.haiven-theme :is(.btn, .portal-button) {
    min-height: 2.75rem;
    padding: .7rem 1.1rem;
    border-radius: 8px;
    font-family: var(--haiven-font-body);
    font-weight: 600;
    text-decoration: none;
}
.haiven-theme :is(.btn-primary, .portal-button-primary) {
    color: var(--haiven-brand-canvas);
    background: var(--haiven-brand-blue);
    border: 1px solid var(--haiven-brand-blue);
}
.haiven-theme :is(.btn-primary, .portal-button-primary):hover {
    color: var(--haiven-brand-canvas);
    background: var(--haiven-brand-cyan);
    border-color: var(--haiven-brand-cyan);
}
.haiven-theme :is(.btn-secondary, .portal-button-secondary) {
    color: var(--haiven-color-text);
    background: var(--haiven-color-surface-strong);
    border: 1px solid var(--haiven-color-border-strong);
}
.haiven-theme :is(.portal-button-danger, .btn-danger) { color: #ffced6; background: #421d2a; border-color: #89505f; }
.haiven-theme :is(.alert, .portal-alert) {
    color: var(--haiven-color-text);
    background: var(--haiven-color-surface-strong);
    border: 1px solid var(--haiven-color-border-strong);
    border-radius: 8px;
}
.haiven-theme :is(.alert-danger, .portal-alert-danger) { color: #ffced6; border-color: #89505f; background: #2d1520; }
.haiven-theme :is(.alert-success, .portal-alert-success) { color: #bdf5dd; border-color: #386853; background: #10281f; }
.haiven-theme :is(.alert-warning, .portal-alert-warning) { color: #ffe0a3; border-color: #7d6339; background: #2d2416; }
.haiven-theme .text-danger { color: #ffb3c2 !important; }
.haiven-theme :is(.portal-table, .portal-definition-list) { color: var(--haiven-color-text); }
.haiven-theme .portal-table :is(th, td) { border-color: var(--haiven-color-border); }
.haiven-theme .portal-table th { color: var(--haiven-color-text-muted); background: var(--haiven-color-surface-strong); }
.haiven-theme .portal-table tbody tr:hover { background: rgb(103 183 255 / 6%); }
.haiven-theme :is(.portal-definition-list dt, .portal-activity-list time) { color: var(--haiven-color-text-muted); }
.haiven-theme .portal-definition-list dd { min-width: 0; overflow-wrap: anywhere; }
.haiven-theme :is(code, pre) { color: #c5e5ff; overflow-wrap: anywhere; }

.haiven-account {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: radial-gradient(ellipse at 15% 0, #0c2543 0, transparent 55%), var(--haiven-brand-canvas);
}
.haiven-account-header, .haiven-account-footer {
    width: min(1120px, calc(100% - 3rem));
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.haiven-account-header { padding-block: 1.75rem; border-bottom: 1px solid var(--haiven-brand-border); }
.haiven-account-brand img { display: block; width: 142px; height: auto; }
.haiven-account-header nav { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; }
.haiven-account-header a { text-decoration: none; }
.haiven-account-main { flex: 1; width: min(704px, calc(100% - 2rem)); margin: clamp(2rem, 7vh, 5rem) auto; }
.haiven-account-card { padding: clamp(1.5rem, 4vw, 3rem); }
.haiven-account-card h1 { margin-top: 0; font-size: clamp(1.8rem, 4vw, 2.5rem); }
.haiven-account-card p { line-height: 1.65; }
.haiven-account-card form { margin-top: 1.5rem; }
.haiven-account-card label { margin-bottom: .45rem; font-weight: 600; }
.haiven-account-card :is(pre, code) { white-space: pre-wrap; }
.haiven-account-footer { padding-block: 1.5rem; color: var(--haiven-brand-muted); font-size: .85rem; }
.haiven-skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 10000; padding: .7rem 1rem; color: #02060d; background: #95fff0; transform: translateY(-200%); }
.haiven-skip-link:focus { transform: translateY(0); color: #02060d; }

@media (max-width: 560px) {
    .haiven-account-header, .haiven-account-footer { width: calc(100% - 2rem); align-items: flex-start; }
    .haiven-account-header { flex-direction: column; gap: 1rem; }
    .haiven-account-header nav { gap: 1rem; font-size: .9rem; }
    .haiven-account-footer { flex-wrap: wrap; }
}