/* ===========================================================
   AI Booth Studio — Design Tokens & Base
   =========================================================== */

:root {
  /* Brand palette ---------------------------------------- */
  --c-brand:        #1E3AFF;   /* logo blue (primary) */
  --c-brand-deep:   #0D1FCC;   /* hover / pressed */
  --c-brand-soft:   #E8EBFF;   /* tint backgrounds */
  --c-brand-line:   #C7CEFF;   /* subtle line on brand surface */

  --c-ink:          #0E1424;   /* primary text (deep ink) */
  --c-ink-2:        #2A3344;   /* secondary text */
  --c-ink-3:        #5B6478;   /* tertiary / muted */
  --c-line:         rgba(14, 20, 36, 0.08);
  --c-line-strong:  rgba(14, 20, 36, 0.16);

  --c-bg:           #FFFFFF;
  --c-bg-soft:      #F5F7FB;
  --c-bg-tint:      #EEF1F8;

  --c-accent:       #C9A86A;   /* gold — secondary, used sparingly */

  /* Shadows ---------------------------------------------- */
  --sh-1:  0 1px 2px rgba(14, 20, 36, .04), 0 1px 1px rgba(14, 20, 36, .03);
  --sh-2:  0 6px 16px rgba(14, 20, 36, .06), 0 2px 4px rgba(14, 20, 36, .04);
  --sh-3:  0 18px 40px rgba(14, 20, 36, .08), 0 6px 12px rgba(14, 20, 36, .04);
  --sh-brand: 0 16px 36px rgba(30, 58, 255, .18);

  /* Radius ----------------------------------------------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* Typography ------------------------------------------- */
  --ff-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic UI",
           "Meiryo", sans-serif;
  --ff-en: "Inter", "Plus Jakarta Sans", system-ui, -apple-system,
           "Segoe UI", Roboto, sans-serif;
  --ff: var(--ff-en), var(--ff-jp);

  /* Layout ----------------------------------------------- */
  --container: 1180px;
  --gutter: clamp(20px, 4vw, 40px);

  /* Motion ----------------------------------------------- */
  --t-fast: 150ms ease;
  --t-base: 220ms ease;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  overflow-x: hidden;
}

body {
  width: 100%;
  position: relative;
  font-family: var(--ff);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt" 1;
}

/* Numerals & latin look more refined w/ tabular figures off,
   but keep proportional for headlines */

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--t-fast), opacity var(--t-fast);
}
a:hover { opacity: .82; }

img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Section containers --------------------------------------- */
.header-container,
main,
footer {
  width: 100%;
  margin-inline: auto;
}

.header-container {
  padding-inline: var(--gutter);
}

/* Body lock during drawer open */
body.no-scroll {
  overflow: hidden;
  height: 100vh;
}

/* Utility -------------------------------------------------- */
.is-md-show { display: none; }
@media (max-width: 768px) {
  .is-md-hide { display: none; }
  .is-md-show { display: block; }
}

/* Selection accent */
::selection {
  background: var(--c-brand);
  color: #fff;
}