/*────────────────────────────────────────────────────────────────────────
  spwashi · 2025-06 CSS reset & theme
  • fluid type + spacing
  • container-driven nav
  • light / dark auto
────────────────────────────────────────────────────────────────────────*/

/* ① Theme tokens */
:root {
  /* colors */
  --bg-page:      #e7f1f2;
  --bg-surface:   #fff;
  --fg-accent:    #f43f5e;
  --fg-muted:     #64748b;
  --fg-primary:   #0f766e;
  --fg-text:      #1e1f20;
  --shadow-1:     0 4px 12px rgba(0,0,0,.08);

  /* motion */
  --dur:          .2s;
  --ease:         cubic-bezier(.4,0,.2,1);

  /* radius & spacing */
  --r:            .5rem;
  --space-1:      .5rem;
  --space-2:      1rem;
  --space-3:      2rem;

  /* type scale */
  --step-0:       clamp(.9rem, .82rem + .35vw, 1rem);
  --step-1:       clamp(1.2rem, 1rem  + .6vw,  1.4rem);
  --step-2:       clamp(1.6rem, 1.3rem + .9vw, 2rem);
  --step-3:       clamp(2.2rem, 1.7rem + 1.2vw,2.8rem);
}

html, body {
  margin:      0 auto;
  max-width:   900px;
  width:       100%;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-page:    #101214;
    --bg-surface: #1a1d1f;
    --fg-text:    #e5e7eb;
    --shadow-1:   0 4px 12px rgba(0,0,0,.45);
  }
}


/* ② Base reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin:      0;
  padding:     0;
}

html {
  scroll-behavior: smooth;
}

body {
  background:      var(--bg-page);
  color:           var(--fg-text);
  display:         flex;
  flex-direction:  column;
  font:            var(--step-0)/1.6 "Inter var", system-ui, sans-serif;
  justify-content: center;
  padding:         var(--space-3) var(--space-2);
}

main {
  background:      var(--bg-surface);
  border-radius:   var(--r);
  box-shadow:      var(--shadow-1);
  display:         flex;
  flex-direction:  column;
  gap:             var(--space-3);
  padding:         var(--space-3);
  width:           min(72ch, 90vw);
}


/* ③ Typography helpers */
h1, h2, h3 {
  font-weight: 600;
  letter-spacing: .01em;
}

h1 {
  font-size:    var(--step-3);
  margin:       1rem;
  position:     relative;
  text-align:   center;
}
h1::after {
  background: linear-gradient(90deg, var(--fg-primary), var(--fg-accent));
  border-radius: var(--r);
  content:     "";
  display:     block;
  height:      3px;
  margin:      .5rem auto 0;
  width:       4rem;
}

h2 {
  color:           var(--fg-primary);
  font-size:       var(--step-1);
  text-transform:  uppercase;
}

h3 {
  font-size:      var(--step-0);
  margin-bottom:  var(--space-1);
}


/* ④ Navigation card grid (container-query driven) */
nav {
  container-type: inline-size;
  display:        flex;
  flex-wrap:      wrap;
  gap:            var(--space-2);
  margin-bottom:  1rem;
}

nav section {
  background:        rgba(255,255,255,.8);
  backdrop-filter:   blur(6px);
  border-radius:     var(--r);
  box-shadow:        var(--shadow-1);
  flex:              1 1 12rem;
  padding:           var(--space-2);
  transition:        transform var(--dur) var(--ease);
}

nav section:hover {
  transform: translateY(-4px);
}

@container (min-width: 36rem) {
  nav {
    display:             grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem,1fr));
  }
}

@container (max-width: 22rem) {
  nav section {
    flex: 1 1 100%;
  }
}


/* ⑤ Link styles */
a {
  color:             var(--fg-primary);
  display:           inline-block;
  padding-block:     .15em;
  position:          relative;
  text-decoration:   none;
  transition:        color var(--dur) var(--ease),
                     transform var(--dur) var(--ease);
}

a::after {
  background:       var(--fg-accent);
  bottom:           -2px;
  content:          "";
  height:           2px;
  left:             0;
  position:         absolute;
  transform:        scaleX(0);
  transform-origin: right;
  transition:       transform .3s var(--ease);
  width:            100%;
}

a:hover,
a:focus-visible {
  color:      var(--fg-accent);
  transform:  rotateY(-6deg);
}

a:hover::after,
a:focus-visible::after {
  transform:        scaleX(1);
  transform-origin: left;
}


/* ⑥ Code / Spw blocks */
pre,
script[type="application/spw"] {
  background:       var(--bg-surface);
  border:           1px solid var(--fg-muted);
  border-left:      4px solid var(--fg-primary);
  border-radius:    var(--r);
  font:             .85rem/1.5 Menlo, Consolas, monospace;
  max-height:       60vh;
  overflow:         auto;
  padding:          var(--space-2);
  scrollbar-width:  thin;
  scrollbar-color:  var(--fg-muted) transparent;
}

pre::-webkit-scrollbar {
  height: 8px;
}

pre::-webkit-scrollbar-thumb {
  background:     var(--fg-muted);
  border-radius:  4px;
}


/* ⑦ Utility classes */
.btn {
  background:  var(--fg-primary);
  border-radius: var(--r);
  color:       #fff;
  display:     inline-block;
  font-weight: 600;
  padding:     .5rem 1rem;
  transition:  filter var(--dur) var(--ease),
               transform var(--dur) var(--ease);
}

.btn:hover,
.btn:focus-visible {
  filter:     brightness(1.1);
  transform:  translateY(-2px);
}

.hidden {
  display: none !important;
}


/* ⑧ Responsive tweaks */
@media (max-width: 480px) {
  h1 {
    font-size: var(--step-2);
  }
  main {
    padding: var(--space-2);
  }
}

@media (min-width: 64rem) {
  main {
    padding: var(--space-3) var(--space-3) var(--space-4);
  }
}


/* Base list reset */
ul {
  list-style: none;
}

li {
  display:      inline-block;
  margin:       .5rem;
  outline:      thin solid #ccc;
  padding:      .5rem;
}
li:hover {
  background: var(--bg-page);
}