/* ═══════════════════════════════════════════════════════════
   tokens.css  —  QIM Academy
   Layer 1: Design tokens (CSS custom properties) + global reset
   Edit this file first. Never hardcode colours or radii elsewhere.
════════════════════════════════════════════════════════════ */

:root {
  --white:        #FFFFFF;
  --black:        #000000;
  --muted:        #6B6B6B;
  --border:       #E5E5E5;
  --border-dark:  #333333;
  --bg-surface:   #F7F7F7;
  --bg-dark:      #0A0A0A;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-pill:  999px;
  --transition:   0.22s cubic-bezier(0.22,1,0.36,1);
  --nav-h:        72px;
  --announce-h:   36px;
  --header-h:     calc(var(--announce-h) + var(--nav-h));
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
body{
  font-family:"IBM Plex Sans JP",sans-serif;
  font-weight:300;
  background:var(--white);
  color:var(--black);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,a,button,input,textarea,label,li,span{
  font-family:"IBM Plex Sans JP",sans-serif;
  font-weight:300;
  letter-spacing:0;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.container{width:min(1200px,calc(100% - 48px));margin:0 auto}