/* ═══════════════════════════════════════════════════════════════════════
   EFRAT KAPTSAN, DESIGN SYSTEM · shared components
   Single source of truth. Linked LAST in <head> on every project page.
   Tokens (--accent, --ink, --border, --fs-*, --pad-x, --max) come from each page's :root.
   Rule: never write a new button or footer style on a page. Use these classes.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── BUTTONS · size (sm · md · lg) × variant (primary · secondary · ghost) ──
   Always a pill (50px radius), weight 500, 2 sizes of type (sm 14px, base 16px).
   primary   accent fill, white text       → the one main action
   secondary outline, ink text             → quiet or "back" actions
   ghost     light accent fill, accent text → tertiary / inline links
   Default size when no size class is given: md.                                */
.btn-sm,.btn-md,.btn-lg,.btn-primary,.btn-secondary,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;border-radius:50px;font-family:inherit;font-weight:500;line-height:1.35;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s}
.btn-primary,.btn-secondary,.btn-ghost{font-size:var(--fs-sm);padding:12px 24px;gap:8px}
/* Hero-size primary/secondary (home hero CTAs, project page-end): 15px · 14/28 */
.btn-primary:not(.btn-sm):not(.btn-lg),.btn-secondary:not(.btn-sm):not(.btn-lg){font-size:.9375rem;padding:14px 28px}
.btn-sm{font-size:var(--fs-sm);padding:8px 18px;gap:7px}
.btn-md{font-size:var(--fs-sm);padding:12px 24px;gap:8px}
.btn-lg{font-size:var(--fs-base);padding:16px 36px;gap:10px}
.btn-primary{background:var(--accent);color:#fff;border:1.5px solid var(--accent)}
.btn-primary:hover{transform:translateY(-2px);background:#1E1B4B;border-color:#1E1B4B}
.btn-secondary{background:transparent;color:var(--ink);border:1.5px solid rgba(30,27,75,.25)}
.btn-secondary:hover{background:#fff;border-color:var(--ink)}
.btn-ghost{background:var(--accent-lt);color:var(--accent);border:1.5px solid rgba(91,33,182,.2)}
.btn-ghost:hover{background:var(--accent);color:#fff}
.btn-sm svg,.btn-md svg,.btn-lg svg,.btn-primary svg,.btn-secondary svg,.btn-ghost svg{flex:none;transition:transform .2s}
.btn-primary:hover .arrow-r,.btn-secondary:hover .arrow-r{transform:translateX(3px)}
.btn-primary:hover .arrow-l,.btn-secondary:hover .arrow-l{transform:translateX(-3px)}
.btn-sm:focus-visible,.btn-md:focus-visible,.btn-lg:focus-visible,.btn-primary:focus-visible,.btn-secondary:focus-visible,.btn-ghost:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── PAGE END · project footer navigation ──────────────────────────────────
   Pattern: [ Back = secondary ] [ Next project = primary ], Back left, Next right-aligned to the page edge; same size as the home hero CTAs
   One row, same height, same radius as every other button on the site.
   If a page has no next project, only the Back button shows.
   Markup:
   <div class="page-end" role="navigation" aria-label="Project navigation">
     <a class="btn-secondary btn-md" href="index.html"><svg class="arrow-l">…</svg>Back to Portfolio</a>
     <a class="btn-primary btn-md" href="project-x.html">Next: Title<svg class="arrow-r">…</svg></a>
   </div>                                                                      */
.page-end{max-width:calc(var(--max) + var(--pad-x)*2);margin:0 auto;padding:48px var(--pad-x) 72px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--border)}
.page-end .btn-primary{margin-left:auto;text-align:left}
/* Back and Next share one width on desktop so the pair reads as a matched set */
@media(min-width:641px){.page-end:has(.btn-primary) .btn-secondary,.page-end:has(.btn-primary) .btn-primary{width:460px;max-width:100%;justify-content:center;text-align:center}}
@media(min-width:641px) and (max-width:1010px){.page-end:has(.btn-primary) .btn-secondary,.page-end:has(.btn-primary) .btn-primary{width:100%}}
@media(max-width:640px){.page-end{flex-direction:column-reverse;align-items:stretch}.page-end .btn-primary,.page-end .btn-secondary{margin-left:0;justify-content:center;text-align:center}}

@media(prefers-reduced-motion:reduce){.btn-sm,.btn-md,.btn-lg,.btn-primary,.btn-secondary,.btn-ghost,.btn-sm svg,.btn-md svg,.btn-lg svg,.btn-primary svg,.btn-secondary svg,.btn-ghost svg{transition:none}.btn-primary:hover{transform:none}.btn-primary:hover .arrow-r,.btn-secondary:hover .arrow-r,.btn-primary:hover .arrow-l,.btn-secondary:hover .arrow-l{transform:none}}

/* Comfortable tap targets for header/footer text links (min 44px hit area, no visual change) */
a.nav-back{min-height:44px}
nav a.nav-logo{display:inline-flex;align-items:center;min-height:44px}
.footer-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}

/* Skip link */
.skip-link{position:absolute;left:12px;top:-64px;z-index:1000;background:#1E1B4B;color:#fff;padding:12px 20px;border-radius:999px;font:600 .875rem Inter,system-ui,sans-serif;text-decoration:none;transition:top .15s ease}
.skip-link:focus{top:12px;outline:2px solid #C4B5FD;outline-offset:2px}
main:focus{outline:none}