@import url('/assets/css/main.css');

html {
    --usn-day-bg: #e9f4ff;
    --usn-night-bg: #0b2f57;

    --usn-day-text: #0a2f55;
    --usn-night-text: #bfe3ff;

    --usn-page-bg: var(--usn-day-bg);
    --usn-page-text: #0a2f55;
    --usn-muted-text: rgba(10, 47, 85, 0.65);
    --usn-card-bg: #ffffff;
    --usn-card-border: rgba(10, 47, 85, 0.14);
    --usn-control-bg: #ffffff;
    --usn-control-border: rgba(10, 47, 85, 0.22);
    --usn-nav-bg: rgba(255, 255, 255, 0.92);
    --usn-nav-border: rgba(10, 47, 85, 0.18);
    --usn-nav-link: rgba(10, 47, 85, 0.92);
    --usn-nav-link-hover: #0a2f55;

    --usn-panel-bg: #0b2f57;
    --usn-panel-text: #ffffff;
    --usn-panel-muted: rgba(255,255,255,0.74);

    --usn-accent: #1c6fb2;
    --usn-highlight: #d7b24b;
}

body {
    --page-bg: var(--usn-page-bg);
    --page-text: var(--usn-page-text);
    --muted-text: var(--usn-muted-text);
    --card-bg: var(--usn-card-bg);
    --card-border: var(--usn-card-border);
    --control-bg: var(--usn-control-bg);
    --control-border: var(--usn-control-border);
    --nav-bg: var(--usn-nav-bg);
    --nav-border: var(--usn-nav-border);
    --nav-link: var(--usn-nav-link);
    --nav-link-hover: var(--usn-nav-link-hover);

    --panel-bg: var(--usn-panel-bg);
    --panel-text: var(--usn-panel-text);
    --panel-muted: var(--usn-panel-muted);
}

body[data-view="login"],
body[data-view="signup"],
body[data-view="about"],
body[data-view="homepage"] {
    --bg: var(--usn-page-bg);
    --text: var(--usn-page-text);
    --muted: rgba(10, 47, 85, 0.62);
    --card: #ffffff;
    --accent: var(--usn-accent);
}

body[data-view="media_feed"],
body[data-view="favourites"] {
    --page-bg: var(--usn-page-bg);
    --page-text: var(--usn-page-text);
    --muted-text: var(--usn-muted-text);
    --card-bg: var(--usn-card-bg);
    --card-border: var(--usn-card-border);
    --control-bg: var(--usn-control-bg);
    --control-border: var(--usn-control-border);
    --nav-bg: var(--usn-nav-bg);
    --nav-border: var(--usn-nav-border);
    --nav-link: var(--usn-nav-link);
    --nav-link-hover: var(--usn-nav-link-hover);
}

html[data-theme="light"] body[data-view="media_feed"],
html[data-theme="light"] body[data-view="favourites"] {
    --page-bg: var(--usn-page-bg);
    --page-text: var(--usn-page-text);
    --muted-text: var(--usn-muted-text);
    --card-bg: var(--usn-card-bg);
    --card-border: var(--usn-card-border);
    --control-bg: var(--usn-control-bg);
    --control-border: var(--usn-control-border);
    --nav-bg: var(--usn-nav-bg);
    --nav-border: var(--usn-nav-border);
    --nav-link: var(--usn-nav-link);
    --nav-link-hover: var(--usn-nav-link-hover);
}

html[data-theme="light"] body {
    --page-bg: var(--usn-day-bg);
    --page-text: var(--usn-day-text);
}

html[data-theme="light"] body[data-view="login"],
html[data-theme="light"] body[data-view="signup"],
html[data-theme="light"] body[data-view="about"],
html[data-theme="light"] body[data-view="homepage"] {
    --bg: var(--usn-day-bg);
    --text: var(--usn-day-text);
    --muted: rgba(10, 47, 85, 0.62);
}

html[data-theme="dark"] body {
    --page-bg: var(--usn-night-bg);
    --page-text: var(--usn-night-text);
    --muted-text: rgba(191, 227, 255, 0.72);
    --card-bg: rgba(255, 255, 255, 0.08);
    --card-border: rgba(191, 227, 255, 0.18);
    --control-bg: rgba(255, 255, 255, 0.10);
    --control-border: rgba(191, 227, 255, 0.24);
    --nav-bg: rgba(11, 47, 87, 0.92);
    --nav-border: rgba(191, 227, 255, 0.16);
    --nav-link: rgba(191, 227, 255, 0.92);
    --nav-link-hover: #ffffff;
    --panel-bg: var(--usn-night-bg);
    --panel-text: var(--usn-night-text);
    --panel-muted: rgba(191, 227, 255, 0.74);
}

html[data-theme="dark"] body[data-view="login"],
html[data-theme="dark"] body[data-view="signup"],
html[data-theme="dark"] body[data-view="about"],
html[data-theme="dark"] body[data-view="homepage"] {
    --bg: var(--usn-night-bg);
    --text: var(--usn-night-text);
    --muted: rgba(191, 227, 255, 0.72);
    --card: rgba(255, 255, 255, 0.08);
    --accent: var(--usn-accent);
}

.navbar {
    border-bottom-color: var(--usn-panel-bg) !important;
}

a,
.btn-link {
    color: var(--usn-accent);
}

a:hover {
    color: #145a92;
}

.btn-primary {
    background-color: var(--usn-accent);
    border-color: var(--usn-accent);
    color: #ffffff;
}

.btn-primary:hover {
    background-color: #145a92;
    border-color: #145a92;
    color: #ffffff;
}