/* Ride-n-Read catalog — shared theme (CSS custom properties) */
:root {
    --bg-color-1: #d4c9b0;
    --bg-color-2: #ede5cf;
    --bg-color-3: #2e2e2e;

    --fg-color-1: #1a1a1a;
    --fg-color-2: #4a3f2f;
    --fg-color-inverse: #ffffff;

    --bg-color-input-1: #ffffff;
    --border-color-input-1: #2e2e2e;

    --border-color-1: #b0a48a;
    --border-color-2: #2e2e2e;
    --border-color-divider-1: #c4b89a;
    --border-color-accent-1: #1a5fb4;

    --btn-1-bg: #1a5fb4;
    --btn-1-hover: #0d3d7a;
}

html, body {
    height: 100%;
}

body {
    background-color: var(--bg-color-1);
    color: var(--fg-color-1);
}

a {
    color: var(--btn-1-bg);
}
a:hover {
    color: var(--btn-1-hover);
}

.rnr-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.rnr-panel {
    background: var(--bg-color-2);
    border: 1px solid var(--border-color-1);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.rnr-panel-pad {
    padding: 18px 20px;
}

.rnr-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 6px;
    border: 1px solid var(--border-color-2);
    background: var(--btn-1-bg);
    color: var(--fg-color-inverse);
    text-decoration: none;
    cursor: pointer;
}
.rnr-btn:visited {
    color: var(--fg-color-inverse);
}
.rnr-btn:hover {
    background: var(--btn-1-hover);
    color: var(--fg-color-inverse);
}

.rnr-input {
    background: var(--bg-color-input-1);
    border: 1px solid var(--border-color-input-1);
    border-radius: 6px;
    padding: 10px;
    box-sizing: border-box;
}