/*
 * 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: swap;
}

:root {
  /* M3 Surface */
  --lc-background: #f8f9fa;
  --lc-surface: #f8f9fa;
  --lc-surface-dim: #d9dadb;
  --lc-surface-bright: #f8f9fa;
  --lc-surface-container-lowest: #ffffff;
  --lc-surface-container-low: #f3f4f5;
  --lc-surface-container: #edeeef;
  --lc-surface-container-high: #e7e8e9;
  --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: #191c1d;
  --lc-on-surface: #191c1d;
  --lc-on-surface-variant: #4a4455;
  --lc-text-primary: #191c1d;
  --lc-text-secondary: #4a4455;
  --lc-inverse-surface: #2e3132;
  --lc-inverse-on-surface: #f0f1f2;

  /* Brand / Neon Spray */
  --lc-primary: #630ed4;
  --lc-primary-dark: #5a00c6;
  --lc-primary-soft: #7c3aed;
  --lc-primary-glow: rgba(99, 14, 212, 0.25);
  --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-neon-pink: #EA5694;
  --lc-ink-black: #0D0D0D;
  --lc-brutal-border-color: #0D0D0D;
  --lc-hard-shadow-color: #0D0D0D;

  /* Outline / Error */
  --lc-outline: #7b7487;
  --lc-outline-variant: #ccc3d8;
  --lc-border-divider: #ccc3d8;
  --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: #4a4455;
  --lc-meta: #4a4455;
  --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;

  /* Typography */
  --lc-font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --lc-font-body: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --lc-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --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-body-lg: 1.125rem;
  --lc-text-body-md: 1rem;
  --lc-text-label-md: 0.875rem;

  /* Layout */
  --lc-max: 1200px;
  --lc-gutter: 24px;
  --lc-margin-mobile: 16px;
  --lc-section-gap: 80px;

  /* Custom cursor — cyber-lime dot (Stitch guestbook); overridden in reduced-motion */
  --lc-cursor-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' 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: 72px;
  --lc-navbar-padding: 16px;
  --lc-aside-w: 260px;
  --lc-aside-max: min(26vw, 280px);
  --lc-sidebar-w: 260px;

  /* 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;

  /* Brutalist shadows (no soft shadows) */
  --lc-hard-shadow: 6px 6px 0 var(--lc-hard-shadow-color);
  --lc-hard-shadow-sm: 4px 4px 0 var(--lc-hard-shadow-color);
  --lc-hard-shadow-hover: 2px 2px 0 var(--lc-hard-shadow-color);
  --lc-border-brutal: 2px solid var(--lc-brutal-border-color);

  /* 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) | concrete-wall: gritty wall | groovepaper: ruled notebook */
  --lc-bg-texture: url("../images/textures/cream-paper.png");
  --lc-bg-texture-opacity: 0.85;

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

html[data-lc-color-scheme="dark"] {
  --lc-background: #121214;
  --lc-surface: #121214;
  --lc-surface-dim: #1a1a1c;
  --lc-surface-bright: #1e1e22;
  --lc-surface-container-lowest: #0d0d0f;
  --lc-surface-container-low: #161618;
  --lc-surface-container: #1c1c1f;
  --lc-surface-container-high: #222226;
  --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: #f0f1f2;
  --lc-on-surface: #f0f1f2;
  --lc-on-surface-variant: #ccc3d8;
  --lc-text-primary: #f0f1f2;
  --lc-text-secondary: #ccc3d8;
  --lc-inverse-surface: #f0f1f2;
  --lc-inverse-on-surface: #191c1d;

  --lc-outline: #7b7487;
  --lc-outline-variant: #4a4455;
  --lc-border-divider: #4a4455;
  --lc-neutral: #ccc3d8;
  --lc-meta: #ccc3d8;
  --lc-chip-bg: rgba(204, 255, 0, 0.12);

  --lc-nav-bg: rgba(18, 18, 20, 0.92);
  --lc-nav-border: var(--lc-brutal-border-color);
  --lc-brutal-border-color: #ccc3d8;
  --lc-hard-shadow-color: #4a4455;
  --lc-chip-on-neon: #0D0D0D;
  --lc-bg-texture-opacity: 0.05;
}

@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;
}