/* Shared portfolio foundations. Loaded last; legacy Framer tokens bridge below. */
:root {
  --ds-font: "DM Sans", Arial, sans-serif;
  --ds-type-page: 32px;
  --ds-type-card: 26px;
  --ds-type-control: 18px;
  --ds-type-small: 14px;
  --ds-space-1: 8px;
  --ds-space-2: 16px;
  --ds-space-3: 24px;
  --ds-space-4: 32px;
  --ds-radius-card: 32px;
  --ds-radius-control: 16px;
  --ds-icon: 24px;
  --ds-control: 44px;
  --ds-bg: #090909;
  --ds-surface: #141414;
  --ds-inset: #242424;
  --ds-line: #343434;
  --ds-text: #cccccc;
  --ds-muted: #a0a0a0;
  --ds-focus: #a5adff;
  --ds-success: #77c89b;
  --ds-ease: cubic-bezier(0.44, 0, 0.56, 1);
  --ds-duration: 180ms;
  --ds-grain: 0.025;
}
html[data-theme="light"] {
  --ds-bg: #f4f5f6;
  --ds-surface: #ffffff;
  --ds-inset: #eef0f1;
  --ds-line: #d8dbde;
  --ds-text: #1f1f1f;
  --ds-muted: #68737d;
  --ds-focus: #414cc2;
  --ds-success: #26734c;
}
html[data-theme] {
  --bg: var(--ds-bg);
  --card: var(--ds-surface);
  --inner: var(--ds-inset);
  --border: var(--ds-line);
  --text: var(--ds-text);
  --heading: var(--ds-text);
  --muted: var(--ds-muted);
  --label: var(--ds-muted);
  --radius: var(--ds-radius-card);
  --contact-fill: var(--ds-inset);
  --contact-card: var(--ds-surface);
  --contact-line: var(--ds-line);
  --contact-text: var(--ds-text);
  --contact-muted: var(--ds-muted);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Bridge original exported tokens so both themes use one palette. */
body {
  --token-27c9d111-f683-48f8-a036-3956fc302ca7: var(--ds-bg);
  --token-3f05528f-de31-4e7f-86b4-5ecf81f3f12a: var(--ds-surface);
  --token-1a30fc6f-eda2-4a1d-aaae-d19e9e39a832: var(--ds-surface);
  --token-f3576054-df0a-4fc9-8a11-8f26014af3dd: var(--ds-bg);
  --token-0bad501f-f477-4f76-be40-5fee149706e4: var(--ds-line);
  --token-236b709f-fc4a-462c-b6d8-fdcc8bd59042: var(--ds-inset);
  --token-be5a708f-29cb-4753-b450-9aff003d212d: var(--ds-line);
  --token-c621e2e0-f394-4f76-a68a-8e58064c7f44: var(--ds-line);
  --token-b990ee1f-b287-4c7e-88a6-7a8df170aecb: var(--ds-muted);
  --token-b422cdb8-a59b-4a71-a8d9-b0a044ef4564: var(--ds-muted);
  --token-402d48f0-528a-47f0-9b26-ffe659c09fce: var(--ds-text);
  --token-962ac7be-e962-4c65-997a-0469d6acba4c: var(--ds-text);
}
.grain {
  opacity: var(--ds-grain);
}
/* Keep project names readable with keyboard, mouse, and touch alike. */
.project:after {
  inset: 35% 0 0;
  opacity: 1;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.88));
}
.project-caption {
  opacity: 1;
  transform: none;
  left: 24px;
  right: 24px;
  bottom: 24px;
}
.project-caption h2 {
  color: #ffffff;
  font-size: 20px;
  line-height: 1.35;
}
.project-caption > span {
  width: var(--ds-icon);
  height: var(--ds-icon);
  color: #fff;
}
.social svg {
  width: var(--ds-icon);
  height: var(--ds-icon);
}
.email-copy {
  border-radius: var(--ds-radius-control);
  min-height: 56px;
}
.input-wrap input {
  box-shadow: inset 0 0 0 1px var(--ds-line);
}
button:disabled,
input:disabled {
  cursor: not-allowed;
}
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 2px solid var(--ds-focus) !important;
  outline-offset: 4px;
}
[data-copy-email][data-state="copied"] {
  border-color: var(--ds-success) !important;
  box-shadow: inset 0 0 0 1px var(--ds-success) !important;
}
[data-copy-email][data-state="copied"] .copy-icon {
  color: var(--ds-success);
}
.copy-feedback {
  color: var(--ds-muted);
}
/* About retains its exported layout but shares card geometry and controls. */
html[data-page="about"]
  :is(
    .framer-1j0prym,
    [data-framer-name="Experience"],
    [data-framer-name="Services"],
    [data-framer-name="Stack"],
    [data-framer-name="Get In Touch"]
  ),
.personal-photos {
  border-radius: var(--ds-radius-card);
}
.carousel-pause {
  width: var(--ds-control);
  height: var(--ds-control);
  border-color: var(--ds-line);
  color: var(--ds-muted);
  font-size: 14px;
}
.carousel-dots button[aria-current] {
  width: var(--ds-control) !important;
  height: var(--ds-control) !important;
}
.carousel-dots button:focus-visible {
  outline-color: var(--ds-focus) !important;
}
.local-back {
  min-width: var(--ds-control);
  min-height: var(--ds-control);
}
@media (max-width: 809px) {
  :root {
    --ds-radius-card: 24px;
  }
  .project-caption {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }
  .project-caption h2 {
    font-size: 18px;
  }
  .social svg {
    width: 24px;
    height: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.ds-texture {
  opacity: var(--ds-grain) !important;
}

/* Typography roles: page title, card title, and action label. */
.shell {
  font-family: var(--ds-font);
}
.shell h1 {
  font-size: var(--ds-type-page);
}
.shell h2:not(.project-caption h2) {
  font-size: var(--ds-type-card);
}
.email-copy {
  font-family: var(--ds-font);
  font-size: var(--ds-type-control);
}
html[data-page="about"] .personal-photos h2 {
  font-size: var(--ds-type-card);
}
@media (max-width: 809px) {
  :root {
    --ds-type-page: 28px;
    --ds-type-card: 22px;
    --ds-type-control: 16px;
  }
}
@media (max-width: 360px) {
  :root {
    --ds-type-page: 24px;
    --ds-type-card: 20px;
  }
}