/* ==========================================================================
   base.css — CSS Reset, Custom Properties, Typography, Utilities
   Lead lea Corporate Site Redesign
   ========================================================================== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Noto+Sans+JP:wght@300;400;500;600;700;900&display=swap');

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {
  /* Base colors */
  --color-bg-primary: #0a0a0f;
  --color-bg-secondary: #12121a;
  --color-bg-tertiary: #1a1a2e;

  /* Text colors */
  --color-text-primary: #e8e8f0;
  --color-text-secondary: #a0a0b8;
  --color-text-muted: #6a6a80;

  /* Accent colors (glow / CTA) */
  --color-accent-cyan: #00d4ff;
  --color-accent-magenta: #ff00aa;
  --color-accent-violet: #8b5cf6;

  /* Gradients */
  --gradient-accent: linear-gradient(135deg, #00d4ff, #8b5cf6);
  --gradient-glow: linear-gradient(135deg, #00d4ff33, #8b5cf633);
  --gradient-section: linear-gradient(180deg, #0a0a0f, #12121a);

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-blur: 20px;

  /* Glow */
  --glow-cyan: 0 0 20px rgba(0, 212, 255, 0.3);
  --glow-accent: 0 0 30px rgba(0, 212, 255, 0.2), 0 0 60px rgba(139, 92, 246, 0.1);

  /* Spacing */
  --section-gap: clamp(80px, 10vw, 120px);
  --container-max: 1200px;
  --container-padding: clamp(16px, 4vw, 32px);

  /* Typography */
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Noto Sans JP', 'Inter', sans-serif;
  --font-size-hero: clamp(2.5rem, 6vw, 4.5rem);
  --font-size-h2: clamp(1.8rem, 4vw, 2.5rem);
  --font-size-h3: clamp(1.3rem, 2.5vw, 1.6rem);
  --font-size-body: clamp(0.95rem, 1.5vw, 1.1rem);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.4s ease;
  --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ==========================================================================
   CSS Reset
   ========================================================================== */

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

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

body {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: 1.7;
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-primary);
}

h1 {
  font-size: var(--font-size-hero);
  font-weight: 800;
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--font-size-h2);
  font-weight: 700;
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--font-size-h3);
  font-weight: 600;
}

h4 {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-weight: 600;
}

h5 {
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  font-weight: 600;
}

h6 {
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  font-weight: 600;
}

p {
  color: var(--color-text-secondary);
  margin-bottom: 1em;
}

p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Utility: Container
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}