/* ============================================================
   Pegah Yahyaei — Portfolio
   Shared design tokens + base, ported from the case-study system
   ============================================================ */

:root {
  /* Surfaces */
  --bg:        rgb(239, 238, 238);   /* warm light gray page */
  --surface:   #ffffff;
  --surface-2: rgb(243, 245, 246);
  --ink-bg:    rgb(18, 20, 22);      /* near-black for dark sections */

  /* Ink */
  --ink:    rgb(22, 28, 33);
  --muted:  rgb(82, 100, 113);
  --faint:  rgb(168, 180, 187);

  /* Lines */
  --line:        rgba(26, 32, 35, 0.12);
  --line-soft:   rgba(26, 32, 35, 0.07);

  /* Accent — electric azure (overridable) */
  --accent:      #2b5cff;
  --accent-2:    #5a82ff;
  --accent-tint: rgba(43, 92, 255, 0.12);
  --accent-line: rgba(43, 92, 255, 0.45);

  /* Type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Rhythm */
  --gutter: clamp(20px, 8vw, 180px);
  --radius: 14px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 30%, #f2f2f2 70%, #E5E5E5 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; }

::selection { background: var(--accent); color: #fff; }

/* ---- Shared atoms ---- */

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}

.wordmark {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.01em;
  color: var(--ink);
}

/* Thin gradient hairline used under headers / dividers */
.hairline {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-line) 40%, transparent 100%);
}