/* Shared tokens, typography, accessibility ? Ayushi portfolio */

:root {
  --font-sans: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --palette-charcoal: #2F4858;
  --palette-baltic: #33658A;
  --palette-sky: #86BBD8;
  --palette-honey: #F6AE2D;
  --palette-blaze: #F26419;
  --palette-blaze-deep: #BF4A10;
}

:root[data-theme="light"] {
  --bg: #F6F9FB;
  --bg-elevated: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #EAF2F7;
  --surface-glass: rgba(255, 255, 255, 0.88);
  --border: rgba(47, 72, 88, 0.14);
  --border-strong: rgba(47, 72, 88, 0.28);
  --text-primary: #2F4858;
  --text-secondary: #33658A;
  --text-tertiary: #4A7390;
  --accent: #33658A;
  --accent-highlight: #F26419;
  --accent-soft: rgba(51, 101, 138, 0.10);
  --on-accent: #FFFFFF;
  --mint: #F26419;
  --mint-soft: rgba(242, 100, 25, 0.12);
  --link-blue: #33658A;
  --line-rgb: 47, 72, 88;
  --shadow: 0 20px 60px rgba(47, 72, 88, 0.08);
  --focus-ring: #33658A;
  --expertise-bg: #1D3441;
}

:root[data-theme="dark"] {
  --bg: #062334;
  --bg-elevated: #0A2F42;
  --surface: #1D3441;
  --surface-2: #243F4F;
  --surface-glass: rgba(6, 35, 52, 0.82);
  --border: rgba(191, 224, 240, 0.16);
  --border-strong: rgba(191, 224, 240, 0.32);
  --text-primary: #FFFFFF;
  --text-secondary: #BFE0F0;
  --text-tertiary: #86BBD8;
  --accent: #F6AE2D;
  --accent-highlight: #F26419;
  --accent-soft: rgba(246, 174, 45, 0.18);
  --on-accent: #062334;
  --mint: #F26419;
  --mint-soft: rgba(242, 100, 25, 0.22);
  --link-blue: #86BBD8;
  --line-rgb: 191, 224, 240;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  --focus-ring: #F6AE2D;
  --expertise-bg: #1D3441;
}

body,
h1, h2, h3, h4,
.logo,
.nav-links a,
.btn,
.eyebrow,
.mono,
input,
button,
textarea,
select {
  font-family: var(--font-sans);
}

.mono {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.logo-mark .mark-bg {
  fill: var(--accent-highlight);
  transition: fill 0.4s ease;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
}

.nav-divider {
  width: 1px;
  height: 24px;
  background: var(--border-strong);
  flex-shrink: 0;
}

@media (max-width: 968px) {
  .nav-divider {
    display: none;
  }

  .nav-right {
    align-items: center;
    gap: 10px;
  }

  .theme-icon-btn,
  .menu-toggle {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    vertical-align: middle;
  }

  .menu-toggle {
    position: relative;
    border: none;
    background: transparent;
    color: var(--text-primary);
  }

  .menu-toggle span,
  .menu-toggle::before,
  .menu-toggle::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 16px;
    height: 2.5px;
    margin-left: -8px;
    border-radius: 999px;
    background: currentColor;
  }

  .menu-toggle span {
    top: 50%;
    margin-top: -1.25px;
  }

  .menu-toggle::before {
    top: calc(50% - 6px);
    margin-top: -1.25px;
  }

  .menu-toggle::after {
    top: calc(50% + 6px);
    margin-top: -1.25px;
  }
}

.logo-mark .mark-glyph {
  fill: #FFFFFF;
}

:root[data-theme="dark"] .eyebrow-lg {
  color: #FFFFFF;
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

:root[data-theme="light"] .btn-primary {
  background: var(--palette-baltic);
  color: #FFFFFF;
  border-color: var(--palette-baltic);
}

:root[data-theme="dark"] .btn-primary {
  background: var(--palette-blaze);
  color: #FFFFFF;
  border-color: var(--palette-blaze);
}

:root[data-theme="dark"] .btn-primary:hover {
  box-shadow: 0 12px 30px var(--mint-soft);
}

.hero-scope-item strong,
.case-stat .stat-num,
.stat-item .stat-num,
.kpi-number {
  color: var(--accent-highlight);
}

:root[data-theme="dark"] .hero-scope-item strong,
:root[data-theme="dark"] .case-stat .stat-num,
:root[data-theme="dark"] .stat-item .stat-num,
:root[data-theme="dark"] .kpi-number {
  color: var(--palette-honey);
}

.eyebrow.eyebrow-lg,
.eyebrow-lg {
  color: var(--palette-blaze);
}

.eyebrow.eyebrow-lg::before,
.eyebrow-lg::before {
  background: var(--palette-blaze);
}

.case-hero h1 {
  color: var(--palette-blaze);
}

:root[data-theme="dark"] .case-hero .eyebrow {
  color: #FFFFFF;
}

:root[data-theme="dark"] .case-hero .eyebrow::before {
  background: #FFFFFF;
}

:root[data-theme="dark"] .chapter-head .eyebrow {
  color: var(--palette-sky);
}

:root[data-theme="dark"] .chapter-head .eyebrow::before {
  background: var(--palette-sky);
}

:root[data-theme="dark"] .explore-label,
:root[data-theme="dark"] .sub-h-a,
:root[data-theme="dark"] .sub-h-b {
  color: var(--palette-blaze);
}

.hero-headline-accent {
  color: var(--palette-baltic);
}

:root[data-theme="dark"] .hero-headline-accent {
  color: var(--palette-sky);
}

/* Impact result trend chips ? shared light/dark contrast */
.impact-card {
  --impact-trend-color: var(--impact-accent, var(--palette-baltic));
  --impact-trend-bg: var(--impact-accent-soft, rgba(51, 101, 138, 0.12));
  --impact-trend-border: color-mix(in srgb, var(--impact-accent, var(--palette-baltic)) 32%, transparent);
}
.impact-card--1 {
  --impact-trend-color: var(--palette-baltic);
  --impact-trend-bg: rgba(51, 101, 138, 0.12);
  --impact-trend-border: rgba(51, 101, 138, 0.28);
}
.impact-card--2 {
  --impact-trend-color: var(--palette-charcoal);
  --impact-trend-bg: rgba(47, 72, 88, 0.10);
  --impact-trend-border: rgba(47, 72, 88, 0.24);
}
.impact-card--3 {
  --impact-trend-color: var(--palette-blaze);
  --impact-trend-bg: rgba(242, 100, 25, 0.12);
  --impact-trend-border: rgba(242, 100, 25, 0.28);
}
.impact-card--4 {
  --impact-trend-color: var(--palette-charcoal);
  --impact-trend-bg: rgba(47, 72, 88, 0.10);
  --impact-trend-border: rgba(47, 72, 88, 0.24);
}
:root[data-theme="dark"] .impact-card--1 {
  --impact-trend-color: #D4ECF8;
  --impact-trend-bg: rgba(134, 187, 216, 0.22);
  --impact-trend-border: rgba(134, 187, 216, 0.48);
}
:root[data-theme="dark"] .impact-card--2 {
  --impact-trend-color: #E8F4FC;
  --impact-trend-bg: rgba(191, 224, 240, 0.18);
  --impact-trend-border: rgba(191, 224, 240, 0.42);
}
:root[data-theme="dark"] .impact-card--3 {
  --impact-trend-color: #FFD9A8;
  --impact-trend-bg: rgba(246, 174, 45, 0.24);
  --impact-trend-border: rgba(246, 174, 45, 0.52);
}
:root[data-theme="dark"] .impact-card--4 {
  --impact-trend-color: #E8F4FC;
  --impact-trend-bg: rgba(191, 224, 240, 0.18);
  --impact-trend-border: rgba(191, 224, 240, 0.42);
}
.impact-trend {
  color: var(--impact-trend-color);
  background: var(--impact-trend-bg);
  border: 1px solid var(--impact-trend-border);
  font-weight: 600;
  flex-shrink: 0;
}

/* Closing CTA + footer eyebrows ? readable in light and dark (all case studies) */
.cta-band .eyebrow,
footer .eyebrow {
  color: var(--palette-baltic);
}
.cta-band h2 {
  color: var(--text-primary);
}
:root[data-theme="dark"] .cta-band .eyebrow,
:root[data-theme="dark"] footer .eyebrow {
  color: var(--palette-sky);
}

/* Case study hero metadata grid */
.case-meta-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, max-content);
  column-gap: 36px;
  row-gap: 12px;
  width: max-content;
  max-width: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}
.case-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: max-content;
  max-width: 220px;
}
.case-meta-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
  line-height: 1.3;
}
.case-meta-value {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.4;
}
:root[data-theme="dark"] .case-meta-label {
  color: var(--palette-sky);
}
:root[data-theme="dark"] .case-meta-value {
  color: var(--text-primary);
}
@media (max-width: 968px) {
  .case-meta-grid {
    grid-template-columns: repeat(2, max-content);
    column-gap: 36px;
    row-gap: 12px;
  }
}
@media (max-width: 560px) {
  .case-meta-grid {
    grid-template-columns: max-content;
    row-gap: 10px;
  }
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Scroll-hide header ? hides on scroll down, reveals on scroll up */
header.nav {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

header.nav.is-scroll-hidden {
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  header.nav {
    transition: none;
  }
}

/* Custom cursor + magnetic hover (desktop only; disabled via JS on touch/reduced-motion) */
body.has-custom-cursor,
body.has-custom-cursor a,
body.has-custom-cursor button {
  cursor: none;
}

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  transform: translate3d(-100px, -100px, 0);
  will-change: transform;
}

.cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--accent-highlight);
  box-shadow: 0 0 12px rgba(242, 100, 25, 0.35);
  transition: opacity 0.2s ease;
}

.cursor-ring {
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent-soft) 40%, transparent);
  transition: opacity 0.2s ease, border-color 0.25s ease, background 0.25s ease;
}

.cursor-ring.is-active {
  border-color: var(--accent-highlight);
  background: color-mix(in srgb, var(--mint-soft) 65%, transparent);
}

.cursor-dot.is-hidden,
.cursor-ring.is-hidden {
  opacity: 0;
}

body.has-custom-cursor .btn,
body.has-custom-cursor .case-card,
body.has-custom-cursor .footer-contact-btn,
body.has-custom-cursor .work-all-link,
body.has-custom-cursor .theme-icon-btn {
  transition: border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

/* No displacement on hover — color/border/shadow only */
.case-card:hover,
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.footer-contact-btn:hover,
.zoom-figure:hover,
.explore-thumb:hover,
.work-all-link:hover,
.theme-icon-btn:hover {
  transform: none !important;
}

/* Career timeline edge fade — solid page bg + mask (no visible box) */
.timeline-shell::after {
  background: var(--bg) !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 72%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 72%, #000 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}