/* ============================================================
       CYBERCORE CSS — Embedded Personal Portfolio Theme
       Based on: https://github.com/sebyx07/cybercore-css
       Primary accent color: #E31036 (Red)
       ============================================================ */

    /* 本地赛博字体（替代部分 Google Fonts，离线可用） */
    @font-face {
      font-family: "Cyberspace";
      src: url("assets/font/cyberspace.ttf") format("truetype");
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

    @layer theme {
      :root {
        /* Colors */
        --cyber-cyan-300: #87eaf2;
        --cyber-cyan-400: #54d1db;
        --cyber-red-500: #E31036;
        --cyber-red-600: #b80d2b;
        --cyber-red-700: #8a0a21;
        --cyber-magenta-500: #ff2a6d;
        --cyber-magenta-700: #b31248;
        --cyber-yellow-500: #fcee0a;
        --cyber-yellow-700: #aca406;
        --cyber-green-400: #43ff83;
        --cyber-green-500: #05ffa1;
        --cyber-green-700: #03a969;
        --cyber-green-900: #015331;
        --cyber-void-100: #2a2d3a;
        --cyber-void-200: #1f2230;
        --cyber-void-300: #181a25;
        --cyber-void-400: #12141d;
        --cyber-void-500: #0d0e14;
        --cyber-void-700: #07080c;
        --cyber-void-800: #040508;
        --cyber-void-900: #010204;
        --cyber-chrome-100: #f0f1f5;
        --cyber-chrome-200: #d1d4de;
        --cyber-chrome-300: #b2b7c7;
        --cyber-chrome-400: #939ab0;
        --cyber-chrome-500: #747d99;
        --cyber-chrome-600: #5c647a;

        /* Semantic */
        --color-bg-primary: var(--cyber-void-500);
        --color-bg-secondary: var(--cyber-void-400);
        --color-bg-tertiary: var(--cyber-void-300);
        --color-bg-elevated: var(--cyber-void-200);
        --color-text-primary: var(--cyber-chrome-100);
        --color-text-secondary: var(--cyber-chrome-300);
        --color-text-muted: var(--cyber-chrome-500);
        --color-border-default: var(--cyber-red-700);

        /* Glows — red as primary accent */
        --glow-cyan: 0 0 20px var(--cyber-red-500), 0 0 40px color-mix(in srgb, var(--cyber-red-500) 50%, transparent), 0 0 80px color-mix(in srgb, var(--cyber-red-500) 25%, transparent);
        --glow-magenta: 0 0 20px var(--cyber-magenta-500), 0 0 40px color-mix(in srgb, var(--cyber-magenta-500) 50%, transparent);
        --glow-yellow: 0 0 20px var(--cyber-yellow-500), 0 0 40px color-mix(in srgb, var(--cyber-yellow-500) 50%, transparent);
        --glow-green: 0 0 20px var(--cyber-green-500), 0 0 40px color-mix(in srgb, var(--cyber-green-500) 50%, transparent);
        --glow-text-cyan: 0 0 10px var(--cyber-red-500), 0 0 20px color-mix(in srgb, var(--cyber-red-500) 60%, transparent);

        /* Typography — Black Ops One for heavy cyberpunk feel; ZCOOL QingKe HuangYou provides Chinese glyphs */
        --font-display: "Cyberspace", "Black Ops One", "Orbitron", "ZCOOL QingKe HuangYou", system-ui, sans-serif;
        --font-body: "Rajdhani", "ZCOOL QingKe HuangYou", "Noto Sans SC", system-ui, sans-serif;
        --font-mono: "Share Tech Mono", "ZCOOL QingKe HuangYou", "Noto Sans SC", monospace;

        /* Type Scale */
        --text-xs: clamp(0.64rem, 0.59rem + 0.24vw, 0.75rem);
        --text-sm: clamp(0.8rem, 0.74rem + 0.32vw, 0.94rem);
        --text-base: clamp(1rem, 0.93rem + 0.37vw, 1.18rem);
        --text-lg: clamp(1.25rem, 1.16rem + 0.47vw, 1.47rem);
        --text-xl: clamp(1.56rem, 1.45rem + 0.59vw, 1.84rem);
        --text-2xl: clamp(1.95rem, 1.81rem + 0.74vw, 2.3rem);
        --text-3xl: clamp(2.44rem, 2.26rem + 0.92vw, 2.87rem);
        --text-4xl: clamp(3.05rem, 2.83rem + 1.15vw, 3.58rem);
        --text-5xl: clamp(3.81rem, 3.54rem + 1.44vw, 4.48rem);

        /* Spacing */
        --space-3xs: clamp(0.25rem, 0.23rem + 0.09vw, 0.31rem);
        --space-2xs: clamp(0.5rem, 0.46rem + 0.18vw, 0.63rem);
        --space-xs: clamp(0.75rem, 0.7rem + 0.28vw, 0.94rem);
        --space-sm: clamp(1rem, 0.93rem + 0.37vw, 1.25rem);
        --space-md: clamp(1.5rem, 1.39rem + 0.56vw, 1.88rem);
        --space-lg: clamp(2rem, 1.86rem + 0.74vw, 2.5rem);
        --space-xl: clamp(3rem, 2.78rem + 1.11vw, 3.75rem);
        --space-2xl: clamp(4rem, 3.71rem + 1.48vw, 5rem);
        --space-3xl: clamp(6rem, 5.57rem + 2.22vw, 7.5rem);

        /* Borders */
        --radius-sm: 2px;
        --radius-md: 4px;
        --radius-lg: 8px;
        --radius-cyber: 0 12px 0 12px;
        --border-thin: 1px;
        --border-medium: 2px;
        --border-thick: 3px;

        /* Animation */
        --ease-cyber: cubic-bezier(0.77, 0, 0.175, 1);
        --duration-fast: 150ms;
        --duration-normal: 300ms;
        --transition-fast: var(--duration-fast) ease;
        --transition-base: var(--duration-normal) ease;

        /* Effects */
        --noise-opacity: 0.03;
        --scanline-opacity: 0.04;
      }
    }