:root {
    --color-bg: #f5f0e8;
    --color-surface: #fffdf9;
    --color-surface-muted: #eee7dc;
    --color-surface-dark: #24211e;
    --color-media: #eee7dc;
    --color-text: #24211e;
    --color-text-muted: #645e57;
    --color-text-on-dark: #fffdf9;
    --color-border-strong: #a79b8e;
    --color-accent: #a34332;
    --color-accent-hover: #7f3023;
    --color-accent-on: #fffdf9;
    --color-border: #d5ccc0;
    --color-focus: #1e5f85;

    --color-fit-confirmed: #246246;
    --color-fit-confirmed-surface: #f0f5ef;
    --color-fit-conditional: #815d13;
    --color-fit-conditional-surface: #f7f2e6;
    --color-fit-verification: #975025;
    --color-fit-verification-surface: #f7ede7;
    --color-fit-not-compatible: #9e3030;
    --color-fit-not-compatible-surface: #f6eded;
    --color-fit-unknown: #59636b;
    --color-fit-unknown-surface: #eff1f1;

    --type-sans: "Noto Sans Thai", "Noto Sans", Tahoma, system-ui, sans-serif;
    --type-serif: Georgia, "Times New Roman", serif;
    --type-size-1: 0.875rem;
    --type-size-2: 1rem;
    --type-size-3: 1.25rem;
    --type-size-4: clamp(1.65rem, 3.5vw, 2.5rem);
    --type-size-display: clamp(2.25rem, 5vw, 4.25rem);
    --type-size-display-mobile: clamp(2rem, 4.5vw, 3.75rem);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;
    --space-9: 4rem;
    --space-10: 5rem;
    --space-11: 6rem;
    --gutter: 20px;
    --container-content: 1200px;
    --container-reading: 720px;
    --radius-none: 0;
    --radius-subtle: 0.125rem;
    --radius-control: 0.25rem;
    --radius-status: 0.5rem;
    --border-width-default: 1px;
    --border-width-strong: 1px;
    --border-width-accent: 2px;
    --shadow-subtle: 0 0.5rem 1.5rem rgb(36 33 30 / 8%);
    --button-min-height: 44px;
}