:root {
    color-scheme: light dark;

    /* Core tokens from mobile/bowshopbible/lib/app_theme.dart (light) */
    --color-primary: #ff9600;
    --color-on-primary: #000000;
    --color-primary-container: #ffddb3;
    --color-on-primary-container: #2c1600;

    --color-secondary: #8c4a00;
    --color-on-secondary: #ffffff;
    --color-secondary-container: #ffdcbe;
    --color-on-secondary-container: #2d1400;

    --color-tertiary: #a32222;
    --color-on-tertiary: #ffffff;

    --color-surface: #fffbf7;
    --color-on-surface: #201b17;
    --color-surface-container-highest: #f3e6d5;
    --color-on-surface-variant: #504339;

    --color-outline: #837466;
    --color-outline-variant: #d4c4b4;
    --color-error: #ba1a1a;

    /* Semantic tokens */
    --bg: var(--color-surface);
    --text: var(--color-on-surface);
    --text-muted: var(--color-on-surface-variant);
    --heading: var(--color-secondary);
    --border: var(--color-outline-variant);
    --link: var(--color-primary);
    --link-hover: #bc6200;
    --card: var(--color-surface-container-highest);
    --selection-bg: #ffd8a1;

    /* Typography and spacing */
    --font-body: "Roboto", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-heading: "Roboto", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

    --radius-sm: 8px;
    --radius-md: 12px;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Core tokens from mobile/bowshopbible/lib/app_theme.dart (dark) */
        --color-primary: #ff9600;
        --color-on-primary: #000000;
        --color-primary-container: #3d1e00;
        --color-on-primary-container: #ffddb3;

        --color-secondary: #ffad5c;
        --color-on-secondary: #3d1e00;
        --color-secondary-container: #5c2e00;
        --color-on-secondary-container: #ffdcbe;

        --color-tertiary: #e57373;
        --color-on-tertiary: #5a0000;

        --color-surface: #1a1714;
        --color-on-surface: #ede1d8;
        --color-surface-container-highest: #504339;
        --color-on-surface-variant: #d4c4b4;

        --color-outline: #9e8e80;
        --color-outline-variant: #504339;
        --color-error: #ffb4ab;

        --bg: var(--color-surface);
        --text: var(--color-on-surface);
        --text-muted: var(--color-on-surface-variant);
        --heading: var(--color-primary);
        --border: var(--color-outline-variant);
        --link: var(--color-secondary);
        --link-hover: #ffd1a1;
        --card: var(--color-secondary-container);
        --selection-bg: #5c2e00;
    }
}

/* Base and reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--selection-bg);
    color: var(--text);
}

/* Layout wrappers */
main,
.container-fluid,
.content-container {
    width: min(100%, 76ch);
    margin-inline: auto;
    padding-inline: var(--space-4);
    padding-top: var(--space-5);
    padding-bottom: var(--space-6);
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: var(--space-3);
    font-family: var(--font-heading);
    line-height: 1.25;
    color: var(--heading);
}

h1 {
    font-size: clamp(1.9rem, 5.2vw, 2.6rem);
}

h2 {
    margin-top: var(--space-5);
    font-size: clamp(1.35rem, 4.4vw, 1.85rem);
    border-bottom: 1px solid var(--border);
    padding-bottom: var(--space-2);
}

h3 {
    margin-top: var(--space-4);
    font-size: clamp(1.15rem, 3.6vw, 1.4rem);
    color: var(--text);
}

h4,
h5,
h6 {
    margin-top: var(--space-4);
    color: var(--text-muted);
}

/* Text content */
p,
ul,
ol,
dl,
blockquote,
pre,
table,
figure {
    margin-top: 0;
    margin-bottom: var(--space-4);
}

p,
li,
dd,
dt,
figcaption,
th,
td {
    overflow-wrap: break-word;
}

ul,
ol {
    padding-left: 1.4rem;
}

li + li {
    margin-top: var(--space-2);
}

strong,
b {
    color: var(--text);
}

small {
    color: var(--text-muted);
}

/* Links */
a {
    color: var(--link);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.15em;
    transition: color 0.2s ease;
}

a:hover,
a:focus-visible {
    color: var(--link-hover);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Media and responsive image handling */
img,
video,
canvas,
svg,
iframe {
    display: block;
    max-width: 100%;
}

img,
.img-fluid {
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

figure {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

figcaption {
    margin-top: var(--space-2);
    color: var(--text-muted);
    font-size: 0.94rem;
}

/* Rules and quotes */
hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin-block: var(--space-5);
}

blockquote {
    margin-left: 0;
    padding: var(--space-3) var(--space-4);
    border-left: 4px solid var(--color-primary);
    background: var(--card);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
}

/* Code and preformatted text */
code,
kbd,
samp {
    font-family: var(--font-mono);
    font-size: 0.92em;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.1em 0.35em;
}

pre {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    overflow-x: auto;
}

pre code {
    border: 0;
    background: transparent;
    padding: 0;
}

/* Tables */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

thead th {
    background: var(--card);
}

th,
td {
    padding: var(--space-3);
    text-align: left;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

tr:last-child td {
    border-bottom: 0;
}

th:last-child,
td:last-child {
    border-right: 0;
}

/* Forms and controls for future pages */
label {
    display: inline-block;
    margin-bottom: var(--space-2);
    font-weight: 600;
}

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

input,
select,
textarea {
    width: 100%;
    max-width: 100%;
    padding: 0.65rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-outline);
    background: var(--bg);
    color: var(--text);
}

button,
.button,
a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.9rem;
    background: var(--color-primary);
    color: var(--color-on-primary);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
}

button:hover,
.button:hover,
a.button:hover {
    filter: brightness(0.95);
}

/* Callouts for future detail docs */
.note,
.warning,
.tip {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    margin-bottom: var(--space-4);
}

.note,
.tip {
    background: var(--card);
}

.warning {
    background: color-mix(in srgb, var(--color-tertiary) 18%, var(--bg));
    border-color: color-mix(in srgb, var(--color-tertiary) 38%, var(--border));
}

/* Utility spacing classes */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }

/* Mobile-first refinements */
@media (max-width: 640px) {
    main,
    .container-fluid,
    .content-container {
        width: 100%;
        padding-inline: var(--space-3);
        padding-top: var(--space-4);
        padding-bottom: var(--space-5);
    }

    p,
    li,
    td,
    th {
        font-size: 0.98rem;
    }

    h1 {
        letter-spacing: -0.01em;
    }
}