/* =================================
   STRIPE GLOBAL THEME SYSTEM
================================= */

:root {
    color-scheme: light;

    --bg: #f3f6fa;
    --surface: #ffffff;
    --surface-secondary: #f8fafc;

    --text: #172033;
    --text-secondary: #667085;

    --border: #e4e9f0;

    --primary: #168BFA;
    --primary-light: #e8f3ff;

    --hover: #f0f4f8;

    --input-bg: #ffffff;

    --shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* DARK MODE */

html.dark-mode {
    color-scheme: dark;

    --bg: #101722;
    --surface: #182332;
    --surface-secondary: #202e40;

    --text: #f1f5f9;
    --text-secondary: #a5b2c3;

    --border: #304054;

    --primary: #168BFA;
    --primary-light: #183858;

    --hover: #26364a;

    --input-bg: #202e40;

    --shadow: 0 2px 12px rgba(0,0,0,0.25);
}

/* PAGE BACKGROUND */

html,
body {
    background-color: var(--bg);
    color: var(--text);
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* COMMON CONTAINERS */

header,
footer,
aside,
main,
section,
article,
nav,
.side-card,
.create-post-card,
.story-card,
.posts-feed,
.comment-modal-box {
    color: var(--text);
}

/* CARDS AND PANELS */

.side-card,
.create-post-card,
.story-card,
.post-card,
.comment-modal-box,
.settings-card,
.profile-card,
.friend-card,
.message-card {
    background-color: var(--surface);
    border-color: var(--border);
}

/* HEADINGS AND TEXT */

h1, h2, h3, h4, h5, h6,
strong,
label {
    color: var(--text);
}

p,
small,
.text-secondary {
    color: var(--text-secondary);
}

/* INPUTS */

input,
textarea,
select {
    background-color: var(--input-bg);
    color: var(--text);
    border-color: var(--border);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-secondary);
}

/* LINKS */

a {
    color: inherit;
}

/* BUTTONS */

button {
    color: var(--text);
}

/* NAVIGATION */

.top-header,
.left-sidebar,
.right-sidebar,
.mobile-bottom-nav {
    background-color: var(--surface);
    border-color: var(--border);
}

/* HOVER */

.sidebar-links a:hover,
.header-actions a:hover,
.mobile-bottom-nav a:hover {
    background-color: var(--hover);
}

/* DIVIDERS */

.sidebar-divider {
    border-color: var(--border);
}

/* MODALS */

.comment-modal,
.modal {
    color: var(--text);
}

.comment-modal-box,
.modal-content {
    background-color: var(--surface);
}

/* SETTINGS */

.settings-section,
.settings-card {
    background-color: var(--surface);
    color: var(--text);
}

/* SMOOTH TRANSITION */

body,
header,
aside,
main,
section,
nav,
article,
button,
input,
textarea,
select {
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}