/*
 * Cyber Crayon v3 — Brutalist design tokens (DESIGN.md)
 */

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque-latin.woff2") format("woff2");
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque-latin-ext.woff2") format("woff2");
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Material Symbols Outlined";
  src: url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  /* M3 Surface */
  --lc-background: #FAFAFA;
  --lc-surface: #FFFFFF;
  --lc-surface-dim: #E9E9EB;
  --lc-surface-bright: #f8f9fa;
  --lc-surface-container-lowest: #ffffff;
  --lc-surface-container-low: #F4F4F5;
  --lc-surface-container: #EEEEF0;
  --lc-surface-container-high: #E4E4E7;
  --lc-surface-container-highest: #e1e3e4;
  --lc-surface-variant: #e1e3e4;
  --lc-surface-raised: #f3f4f5;
  --lc-surface-panel: #ffffff;
  --lc-surface-panel-aside: #f3f4f5;

  /* On-surface */
  --lc-on-background: #09090B;
  --lc-on-surface: #09090B;
  --lc-on-surface-variant: #52525B;
  --lc-text-primary: #09090B;
  --lc-text-secondary: #52525B;
  --lc-inverse-surface: #2e3132;
  --lc-inverse-on-surface: #f0f1f2;

  /* Brand / Neon Spray */
  --lc-primary: #7C3AED;
  --lc-primary-dark: #5a00c6;
  --lc-primary-soft: #A78BFA;
  --lc-primary-glow: rgba(124, 58, 237, 0.14);
  --lc-on-primary: #ffffff;
  --lc-primary-container: #7c3aed;
  --lc-on-primary-container: #ede0ff;
  --lc-electric-purple: #7C3AED;
  --lc-secondary: #274dd6;
  --lc-on-secondary: #ffffff;
  --lc-secondary-container: #4668f0;
  --lc-on-secondary-container: #fffbff;
  --lc-spray-can-blue: #4A6CF4;
  --lc-tertiary: #980f55;
  --lc-on-tertiary: #ffffff;
  --lc-tertiary-container: #b92e6e;
  --lc-on-tertiary-container: #ffdde6;
  --lc-cyber-lime: #CCFF00;
  --lc-cyber-lime-on-surface: color-mix(in srgb, var(--lc-cyber-lime) 86%, var(--lc-on-surface));
  --lc-neon-pink: #EA5694;
  --lc-ink-black: #0D0D0D;
  --lc-brutal-border-color: var(--lc-border-divider);

  /* Outline / Error */
  --lc-outline: #7b7487;
  --lc-outline-variant: #E4E4E7;
  --lc-border-divider: #E4E4E7;
  --lc-error: #ba1a1a;
  --lc-on-error: #ffffff;
  --lc-error-container: #ffdad6;
  --lc-on-error-container: #93000a;

  /* Fixed / semantic aliases */
  --lc-primary-fixed: #eaddff;
  --lc-primary-fixed-dim: #d2bbff;
  --lc-inverse-primary: #d2bbff;
  --lc-neutral: #52525B;
  --lc-meta: #52525B;
  --lc-accent: var(--lc-cyber-lime);
  --lc-chip-bg: rgba(204, 255, 0, 0.15);
  --lc-chip-on-neon: #0D0D0D;

  /* Status */
  --lc-status-running: #16a34a;
  --lc-status-developing: #ea580c;
  --lc-status-paused: #64748b;

  /* GitHub heatmap — light (github.com contribution graph) */
  --lc-github-cell-l0: #ebedf0;
  --lc-github-cell-l1: #9be9a8;
  --lc-github-cell-l2: #40c463;
  --lc-github-cell-l3: #30a14e;
  --lc-github-cell-l4: #216e39;

  /* Typography — body/prose: sans + CJK; code/meta: JetBrains Mono */
  --lc-font-display: "Bricolage Grotesque", "PingFang SC", "Microsoft YaHei UI", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
  --lc-font-body: "PingFang SC", "Microsoft YaHei UI", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
  --lc-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --lc-font-heading: var(--lc-font-display);
  --lc-font-prose: var(--lc-font-body);
  --lc-font-caption: var(--lc-font-mono);
  --lc-font-ui: var(--lc-font-body);

  --lc-text-display-lg: clamp(2.5rem, 6vw, 4.5rem);
  --lc-text-headline-lg: clamp(2rem, 4vw, 3rem);
  --lc-text-headline-md: clamp(1.5rem, 3vw, 2rem);
  --lc-text-headline-sm: 1.25rem;
  --lc-text-body-lg: 1.125rem;
  --lc-text-body-md: 1rem;
  --lc-text-label-md: 0.875rem;
  --lc-text-caption: 0.8125rem;
  --lc-text-caption-sm: 0.6875rem;

  /* Layout */
  --lc-max: 1200px;
  --lc-gutter: 24px;
  --lc-margin-mobile: 16px;
  --lc-section-gap: clamp(64px, 8vw, 128px);

  /* Custom cursor — cyber-lime dot (default browsing) */
  --lc-cursor-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='6' fill='%23CCFF00' stroke='%230D0D0D' stroke-width='2'/%3E%3C/svg%3E") 16 16, auto;
  --lc-cursor-text: text;
  --lc-space: clamp(16px, 3vw, 48px);
  --lc-navbar-h: 64px;
  --lc-navbar-padding: 16px;
  --lc-aside-w: 260px;
  --lc-aside-max: min(26vw, 280px);

  /* Radius */
  --lc-radius-sm: 0.125rem;
  --lc-radius: 0.25rem;
  --lc-radius-md: 0.375rem;
  --lc-radius-lg: 0.5rem;
  --lc-radius-xl: 0.75rem;
  --lc-radius-full: 9999px;

  /* v4 — 圆角与柔和阴影（替换 hard-shadow / border-brutal） */
  --lc-radius-card: 12px;
  --lc-radius-element: 8px;
  --lc-radius-pill: 9999px;
  --lc-shadow-card: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px rgb(0 0 0 / 0.06);
  --lc-shadow-card-hover: 0 2px 4px rgb(0 0 0 / 0.05), 0 16px 40px rgb(0 0 0 / 0.10);
  --lc-shadow-soft: 0 1px 3px rgb(0 0 0 / 0.04);

  /* Terminal (single-post code blocks) */
  --lc-terminal-bg: #0d0d0d;
  --lc-terminal-header: #0d0d0d;
  --lc-terminal-text: var(--lc-cyber-lime);
  --lc-terminal-title: rgba(255, 255, 255, 0.45);
  --lc-terminal-dot-red: #ff5f57;
  --lc-terminal-dot-yellow: #febc2e;
  --lc-terminal-dot-green: #28c840;

  /* Nav glass */
  --lc-nav-bg: rgba(248, 249, 250, 0.85);
  --lc-nav-border: var(--lc-ink-black);

  /* Background texture — swap file in assets/images/textures/ */
  /* cream-paper: clean paper (default) | paper-grain: fine fiber | concrete-wall: gritty wall */
  --lc-bg-texture: url("../images/textures/cream-paper.png");
  --lc-bg-texture-opacity: 0.5;

  /* Transitions */
  --lc-transition: 0.2s ease;

  /* Terminal (single post code blocks) */
  --lc-terminal-bg: #0d0d0d;
  --lc-terminal-header: #0d0d0d;
  --lc-terminal-text: #c8f135;
  --lc-terminal-title: rgba(255, 255, 255, 0.45);
  --lc-terminal-border: rgba(255, 255, 255, 0.08);
}

html[data-lc-color-scheme="dark"] {
  --lc-background: #111113;
  --lc-surface: #1A1A1E;
  --lc-surface-dim: #303036;
  --lc-surface-bright: #1e1e22;
  --lc-surface-container-lowest: #0d0d0f;
  --lc-surface-container-low: #1C1C1F;
  --lc-surface-container: #242428;
  --lc-surface-container-high: #2A2A2E;
  --lc-surface-container-highest: #2a2a2e;
  --lc-surface-variant: #2a2a2e;
  --lc-surface-raised: #1c1c1f;
  --lc-surface-panel: #161618;
  --lc-surface-panel-aside: #1c1c1f;

  --lc-on-background: #F4F4F5;
  --lc-on-surface: #F4F4F5;
  --lc-on-surface-variant: #A1A1AA;
  --lc-text-primary: #F4F4F5;
  --lc-text-secondary: #A1A1AA;
  --lc-inverse-surface: #f0f1f2;
  --lc-inverse-on-surface: #191c1d;

  --lc-outline: #7b7487;
  --lc-outline-variant: #2A2A2E;
  --lc-border-divider: #2A2A2E;
  --lc-neutral: #A1A1AA;
  --lc-meta: #A1A1AA;
  --lc-chip-bg: rgba(204, 255, 0, 0.12);
  --lc-cyber-lime-on-surface: #D9FF3F;
  --lc-primary: #A78BFA; /* v4 — 暗色下紫色提亮 */
  --lc-on-primary: #09090B; /* v4 — 暗色下浅紫底配深字（白字在 #A78BFA 上仅 2.7:1 不可读） */

  --lc-nav-bg: rgba(18, 18, 20, 0.92);
  --lc-nav-border: var(--lc-brutal-border-color);
  --lc-chip-on-neon: #0D0D0D;
  --lc-bg-texture-opacity: 0.04;
  --lc-terminal-bg: #0a0a0c;
  --lc-terminal-header: #0a0a0c;
  --lc-terminal-text: var(--lc-cyber-lime);
  --lc-terminal-title: rgba(240, 241, 242, 0.5);
  --lc-terminal-border: rgba(255, 255, 255, 0.06);

  /* GitHub heatmap — dark (github.com contribution graph) */
  --lc-github-cell-l0: #161b22;
  --lc-github-cell-l1: #0e4429;
  --lc-github-cell-l2: #006d32;
  --lc-github-cell-l3: #26a641;
  --lc-github-cell-l4: #39d353;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --lc-cursor-default: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html.lc-theme-transitioning,
html.lc-theme-transitioning *,
html.lc-theme-transitioning *::before,
html.lc-theme-transitioning *::after {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}