:root {
    /* Brand */
    --color-primary: #0d1b3d;
    --color-primary-hover: #132652;
    --color-primary-deep: #09142e;
    --color-gold: #c9a96b;
    --color-gold-soft: #f4ebd9;

    /* Surface */
    --color-bg: #f7f4ee;
    --color-bg-soft: #fbf8f2;
    --color-surface: rgba(255, 253, 249, 0.88);
    --color-surface-strong: rgba(255, 253, 249, 0.96);
    --color-surface-elevated: rgba(255, 255, 255, 0.76);

    /* Text & border */
    --color-border: rgba(215, 205, 188, 0.68);
    --color-border-strong: rgba(201, 186, 160, 0.92);
    --color-text: #1a1f2b;
    --color-text-secondary: #5f6675;
    --color-text-muted: #8a91a1;

    /* Feedback */
    --color-success: #6e9b78;
    --color-success-soft: rgba(110, 155, 120, 0.14);
    --color-warning: #c08a4b;
    --color-warning-soft: rgba(192, 138, 75, 0.14);
    --color-danger: #c56b5c;
    --color-danger-soft: rgba(197, 107, 92, 0.14);
    --color-occupied-bg: rgba(95, 102, 117, 0.12);
    --color-occupied-text: #667081;

    /* Shadow */
    --shadow-card-xs: 0 6px 18px rgba(13, 27, 61, 0.04);
    --shadow-card: 0 10px 30px rgba(13, 27, 61, 0.06);
    --shadow-card-hover: 0 16px 36px rgba(13, 27, 61, 0.08);
    --shadow-dialog: 0 18px 48px rgba(13, 27, 61, 0.10);

    /* Radius */
    --radius-button: 12px;
    --radius-input: 12px;
    --radius-badge: 999px;
    --radius-card: 20px;
    --radius-panel: 24px;
    --radius-dialog: 24px;

    /* Spacing */
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;

    /* Typography */
    --font-family-base: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-size-title: 32px;
    --font-size-heading: 22px;
    --font-size-card-title: 18px;
    --font-size-body: 14px;
    --font-size-caption: 13px;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-body: 1.6;

    /* Motion */
    --transition-base: 180ms ease;

    /* Compatibility aliases for existing styles */
    --bg: var(--color-bg);
    --bg-soft: var(--color-bg-soft);
    --bg-elevated: var(--color-surface-elevated);
    --panel: var(--color-surface);
    --panel-strong: var(--color-surface-strong);
    --line: var(--color-border);
    --line-strong: var(--color-border-strong);
    --text: var(--color-text);
    --text-soft: var(--color-text-secondary);
    --muted: var(--color-text-muted);
    --primary: var(--color-primary);
    --primary-strong: var(--color-primary-hover);
    --primary-soft: rgba(13, 27, 61, 0.08);
    --danger: var(--color-danger);
    --danger-soft: var(--color-danger-soft);
    --success: var(--color-success);
    --success-soft: var(--color-success-soft);
    --warning: var(--color-warning);
    --warning-soft: var(--color-warning-soft);
    --occupied-bg: var(--color-occupied-bg);
    --occupied-text: var(--color-occupied-text);
    --shadow-xs: var(--shadow-card-xs);
    --shadow-sm: var(--shadow-card);
    --shadow-md: var(--shadow-dialog);
    --radius-sm: var(--radius-button);
    --radius: var(--radius-card);
    --radius-lg: var(--radius-panel);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-family-base);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    color: var(--text);
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.9), transparent 30%),
        radial-gradient(circle at top right, rgba(244, 235, 217, 0.5), transparent 24%),
        linear-gradient(180deg, var(--color-bg-soft) 0%, var(--color-bg) 54%, #f2ede4 100%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
}

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

button,
a,
input,
select,
textarea {
    transition:
        border-color var(--transition-base),
        background-color var(--transition-base),
        color var(--transition-base),
        box-shadow var(--transition-base),
        opacity var(--transition-base),
        transform var(--transition-base);
}

input::placeholder,
textarea::placeholder {
    color: #9aa5b4;
}

dialog {
    color: inherit;
}