:root {
    /* Font Families */
    --font-body: "Inconsolata", Consolas, sans-serif;
    --font-header: "Atkinson Hyperlegible Mono", Consolas, sans-serif;
    --font-cjk: "Source Han Mono", "Meiryo UI", "Malgun Gothic", serif;

    /* Font Sizes */
    --fs-body: 14px;
    --fs-h3: 18px;
    --fs-h2: 22px;
    --fs-h1: 28px;
    --fs-ui: 13px;
    --fs-button: 14px;
    --fs-tag: 12px;

    /* Line Heights */
    --lh-body: 1.4;
    --lh-header: 1.2;

    /* Font Weights */
    --fw-body: 400;
    --fw-body-cjk: 300;
    --fw-header: 700;
    --fw-header-cjk: 600;
    --fw-ui: 500;
    --fw-button: 600;
    --fw-tag: 500;
    }

    /* Base Body */
    body {
    font-family: var(--font-body), var(--font-cjk);
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: var(--fw-body);
    }

    /* Override CJK weight */
    body .cjk-font {
    font-family: var(--font-cjk);
    font-weight: var(--fw-body-cjk);
    }

    /* Headings */
    h1, h2, h3 {
    font-family: var(--font-header), var(--font-cjk);
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-weight: var(--fw-header);
    line-height: var(--lh-header);
    margin: 1.2em 0 0.5em;
    }

    h1 { font-size: var(--fs-h1); }
    h2 { font-size: var(--fs-h2); }
    h3 { font-size: var(--fs-h3); }

    h1 .cjk-font,
    h2 .cjk-font,
    h3 .cjk-font {
    font-family: var(--font-cjk);
    font-weight: var(--fw-header-cjk);
    }

    /* Inline headers (use in body copy or cards) */
    .inline-header {
    font-size: var(--fs-h3);
    font-weight: var(--fw-header);
    line-height: var(--lh-header);
    font-family: var(--font-header), var(--font-cjk);
    }

    /* Navigation Menu Items */
    .nav-menu,
    .nav-menu a {
    font-size: var(--fs-ui);
    font-weight: var(--fw-ui);
    font-family: var(--font-body), var(--font-cjk);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    }

    /* Primary Buttons */
    button,
    .button {
    font-size: var(--fs-button);
    font-weight: var(--fw-button);
    font-family: var(--font-body), var(--font-cjk);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.5em 1em;
    border: none;
    cursor: pointer;
    }

    /* Tag-like buttons / pill labels */
    .tag-button {
    font-size: var(--fs-tag);
    font-weight: var(--fw-tag);
    font-family: var(--font-body), var(--font-cjk);
    text-transform: uppercase;
    border-radius: 999px;
    padding: 0.25em 0.75em;
    background-color: #e0e0e0;
    color: #222;
    }