/* =========================================================
   Matin Ghanbari Portfolio — modern dark, two directions
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

:root {
  /* Direction A — Studio Slate (deep neutral slate, plum accent) */
  --A-bg:        #0E1014;
  --A-bg-2:      #14171D;
  --A-bg-3:      #1A1E25;
  --A-line:      rgba(255,255,255,0.06);
  --A-line-2:    rgba(255,255,255,0.10);
  --A-fg:        #E8E6E1;
  --A-fg-dim:    #9CA0A8;
  --A-fg-muted:  #828282;
  --A-accent:    oklch(66.477% 0.06615 233.264);    /* plum */
  --A-accent-2:  oklch(84.139% 0.05362 211.335);
  --A-accent-soft: oklch(0.62 0.13 320 / 0.14);

  /* Direction B — Engine Forge (warm near-black, amber/burnt-orange accent) */
  --B-bg:        #11100E;
  --B-bg-2:      #181612;
  --B-bg-3:      #1F1C17;
  --B-line:      rgba(255,240,220,0.06);
  --B-line-2:    rgba(255,240,220,0.11);
  --B-fg:        #EFEAE0;
  --B-fg-dim:    #A39A8B;
  --B-fg-muted:  #6B6253;
  --B-accent:    oklch(0.72 0.14 55);     /* burnt amber */
  --B-accent-2:  oklch(0.82 0.11 55);
  --B-accent-soft: oklch(0.72 0.14 55 / 0.14);

  /* Type */
  --font-sans:  "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
}

/* Active palette set by [data-direction] on root */
[data-direction="A"] {
  --bg: var(--A-bg);
  --bg-2: var(--A-bg-2);
  --bg-3: var(--A-bg-3);
  --line: var(--A-line);
  --line-2: var(--A-line-2);
  --fg: var(--A-fg);
  --fg-dim: var(--A-fg-dim);
  --fg-muted: var(--A-fg-muted);
  --accent: var(--A-accent);
  --accent-2: var(--A-accent-2);
  --accent-soft: var(--A-accent-soft);
}
[data-direction="B"] {
  --bg: var(--B-bg);
  --bg-2: var(--B-bg-2);
  --bg-3: var(--B-bg-3);
  --line: var(--B-line);
  --line-2: var(--B-line-2);
  --fg: var(--B-fg);
  --fg-dim: var(--B-fg-dim);
  --fg-muted: var(--B-fg-muted);
  --accent: var(--B-accent);
  --accent-2: var(--B-accent-2);
  --accent-soft: var(--B-accent-soft);
}
    
main {
    position: relative;
    z-index: 0;
}

main::before {
    content: "";
    position: fixed;
    inset: 0;
    background-color: var(--bg);
    background-image: radial-gradient(circle, var(--accent) 1.2px, transparent 1.2px);
    background-size: 15px 15px;
    opacity: 0.2;
    mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 75%);
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    z-index: -1;
    pointer-events: none;
}