/* ============================================================
   日本AIセンター株式会社 — Design Tokens
   Colors, Typography, Spacing
   ============================================================ */

/* Fonts: loaded via Google Fonts in each HTML doc
   @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&family=Space+Grotesk:wght@400;500;600&display=swap');
*/

:root {
  /* ----- COLORS ---------------------------------------------- */

  /* Primary — Purple */
  --purple: #7C5CFF;
  --purple-dark: #6B48F0;
  --purple-light: #E8E0FF;

  /* Neutrals */
  --bg-base: #FAF8F5;        /* warm off-white */
  --bg-section: #FFFFFF;
  --bg-dark: #1A1530;        /* purple-tinted black */
  --text-primary: #1A1A1A;
  --text-secondary: #6B6B6B;
  --border: #E5E5E5;

  /* Accent */
  --gradient-accent: linear-gradient(135deg, #7C5CFF 0%, #E8E0FF 100%);

  /* Semantic aliases */
  --fg1: var(--text-primary);
  --fg2: var(--text-secondary);
  --bg1: var(--bg-base);
  --bg2: var(--bg-section);
  --accent: var(--purple);

  /* ----- TYPE ------------------------------------------------ */
  --font-serif: "Noto Serif JP", "Playfair Display", "Times New Roman", serif;
  --font-sans:  "Noto Sans JP", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono-label: "Space Grotesk", "Inter", system-ui, sans-serif;

  /* Type scale */
  --fs-display: 72px;     --lh-display: 1.1;
  --fs-h2:      48px;     --lh-h2:      1.2;
  --fs-h3:      32px;     --lh-h3:      1.3;
  --fs-h4:      24px;     --lh-h4:      1.4;
  --fs-body-lg: 18px;     --lh-body-lg: 1.7;
  --fs-body:    16px;     --lh-body:    1.7;
  --fs-caption: 14px;     --lh-caption: 1.5;
  --fs-label:   12px;     --ls-label:   0.15em;

  /* ----- SPACING (8px grid) ---------------------------------- */
  --s-xs:  4px;
  --s-sm:  8px;
  --s-md:  16px;
  --s-lg:  24px;
  --s-xl:  48px;
  --s-2xl: 96px;
  --s-3xl: 160px;

  --content-max: 1280px;
  --content-pad-mobile:  24px;
  --content-pad-desktop: 48px;

  /* ----- RADII / SHADOWS ------------------------------------- */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-card:       0 4px 20px rgba(0,0,0,0.05);
  --shadow-card-hover: 0 12px 32px rgba(124,92,255,0.12);
  --shadow-nav:        0 2px 16px rgba(0,0,0,0.04);

  /* ----- GLASS (Liquid Glass design language) ---------------- */
  --glass-bg:        rgba(255,255,255,0.55);
  --glass-bg-strong: rgba(255,255,255,0.68);
  --glass-blur:      blur(22px) saturate(180%);
  --glass-border:    1px solid rgba(255,255,255,0.7);
  --glass-shadow:        0 8px 28px rgba(31,38,135,0.10), inset 0 1px 0 rgba(255,255,255,0.75);
  --glass-shadow-hover:  0 14px 40px rgba(31,38,135,0.16), inset 0 1px 0 rgba(255,255,255,0.85);

  /* ----- MOTION ---------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-med:  320ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

.ds-display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  color: var(--fg1);
  letter-spacing: -0.01em;
}
.ds-display em { font-style: italic; font-family: "Playfair Display", var(--font-serif); }

.ds-h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--fg1);
  letter-spacing: -0.005em;
}

.ds-h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--fg1);
}

.ds-h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  color: var(--fg1);
}

.ds-body-lg {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--fg1);
}

.ds-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg1);
}

.ds-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--fg2);
}

.ds-label {
  font-family: var(--font-mono-label);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg2);
}

.ds-label--accent { color: var(--purple); }

/* Label with em-dash separators — common motif */
.ds-label--dashed::before,
.ds-label--dashed::after {
  content: "—";
  display: inline-block;
  margin: 0 0.6em;
  color: currentColor;
  opacity: 0.6;
}

/* ============================================================
   BASE RESET-ish
   ============================================================ */
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-base);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
}
* { box-sizing: border-box; }
img, svg, video { max-width: 100%; }