/* Arcasidian Site — Japandi Design System
 * Shared with Scriptorium: earth tones, Ma spacing, grain texture
 * Wabi-sabi (imperfection, warmth) + Lagom (just enough)
 * ------------------------------------------------------------- */

/* --- Light Mode Tokens --- */
:root {
  /* Palette: Earth Tones */
  --bg:     #F4F1EA;  /* sand/paper */
  --bg2:    #EDE8DF;  /* warm oat */
  --bg3:    #F9F7F3;  /* raised surfaces */
  --ink:    #2B2B2B;  /* charcoal (never #000) */
  --ink2:   #4A4540;  /* warm dark grey */
  --muted:  #A09A92;  /* warm medium grey */
  --faint:  #C8C0B4;  /* warm light grey */
  --wood:   #C4826D;  /* muted terracotta */
  --wood2:  #B57260;  /* darker terracotta */
  --border: #E0D9CC;  /* nearly invisible warm grey */

  /* Typography */
  --serif: 'Crimson Pro', Georgia, serif;
  --sans:  'Inter', -apple-system, sans-serif;
  --mono:  'JetBrains Mono', 'Fira Code', monospace;

  /* Ma spacing */
  --jp-space-xs:  4px;
  --jp-space-sm:  8px;
  --jp-space-md:  16px;
  --jp-space-lg:  24px;
  --jp-space-xl:  40px;
  --jp-space-2xl: 64px;

  /* Transitions (organic, never linear) */
  --jp-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --jp-transition-micro: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --jp-transition-macro: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadows (soft, natural depth — wabi-sabi) */
  --jp-shadow-sm: 0 1px 3px rgba(43, 43, 43, 0.04), 0 1px 2px rgba(43, 43, 43, 0.06);
  --jp-shadow-md: 0 2px 8px rgba(43, 43, 43, 0.06), 0 1px 3px rgba(43, 43, 43, 0.04);
  --jp-shadow-lg: 0 4px 16px rgba(43, 43, 43, 0.08), 0 2px 6px rgba(43, 43, 43, 0.04);

  /* Border radius (wabi-sabi softness) */
  --jp-radius-sm: 4px;
  --jp-radius-md: 6px;
  --jp-radius-lg: 10px;

  /* Grain overlay */
  --jp-grain-opacity: 0.018;

  /* Nav background (for backdrop-filter) */
  --nav-bg: rgba(244, 241, 234, 0.92);
}

/* --- Selection --- */
::selection {
  background: #E8DFD0; /* warm sand highlight */
  color: var(--ink);
}

/* --- Grain texture overlay (SVG noise — eliminates pixel coldness) --- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: var(--jp-grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  mix-blend-mode: multiply;
}

/* --- Scrollbar (minimal, organic) --- */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

/* --- Dark Mode --- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:     #1E1D1B;  /* warm charcoal */
    --bg2:    #252320;  /* slightly lighter charcoal */
    --bg3:    #2A2825;  /* raised surfaces */
    --ink:    #D4CFC6;  /* warm off-white */
    --ink2:   #B0A99E;  /* warm medium-light grey */
    --muted:  #6D675E;  /* warm dark grey */
    --faint:  #4A4540;  /* very dark warm grey */
    --wood:   #D4957F;  /* lighter terracotta for dark bg */
    --wood2:  #E0A592;  /* hover terracotta */
    --border: #3A3632;  /* warm dark border */

    /* Shadows deepen (warm charcoal, never pure black) */
    --jp-shadow-sm: 0 1px 3px rgba(20, 19, 17, 0.35), 0 1px 2px rgba(20, 19, 17, 0.25);
    --jp-shadow-md: 0 2px 8px rgba(20, 19, 17, 0.4), 0 1px 3px rgba(20, 19, 17, 0.25);
    --jp-shadow-lg: 0 4px 16px rgba(20, 19, 17, 0.5), 0 2px 6px rgba(20, 19, 17, 0.25);

    /* Grain: more subtle in dark */
    --jp-grain-opacity: 0.012;

    /* Nav background */
    --nav-bg: rgba(30, 29, 27, 0.92);
  }

  /* Selection adapts */
  ::selection {
    background: #3A3530;
    color: var(--ink);
  }

  /* Grain blend mode adapts */
  body::after {
    mix-blend-mode: overlay;
  }
}

/* --- Accessibility: reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  body::after {
    display: none;
  }
}