/* Modern light direction — loaded after the base layout. */

:root {
  --ink: #f4f3ed;
  --ink-soft: #ebece5;
  --surface: #ffffff;
  --surface-2: #e6e9e1;
  --line: rgba(18, 22, 26, .11);
  --line-strong: rgba(18, 22, 26, .2);
  --text: #15171b;
  --muted: #68716c;
  --accent: #5b52ff;
  --accent-strong: #4338ef;
  --accent-ink: #ffffff;
  --cream: #dfff67;
  --purple: #ff765f;
  --shadow: 0 28px 80px rgba(26, 30, 34, .12);
}

body.erwan-portfolio-theme {
  background: var(--ink);
  color: var(--text);
}

.site-topbar.is-scrolled {
  background: rgba(249, 249, 245, .84);
  border-color: rgba(18, 22, 26, .08);
  box-shadow: 0 10px 40px rgba(22, 28, 25, .04);
}

.site-brand__mark {
  border-color: rgba(91, 82, 255, .26);
  color: #fff;
  background: #5b52ff;
  box-shadow: 5px 5px 0 #dfff67;
}

.site-brand__text strong { color: #17191d; }
.site-brand__text small { color: #737b76; }
.site-navigation > a { color: #4f5752; }
.site-navigation > a:hover { color: #15171b; }
.site-navigation > a:not(.site-navigation__cta)::after { background: #5b52ff; }
.site-navigation .site-navigation__cta {
  color: #fff;
  border-color: #17191d;
  background: #17191d;
  box-shadow: 4px 4px 0 #dfff67;
}
.site-navigation .site-navigation__cta:hover {
  color: #fff;
  border-color: #5b52ff;
  background: #5b52ff;
  box-shadow: 2px 2px 0 #dfff67;
}

.portfolio-home { background: var(--ink); }
.portfolio-home::before {
  background: radial-gradient(580px circle at var(--pointer-x) var(--pointer-y), rgba(91, 82, 255, .07), transparent 72%);
}

.hero {
  background-color: #f8f7f2;
  background-image:
    linear-gradient(rgba(20, 23, 27, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 23, 27, .035) 1px, transparent 1px);
}
.hero::after {
  background: linear-gradient(90deg, #f8f7f2 0%, transparent 18%, transparent 82%, #f8f7f2 100%);
}
.hero__ambient--one {
  background: radial-gradient(circle, rgba(91, 82, 255, .17), transparent 67%);
}
.hero__ambient--two {
  background: radial-gradient(circle, rgba(255, 118, 95, .13), transparent 65%);
}
.eyebrow { color: #5b52ff; }
.status-dot {
  background: #6bdf76;
  box-shadow: 0 0 0 0 rgba(107, 223, 118, .55);
}
.hero__title,
.section-heading h2,
.about h2,
.contact-card h2 { color: #15171b; }
.text-gradient {
  background-image: linear-gradient(100deg, #5b52ff 4%, #9a53dc 47%, #ff765f 98%);
}
.hero__lead { color: #59625d; }
.button--primary {
  color: #fff;
  background: #5b52ff;
  box-shadow: 6px 6px 0 #dfff67;
}
.button--primary:hover {
  color: #fff;
  background: #443aed;
  box-shadow: 3px 3px 0 #dfff67;
}
.button--ghost {
  color: #1a1c20;
  border-color: rgba(20, 24, 28, .18);
  background: rgba(255, 255, 255, .64);
}
.button--ghost:hover {
  border-color: #5b52ff;
  background: #fff;
}
.hero__proof li { color: #69716c; }
.hero__proof span { color: #5b52ff; }

.hero-visual__glow { background: rgba(91, 82, 255, .14); }
.browser-card {
  border-color: rgba(20, 24, 28, .16);
  background: #171a20;
  box-shadow: 22px 25px 0 rgba(91, 82, 255, .1), 0 36px 90px rgba(22, 25, 31, .18);
}
.browser-card__bar { border-color: rgba(255,255,255,.09); background: #22252d; }
.browser-card__body {
  background-color: #171a20;
  background-image: radial-gradient(circle at 84% 14%, rgba(91,82,255,.35), transparent 39%);
}
.browser-card__nav b,
.browser-card__eyebrow,
.browser-card__metrics strong { color: #dfff67; }
.browser-card__button { color: #181b20; background: #dfff67; }
.floating-chip {
  color: #24272c;
  border-color: rgba(20, 24, 28, .12);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 15px 45px rgba(27, 30, 35, .14);
}
.floating-chip span { color: #5b52ff; }
.scroll-cue { color: #7c847f; }
.scroll-cue i { background: #cdd0ca; }
.scroll-cue i::after { background: #5b52ff; }

.tech-ribbon {
  border-color: #17191d;
  background: #17191d;
}
.tech-ribbon__track span { color: #e9ece8; }
.tech-ribbon__track i { color: #dfff67; }

.services {
  background:
    radial-gradient(circle at 88% 5%, rgba(223, 255, 103, .32), transparent 22%),
    linear-gradient(180deg, #f4f3ed, #eceee8);
}
.section-heading__copy { color: #68716c; }
.service-card {
  border-color: rgba(18, 22, 26, .1);
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 18px 55px rgba(28, 34, 30, .055);
}
.service-card::after {
  background: radial-gradient(circle, rgba(91, 82, 255, .12), transparent 68%);
}
.service-card:hover {
  border-color: rgba(91, 82, 255, .34);
  background: #fff;
  box-shadow: 0 25px 70px rgba(37, 39, 69, .12);
}
.service-card--featured {
  border-color: #5b52ff;
  background: #5b52ff;
  box-shadow: 10px 12px 0 #dfff67;
}
.service-card--featured:hover {
  border-color: #473df0;
  background: #473df0;
}
.service-card__tag {
  color: #15171b;
  background: #dfff67;
}
.service-card__number { color: #8b938e; }
.service-card__icon {
  color: #5b52ff;
  border-color: rgba(91, 82, 255, .22);
  background: rgba(91, 82, 255, .07);
}
.service-card h3 { color: #17191d; }
.service-card p { color: #68716c; }
.service-card li {
  color: #5f6863;
  border-color: rgba(18, 22, 26, .12);
}
.service-card--featured .service-card__number { color: rgba(255,255,255,.56); }
.service-card--featured .service-card__icon {
  color: #17191d;
  border-color: #dfff67;
  background: #dfff67;
}
.service-card--featured h3 { color: #fff; }
.service-card--featured p { color: rgba(255,255,255,.76); }
.service-card--featured li {
  color: rgba(255,255,255,.8);
  border-color: rgba(255,255,255,.2);
}

.work {
  background:
    radial-gradient(circle at 8% 20%, rgba(91, 82, 255, .08), transparent 26%),
    #faf9f5;
}
.text-link { color: #282b30; border-color: rgba(91, 82, 255, .38); }
.text-link span { color: #5b52ff; }
.project-card__visual {
  border-color: rgba(18, 22, 26, .1);
  background: #e6e8e3;
  box-shadow: 0 20px 55px rgba(27, 31, 29, .09);
}
.project-card:hover .project-card__visual { border-color: rgba(91, 82, 255, .4); }
.project-card__open { color: #15171b; background: #dfff67; }
.project-card__placeholder--1 {
  background: radial-gradient(circle at 22% 18%, #9b94ff, transparent 35%), linear-gradient(135deg, #5b52ff, #3029a6);
}
.project-card__placeholder--2 {
  background: radial-gradient(circle at 78% 20%, #ffd3ca, transparent 35%), linear-gradient(135deg, #ff765f, #a33f55);
}
.project-card__placeholder--3 {
  background: radial-gradient(circle at 50% 90%, #efffb3, transparent 40%), linear-gradient(135deg, #b9e936, #4f7c3f);
}
.project-card__placeholder i:first-child { background: #dfff67; }
.project-card__meta span { color: #5b52ff; }
.project-card h3 { color: #17191d; }
.project-card h3 a:hover { color: #5b52ff; }
.project-card p { color: #68716c; }
.projects-empty { border-color: rgba(18, 22, 26, .2); background: #fff; }
.projects-empty > span { color: #5b52ff; }
.projects-empty h3 { color: #17191d; }

.about {
  background:
    radial-gradient(circle at 8% 20%, rgba(255, 118, 95, .11), transparent 25%),
    #efeee8;
}
.about::before { background: radial-gradient(circle, rgba(91,82,255,.09), transparent 68%); }
.about__lead { color: #363b38; }
.about__intro > p:not(.eyebrow):not(.about__lead) { color: #68716c; }
.bento-card {
  border-color: rgba(18, 22, 26, .1);
  background: rgba(255,255,255,.84);
  box-shadow: 0 16px 45px rgba(30, 34, 31, .055);
}
.bento-card__label { color: #7b847e; }
.bento-card strong { color: #17191d; }
.bento-card strong i { color: #5b52ff; }
.signal-lines span { background: #5b52ff; }
.skill-cloud span {
  color: #464d49;
  border-color: rgba(18, 22, 26, .1);
  background: #f7f7f3;
}
.skill-cloud span:hover { color: #5b52ff; border-color: rgba(91,82,255,.38); }
.bento-card--accent { background: #dfff67; }
.bento-card--accent .bento-card__label { color: #607519; }
.bento-card--accent strong { color: #182006; }

.process { background: #f8f7f2; }
.process-list { border-color: rgba(18,22,26,.12); }
.process-list li { border-color: rgba(18,22,26,.12); }
.process-list li:hover { background: linear-gradient(90deg, rgba(91,82,255,.07), transparent); }
.process-list li > span { color: #5b52ff; }
.process-list h3 { color: #17191d; }
.process-list p { color: #68716c; }
.process-list li::after { color: #a7ada9; }
.process-list li:hover::after { color: #5b52ff; }

.contact { background: #f8f7f2; }
.contact-card {
  border-color: rgba(255,255,255,.13);
  background: linear-gradient(135deg, #17191f, #252167 62%, #4d2966);
  box-shadow: 14px 16px 0 #dfff67, 0 40px 90px rgba(35, 31, 70, .2);
}
.contact-card h2 { color: #fff; }
.contact-card .text-gradient {
  background-image: linear-gradient(100deg, #dfff67, #baf0ff 52%, #ffc3b8);
}
.contact-card > p:not(.eyebrow) { color: rgba(255,255,255,.72); }
.contact-card .eyebrow { color: #dfff67; }
.contact-card .status-dot { background: #dfff67; }
.contact-card__orb { border-color: rgba(223,255,103,.14); }
.button--light { color: #17191d; background: #dfff67; }
.button--light:hover { color: #17191d; background: #efffb0; }
.contact-card__email { color: rgba(255,255,255,.48); }

.site-footer { background: #f8f7f2; }
.site-footer__inner { border-color: rgba(18,22,26,.11); }
.site-footer p { color: #737b76; }
.site-footer__contact { color: #353a37; }
.site-footer__contact span { color: #5b52ff; }

.portfolio-archive,
.portfolio-single { background: #f8f7f2; }
.portfolio-kicker { color: #5b52ff; }
.portfolio-title { color: #17191d; }
.portfolio-archive__head > p:last-child { color: #68716c; }
.portfolio-thumb {
  border-color: rgba(18,22,26,.1);
  background: #e7e9e3;
  box-shadow: 0 20px 55px rgba(28,32,30,.08);
}
.portfolio-item-title { color: #17191d; }
.portfolio-item__stack { color: #5b52ff; }
.single-hero__back { color: #68716c; }
.single-hero__back:hover { color: #5b52ff; }
.single-hero__stack span { color: #5b52ff; border-color: rgba(91,82,255,.2); background: rgba(91,82,255,.05); }
.single-featured { border-color: rgba(18,22,26,.1); }
.portfolio-section { border-color: rgba(18,22,26,.11); }
.portfolio-section h2 { color: #17191d; }
.portfolio-section p,
.portfolio-section .entry-content { color: #68716c; }
.portfolio-links {
  border-color: rgba(18,22,26,.1);
  background: #fff;
  box-shadow: 0 18px 50px rgba(28,32,30,.07);
}
.portfolio-links h2 { color: #17191d; }
.portfolio-btn { color: #353a37; border-color: rgba(18,22,26,.11); }
.portfolio-btn:hover { color: #fff; border-color: #5b52ff; background: #5b52ff; }

@media (max-width: 760px) {
  .nav-toggle {
    color: #17191d;
    border-color: rgba(18,22,26,.14);
    background: rgba(255,255,255,.8);
  }
  .site-navigation {
    background: rgba(248, 248, 244, .98);
  }
  .site-navigation > a {
    color: #17191d;
    border-color: rgba(18,22,26,.1);
  }
  .site-navigation .site-navigation__cta { color: #fff; }
  .browser-card { box-shadow: 10px 12px 0 rgba(91,82,255,.12), 0 28px 70px rgba(22,25,31,.16); }
  .service-card--featured { box-shadow: 7px 8px 0 #dfff67; }
  .contact-card { box-shadow: 8px 9px 0 #dfff67, 0 32px 70px rgba(35,31,70,.18); }
}