:root {
    --background: #ffffff;
    --foreground: #161823;
    --card: #ffffff;
    --card-foreground: #161823;
    --popover: #ffffff;
    --popover-foreground: #161823;

    --primary: #fe2c55;
    --primary-foreground: #ffffff;
    --primary-hover: #e61e45;
    --secondary: #f2f2f4;
    --secondary-foreground: #313340;
    --muted: #f2f2f4;
    --muted-foreground: #5d5f6b;
    --accent: #ffe9ee;
    --accent-foreground: #990c2b;
    --destructive: #e5484d;
    --destructive-foreground: #ffffff;
    --success: #10b981;
    --warning: #b7791f;
    --border: #e8e8ec;
    --input: #dcdce2;
    --ring: #fe2c55;

    --brand-cyan: #0fb3ae;
    --brand-cyan-soft: #e3fefd;

    --surface-warm: #fafafb;
    --surface-warm-2: #f2f2f4;

    --chart-1: #fe2c55;
    --chart-2: #ff6485;
    --chart-3: #25f4ee;
    --chart-4: #0fb3ae;
    --chart-5: #313340;

    --sidebar: #fafafb;
    --sidebar-foreground: #161823;
    --sidebar-primary: #fe2c55;
    --sidebar-primary-foreground: #ffffff;
    --sidebar-accent: #ffe9ee;
    --sidebar-accent-foreground: #990c2b;
    --sidebar-border: #e8e8ec;
    --sidebar-ring: #fe2c55;

    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Noto Sans", sans-serif;
    --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
    --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", "Songti TC", serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

    --radius: 0.875rem;
    --radius-sm: 0.5rem;
    --radius-xs: 0.375rem;
    --radius-pill: 999px;

    --shadow-color: 22 24 35;
    --shadow-xs: 0 1px 0 0 rgb(var(--shadow-color) / 0.02);
    --shadow-sm: 0 1px 0 0 rgb(var(--shadow-color) / 0.03), 0 1px 2px -1px rgb(var(--shadow-color) / 0.04);
    --shadow: 0 1px 0 0 rgb(var(--shadow-color) / 0.03), 0 2px 4px -1px rgb(var(--shadow-color) / 0.05);
    --shadow-md: 0 1px 0 0 rgb(var(--shadow-color) / 0.04), 0 6px 14px -4px rgb(var(--shadow-color) / 0.08);
    --shadow-lg: 0 1px 0 0 rgb(var(--shadow-color) / 0.05), 0 14px 32px -8px rgb(var(--shadow-color) / 0.12);

    --tracking-tight: -0.02em;
    --tracking-normal: 0em;
    --tracking-kicker: 0.14em;
    --spacing: 0.24rem;

    --container: 1120px;
    --container-narrow: 760px;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

.dark {
    --background: #0b0b10;
    --foreground: #f5f5f7;
    --card: #161823;
    --card-foreground: #f5f5f7;
    --popover: #1c1e2a;
    --popover-foreground: #f5f5f7;

    --primary: #fe2c55;
    --primary-foreground: #ffffff;
    --primary-hover: #ff6485;
    --secondary: #232533;
    --secondary-foreground: #e8e8ec;
    --muted: #1b1d29;
    --muted-foreground: #aeb2c0;
    --accent: #3d0210;
    --accent-foreground: #ffa0b5;
    --destructive: #ff6485;
    --destructive-foreground: #161823;
    --success: #34d399;
    --warning: #e0b450;
    --border: #2a2c3a;
    --input: #313340;
    --ring: #fe2c55;

    --brand-cyan: #25f4ee;
    --brand-cyan-soft: #054745;

    --surface-warm: #131420;
    --surface-warm-2: #0f1018;

    --chart-1: #fe2c55;
    --chart-2: #ff6485;
    --chart-3: #25f4ee;
    --chart-4: #14d6d0;
    --chart-5: #aeb2c0;

    --sidebar: #131420;
    --sidebar-foreground: #f5f5f7;
    --sidebar-primary: #fe2c55;
    --sidebar-primary-foreground: #ffffff;
    --sidebar-accent: #3d0210;
    --sidebar-accent-foreground: #ffa0b5;
    --sidebar-border: #2a2c3a;
    --sidebar-ring: #fe2c55;

    --shadow-color: 0 0 0;
    --shadow-xs: 0 1px 0 0 rgb(0 0 0 / 0.3);
    --shadow-sm: 0 1px 0 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.4);
    --shadow: 0 1px 0 0 rgb(0 0 0 / 0.3), 0 2px 4px -1px rgb(0 0 0 / 0.4);
    --shadow-md: 0 1px 0 0 rgb(0 0 0 / 0.35), 0 6px 14px -4px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 1px 0 0 rgb(0 0 0 / 0.4), 0 14px 32px -8px rgb(0 0 0 / 0.6);
}

.skip-link {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-120%);
    z-index: 1000;
    margin: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--primary);
    color: var(--primary-foreground);
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transition: transform 0.18s ease;
}

.skip-link:focus {
    transform: translateY(0);
    outline: 2px solid var(--primary-foreground);
    outline-offset: 2px;
}