/* ================================================
   Frank Panzer Personal Site — Design System
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400&display=swap');

:root {
  --color-bg:           #0D1117;
  --color-surface:      #161B22;
  --color-surface-2:    #1C2128;
  --color-border:       #30363D;
  --color-accent:       #F97316;
  --color-accent-dim:   rgba(249,115,22,0.15);
  --color-text:         #E6EDF3;
  --color-muted:        #8B949E;

  --font-head: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --ease: 0.2s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
}

h1,h2,h3,h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.1;
}
h1 { font-size: clamp(3rem, 10vw, 7rem); }
h2 { font-size: clamp(2rem, 5vw, 3rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.6rem); }

p { color: var(--color-muted); line-height: 1.7; }
a { color: var(--color-accent); text-decoration: none; transition: opacity var(--ease); }
a:hover { opacity: 0.8; }

img { max-width: 100%; display: block; }

/* Layout */
.fp-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.fp-section   { padding: 7rem 0; }
.fp-section + .fp-section { border-top: 1px solid var(--color-border); }

.fp-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
  display: block;
}

/* Buttons */
.fp-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .875rem 1.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-head); font-weight: 600; font-size: .9rem;
  cursor: pointer; border: none; text-decoration: none;
  transition: all var(--ease);
}
.fp-btn--primary  { background: var(--color-accent); color: #fff; }
.fp-btn--primary:hover  { background: #ea6c0a; opacity:1; transform: translateY(-2px); }
.fp-btn--outline  { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); }
.fp-btn--outline:hover  { border-color: var(--color-accent); color: var(--color-accent); opacity:1; }

/* Card */
.fp-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--ease), box-shadow var(--ease);
}
.fp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(249,115,22,0.12);
}

/* Badge */
.fp-badge {
  display: inline-block; padding: .2rem .7rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600;
  background: var(--color-accent-dim);
  color: var(--color-accent);
  border: 1px solid rgba(249,115,22,0.3);
}

/* Skill chips */
.fp-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .7rem; border-radius: var(--radius-sm); font-size: .78rem; font-weight: 500; margin: .2rem; }
.fp-chip--green  { background: rgba(74,222,128,.1); color: #4ade80; }
.fp-chip--yellow { background: rgba(253,224,71,.1);  color: #fde047; }
.fp-chip--red    { background: rgba(248,113,113,.1); color: #f87171; }

/* Scroll animation base */
.fp-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
}
.fp-reveal.fp-visible { opacity: 1; transform: none; }
.fp-reveal-delay-1 { transition-delay: .1s; }
.fp-reveal-delay-2 { transition-delay: .2s; }
.fp-reveal-delay-3 { transition-delay: .3s; }

/* Grid helpers */
.fp-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 2rem; }
.fp-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }

@media (max-width: 900px) { .fp-grid-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px) { .fp-grid-2, .fp-grid-3 { grid-template-columns: 1fr; } .fp-section { padding: 4rem 0; } }