/* Personal page — light/white theme overrides.
   Loaded after styles.css; flips the same component classes to a
   white-background, black-text palette without duplicating structure. */

:root {
  --bg: #ffffff;
  --bg-soft: #f6f6f5;
  --surface: rgba(0,0,0,0.03);
  --surface-strong: rgba(0,0,0,0.05);
  --text: #0a0a0a;
  --muted: #57564f;
  --subtle: #8f8e88;
  --line: rgba(0,0,0,0.10);
  --line-strong: rgba(0,0,0,0.18);
  --accent: #0a0a0a;
  --accent-2: #55554f;
  --warning: #7a5b00;
}

/* Texture + glow, tuned down for a light background */
body::before {
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.025) 2px,
    rgba(0,0,0,0.025) 4px
  );
}

body::after {
  background: radial-gradient(ellipse, rgba(0,0,0,0.025) 0%, transparent 70%);
}

/* Header */
.site-header {
  background: rgba(255,255,255,0.9);
}

/* Skip link (inline-styled in markup, so needs !important to override) */
.skip-link {
  background: #ffffff !important;
  color: #0a0a0a !important;
  border-color: var(--accent) !important;
}

/* Primary button inverted for light background */
.btn-primary {
  background: #0a0a0a;
  color: #ffffff;
}

.btn-primary:hover {
  box-shadow: 0 6px 28px rgba(0,0,0,0.18);
}

/* Portrait frame */
.portrait-frame {
  background: #f0f0ee;
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 40px 100px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05);
}

.portrait-frame::after {
  background: linear-gradient(0deg, rgba(255,255,255,0.85), transparent);
}

/* Project / media panels */
.project-media {
  background: #f6f6f5;
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 30px 80px rgba(0,0,0,0.10);
}

/* Contact link underline */
a.contact-val {
  text-decoration-color: rgba(0,0,0,0.2);
}