/*
  NOGUEM — design system
  Brand direction: retain the confident blue identity; refine it with deep ink,
  soft slate neutrals, clearer typography, and consistent spacing and controls.
  Beginner edits: change the named tokens below; the components inherit them.
*/
:root,
html[data-theme="light"] {
  color-scheme: light;
  --color-primary: #172B4D;
  --color-secondary: #52647A;
  --color-accent: #2457C5;
  --color-accent-hover: #1D48A5;
  --color-highlight: #B8790A;
  --color-success: #26734D;
  --color-danger: #B5473C;
  --color-background: #F6F8FC;
  --color-surface: #FFFFFF;
  --color-surface-muted: #EEF2F8;
  --color-border: #DCE4EF;
  --color-text: #18263D;
  --color-text-muted: #526176;
  --color-text-subtle: #64748B;
  --focus-ring: rgba(36, 87, 197, .3);

  --bg: var(--color-background);
  --bg2: #F0F4F9;
  --bg3: #E9EFF7;
  --surface: var(--color-surface);
  --surface2: var(--color-surface-muted);
  --cyan: var(--color-accent);
  --cyan-dim: rgba(36, 87, 197, .08);
  --cyan-glow: rgba(36, 87, 197, .16);
  --green: var(--color-success);
  --green-dim: rgba(38, 115, 77, .08);
  --amber: var(--color-highlight);
  --text: var(--color-text);
  --text2: var(--color-text-muted);
  --text3: var(--color-text-subtle);
  --border: rgba(23, 43, 77, .13);
  --border2: rgba(36, 87, 197, .24);
  --nav-bg: rgba(255, 255, 255, .94);

  --font-display: 'Archivo', sans-serif;
  --font-body: 'Space Grotesk', sans-serif;
  --font-utility: 'JetBrains Mono', monospace;

  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6rem;
  --radius-control: .625rem;
  --radius-card: 1rem;
  --radius-panel: 1.25rem;
  --shadow-card: 0 12px 32px rgba(23, 43, 77, .07);
  --shadow-raised: 0 18px 42px rgba(23, 43, 77, .12);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: #E8EFFA;
  --color-secondary: #B4C2D6;
  --color-accent: #83A9FF;
  --color-accent-hover: #A2BCFF;
  --color-highlight: #E6B867;
  --color-success: #75C69A;
  --color-danger: #F08C80;
  --color-background: #0C1422;
  --color-surface: #121D2E;
  --color-surface-muted: #19263A;
  --color-border: #2A3A52;
  --color-text: #E8EFFA;
  --color-text-muted: #B4C2D6;
  --color-text-subtle: #92A3BC;
  --focus-ring: rgba(131, 169, 255, .4);

  --bg: #0C1422;
  --bg2: #101A2B;
  --bg3: #152136;
  --surface: #121D2E;
  --surface2: #19263A;
  --cyan: #83A9FF;
  --cyan-dim: rgba(131, 169, 255, .12);
  --cyan-glow: rgba(131, 169, 255, .2);
  --green: #75C69A;
  --green-dim: rgba(117, 198, 154, .12);
  --amber: #E6B867;
  --text: #E8EFFA;
  --text2: #B4C2D6;
  --text3: #92A3BC;
  --border: rgba(210, 225, 247, .14);
  --border2: rgba(131, 169, 255, .34);
  --nav-bg: rgba(12, 20, 34, .94);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, .18);
  --shadow-raised: 0 18px 42px rgba(0, 0, 0, .3);
}

html { scroll-padding-top: 5rem; }
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-background);
  caret-color: var(--color-accent);
  transition: color .2s ease, background-color .2s ease;
}
::selection { color: #fff; background: var(--color-accent); }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--color-background); }
::-webkit-scrollbar-thumb { background: #9AAAC0; border: 3px solid var(--color-background); border-radius: 99px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #536782; }

h1, h2, h3, h4,
.hero-name, .s-title, .proj-section-title, .stack-panel-title,
.proj-card h3, .p-card h3, .wf-detail h3, .nav-logo, .footer-logo {
  font-family: var(--font-display);
  letter-spacing: -.025em;
}
body, p, li, input, textarea, select, button { font-family: var(--font-body); }
code, pre, .hero-tag, .s-label, .about-subtitle, .proj-tag, .proj-num,
.form-group label, .footer-copy, .footer-note {
  font-family: var(--font-utility);
}

nav {
  padding: .9rem clamp(1.25rem, 5vw, 4.5rem);
  border-bottom-color: var(--color-border);
  box-shadow: 0 4px 20px rgba(23, 43, 77, .035);
}
.nav-links { gap: clamp(1rem, 2.5vw, 2.5rem); }
.nav-links a { font-size: .76rem; letter-spacing: .08em; }
.nav-links a:hover, .proj-link:hover { color: var(--color-accent-hover); }
.nav-logo { letter-spacing: .1em; }
.theme-toggle { width: 44px; height: 44px; border-radius: var(--radius-control); }
.lang-btn { min-width: 44px; min-height: 44px; padding: .55rem .75rem; border-radius: var(--radius-control); }

#hero { padding-inline: clamp(1.25rem, 5vw, 5rem); }
.hero-inner { gap: clamp(2rem, 5vw, 5rem); }
.hero-name { font-size: clamp(3rem, 7vw, 6rem); line-height: .98; letter-spacing: -.045em; }
.hero-tag, .page-hero-tag { letter-spacing: .16em; }
.hero-desc, .about-text p, .page-hero p { color: var(--color-text-muted); }
.hero-photo-frame::before { border-color: var(--border2); }
.hero-photo-frame::after { border-color: var(--color-border); }
.hero-stat { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.hero-corner-tag { border-radius: 999px; background: var(--color-highlight); color: #172B4D; }

.section { padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 5vw, 5rem); }
.s-label, .page-hero-tag, .about-subtitle { font-size: .7rem; letter-spacing: .16em; }
.s-title { letter-spacing: -.04em; line-height: 1.08; }
.s-line { width: 3.5rem; height: 3px; border-radius: 99px; }
.skills-grid { gap: 1rem; background: transparent; border: 0; }
.skill-card, .proj-card, .stack-panel, .wf-detail, .dc-panel, .p-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.skill-card { padding: clamp(1.5rem, 3vw, 2.5rem); }
.skill-icon-wrap, .cred-icon, .proj-img-icon, .section-icon, .p-card-icon {
  border-radius: var(--radius-control);
}
.projects-grid { gap: 1.25rem; }
.proj-card { box-shadow: none; }
.proj-card:hover, .p-card:hover { box-shadow: var(--shadow-raised); }
.proj-card, .skill-card, .p-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease; }
.proj-card:hover, .p-card:hover { transform: translateY(-3px); }
.proj-img { border-radius: var(--radius-card) var(--radius-card) 0 0; }
.proj-link { letter-spacing: .06em; }
.proj-tag { color: var(--color-success); letter-spacing: .08em; }
.about-grid { gap: clamp(2rem, 6vw, 6rem); }
.stack-panel { padding: clamp(1.5rem, 3vw, 2.25rem); }
.about-note { border-radius: 0 var(--radius-control) var(--radius-control) 0; }

.page-hero {
  padding: clamp(4rem, 8vw, 6.5rem) 1.5rem clamp(3.5rem, 6vw, 5rem);
  background: var(--color-surface-muted);
  border-color: var(--color-border);
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -.04em;
}
.proj-section { padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.25rem, 5vw, 3rem); }
.proj-section-header { gap: 1.25rem; margin-bottom: 2rem; }
.cards-grid { gap: 1rem; background: transparent; }
.p-card { padding: clamp(1.25rem, 2.5vw, 2rem); }
.p-card::before { display: none; }
.p-card:hover { border-color: var(--border2); }

.btn-primary, .btn-outline, .btn-submit, .back-link, .repo-link,
.faq-chip, .faq-btn, .wf-tab, .wf-pn button, .dc-wfbtn {
  min-height: 44px;
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .015em;
  text-transform: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn-primary, .btn-submit {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 5px 14px rgba(36, 87, 197, .18);
}
.btn-primary:hover, .btn-submit:hover { background: var(--color-accent-hover); box-shadow: 0 8px 20px rgba(36, 87, 197, .24); }
.btn-outline, .back-link, .repo-link {
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.btn-outline:hover, .back-link:hover, .repo-link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: var(--cyan-dim);
}
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .back-link,
html[data-theme="dark"] .repo-link { color: var(--color-text); }
.btn-submit:disabled { opacity: .65; cursor: wait; transform: none; box-shadow: none; }
.form-input {
  min-height: 48px;
  padding: .8rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.5;
}
.form-input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.form-group label { color: var(--color-text-muted); font-size: .68rem; letter-spacing: .08em; }
.faq-dropdown { border-color: var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-raised); }
.faq-chip { border-radius: 999px; }
.btn-primary:active, .btn-outline:active, .btn-submit:active, .back-link:active,
.repo-link:active, .faq-chip:active, .faq-btn:active, .wf-tab:active, .wf-pn button:active, .dc-wfbtn:active {
  transform: scale(.98);
  transition-duration: 100ms;
}

.legal { max-width: 68ch; margin: 0 auto; }
.legal h2 {
  margin: 2.5rem 0 .65rem;
  color: var(--color-text);
  font-size: 1.25rem;
  line-height: 1.25;
}
.legal h2:first-child { margin-top: 0; }
.legal p {
  margin: 0 0 1rem;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.legal a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.legal a:hover { color: var(--color-accent-hover); }
.legal .st { margin-top: 2.5rem; color: var(--color-text-subtle); font-size: .875rem; }
.legal-page .page-hero { padding-block: clamp(2.75rem, 5vw, 4rem); }
.legal-page .proj-section { padding-block: clamp(2.75rem, 5vw, 4rem); }
.legal-page .hero-links { margin-top: 1.75rem; }

@media (max-width: 900px) {
  nav { padding: .75rem 1.25rem; }
  .section { padding-block: 4.25rem; }
  .hero-photo-wrap { max-width: min(300px, 78vw); }
  .hero-stat { left: -8px; }
  .skills-grid, .projects-grid { gap: 1rem; }
  .nav-mobile-panel { border-color: var(--color-border); box-shadow: var(--shadow-card); }
}
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .hero-btns > * { min-height: 48px; }
  .page-hero h1 { font-size: clamp(2.15rem, 10vw, 3rem); }
  .proj-section-header { gap: .9rem; }
  .section-icon { width: 40px; height: 40px; }
  footer { gap: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal, .reveal.pending, .reveal-left, .hero-anim { opacity: 1 !important; transform: none !important; }
  .ticker-inner { animation: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  nav { background: var(--color-background); backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root, html[data-theme="light"] { --color-border: #526176; }
  html[data-theme="dark"] { --color-border: #A9B7CC; }
  nav, .skill-card, .proj-card, .stack-panel, .wf-detail, .dc-panel, .p-card,
  .btn-outline, .back-link, .repo-link, .form-input { border-color: var(--color-border); }
}