/* portfolio-admin/resources/css/site.css
 * Material 3 Expressive token + base layer for the public portfolio.
 * Hand-authored; emitted to public/site/css/site.css by GeneratorController. */

:root {
  /* Dark (default) Material 3 tonal tokens */
  --md-sys-color-surface: #0E1311;
  --md-sys-color-surface-container: #151B18;
  --md-sys-color-surface-container-high: #1B2320;
  --md-sys-color-surface-container-highest: #222B27;
  --md-sys-color-on-surface: #E2E6E3;
  --md-sys-color-on-surface-variant: #9AA39E;
  --md-sys-color-outline: #2A332E;
  --md-sys-color-primary: #6EE7A8;
  --md-sys-color-on-primary: #06281A;
  --md-sys-color-primary-container: #134F37;
  --md-sys-color-on-primary-container: #9FF5C6;
  --md-sys-color-signal: #B8FF5C;

  --md-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-dur-short: 200ms;
  --md-dur-medium: 400ms;
  --md-dur-long: 500ms;

  --font-display: "Roboto Flex", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

:root[data-theme="light"] {
  --md-sys-color-surface: #F7FAF7;
  --md-sys-color-surface-container: #EFF3EF;
  --md-sys-color-surface-container-high: #E7ECE8;
  --md-sys-color-surface-container-highest: #DFE4E0;
  --md-sys-color-on-surface: #131815;
  --md-sys-color-on-surface-variant: #45504A;
  --md-sys-color-outline: #C2CCC6;
  --md-sys-color-primary: #1F8A5B;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #A7F3CE;
  --md-sys-color-on-primary-container: #00200F;
  --md-sys-color-signal: #2F8A1E;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Material type scale */
.display-large  { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.75rem, 6vw, 4.5rem); line-height: 1.05; letter-spacing: -0.02em; }
.headline-medium{ font-family: var(--font-display); font-weight: 600; font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.15; }
.title-large    { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; }
.body-large     { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.6; color: var(--md-sys-color-on-surface-variant); }
.label-large    { font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.01em; }
.metric         { font-family: var(--font-mono); font-weight: 600; }
.text-signal    { color: var(--md-sys-color-signal); }

/* Tonal surfaces (replace glassy cards) */
.surface                 { background: var(--md-sys-color-surface); }
.surface-container       { background: var(--md-sys-color-surface-container); border: 1px solid var(--md-sys-color-outline); border-radius: 16px; }
.surface-container-high  { background: var(--md-sys-color-surface-container-high); border: 1px solid var(--md-sys-color-outline); border-radius: 16px; }

/* CSS-first reveal: visible by default; enhanced only when html.js present */
.reveal { opacity: 1; transform: none; }
html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--md-dur-medium) var(--md-easing-emphasized), transform var(--md-dur-medium) var(--md-easing-emphasized); }
html.js .reveal.active { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Focus rings (Material) */
:focus-visible { outline: 3px solid var(--md-sys-color-primary); outline-offset: 2px; }

/* ── Identity / nav ── */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.monogram {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-primary);
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: 0.02em;
  border: 1px solid var(--md-sys-color-outline);
  transition: color var(--md-dur-short) var(--md-easing-standard), transform var(--md-dur-short) var(--md-easing-standard);
}
.brand:hover .monogram { color: var(--md-sys-color-on-surface); transform: translateY(-1px); }

/* ── Transitional Material overrides (supersede the legacy inline design) ── */

/* Material surface base */
body { background: var(--md-sys-color-surface) !important; color: var(--md-sys-color-on-surface) !important; }

/* Kill the gradient-on-last-word tell: headings render solid */
.gradient-text {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: inherit !important;
}

/* Nav links: body font + tonal (was monospace) */
.nav-link {
  font-family: var(--font-body) !important;
  font-size: 0.95rem;
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: none;
  transition: color var(--md-dur-short) var(--md-easing-standard);
}
.nav-link:hover, .nav-link.active { color: var(--md-sys-color-on-surface); }

/* Top-app-bar shell */
header > nav {
  background: color-mix(in srgb, var(--md-sys-color-surface) 80%, transparent) !important;
  border: 1px solid var(--md-sys-color-outline) !important;
  backdrop-filter: blur(10px);
}

/* Buttons: solid Material primary, no gradient halo */
.btn-gradient, .btn-primary {
  background: var(--md-sys-color-primary) !important;
  color: var(--md-sys-color-on-primary) !important;
  border: none !important;
  border-radius: 999px;
  font-weight: 600;
}
.btn-gradient::after, .btn-gradient::before { display: none !important; }
.btn-outline {
  border: 1px solid var(--md-sys-color-outline) !important;
  color: var(--md-sys-color-on-surface) !important;
  background: transparent !important;
  border-radius: 999px;
}

/* Cards: tonal surfaces, not glass */
.card {
  background: var(--md-sys-color-surface-container) !important;
  border: 1px solid var(--md-sys-color-outline) !important;
  backdrop-filter: none !important;
  border-radius: 16px;
}
.card::before { display: none !important; }
.card:hover { border-color: color-mix(in srgb, var(--md-sys-color-primary) 45%, var(--md-sys-color-outline)) !important; }

/* Demote the "// LABEL" mono kicker */
.section-label {
  font-family: var(--font-mono);
  color: var(--md-sys-color-on-surface-variant);
  letter-spacing: 0.08em;
  opacity: 0.75;
}

/* Skill chips on tonal surface */
.skill-chip {
  background: var(--md-sys-color-surface-container-high) !important;
  border: 1px solid var(--md-sys-color-outline) !important;
  color: var(--md-sys-color-on-surface) !important;
}
.skill-chip:hover { border-color: var(--md-sys-color-primary) !important; color: var(--md-sys-color-primary) !important; }

/* Filter pills */
.filter-pill { font-family: var(--font-body) !important; border-color: var(--md-sys-color-outline) !important; color: var(--md-sys-color-on-surface-variant) !important; }
.filter-pill:hover, .filter-pill.active { border-color: var(--md-sys-color-primary) !important; color: var(--md-sys-color-on-primary) !important; background: var(--md-sys-color-primary) !important; }

/* Timeline: drop the pulsing-dot gimmick, tonal rail */
.timeline-line { background: var(--md-sys-color-outline) !important; }
.timeline-dot { background: var(--md-sys-color-primary) !important; box-shadow: none !important; animation: none !important; }

/* Remove the dot-grid background tell */
body::before { display: none !important; }

/* Compress section rhythm (was py-24 stacked → ~13rem dead bands) */
section[id] { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
#home { padding-top: 6rem !important; padding-bottom: 3rem !important; min-height: auto !important; }

/* Remove floating diamond dividers */
.section-divider { display: none !important; }

/* Account for fixed header when jumping to #anchors */
section[id] { scroll-margin-top: 90px; }

/* About portrait — circular avatar */
.about-portrait {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--md-sys-color-outline);
  display: block;
}

/* Unify all incidental accents to jade; lime survives ONLY in .text-signal */
:root {
  --primary: #6EE7A8;
  --accent: #6EE7A8;
  --primary-rgb: 110, 231, 168;
  --accent-rgb: 110, 231, 168;
  --gradient-start: #6EE7A8;
  --gradient-mid: #34D399;
  --gradient-end: #6EE7A8;
}
:root[data-theme="light"] {
  --primary: #1F8A5B;
  --accent: #1F8A5B;
  --primary-rgb: 31, 138, 91;
  --accent-rgb: 31, 138, 91;
  --gradient-start: #1F8A5B;
  --gradient-mid: #1F8A5B;
  --gradient-end: #1F8A5B;
}