/**
 * StepWell Design System
 * Based on UI Design Spec v1.0
 * Figma Level Design Tokens
 */

/* ============================================
   IMPORTS
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600&display=swap');

/* ============================================
   ROOT VARIABLES
   ============================================ */
:root {
  /* ========== SPACING (8px Base Unit) ========== */
  --space-0-5: 4px;   /* 微調整 / 最小余白 */
  --space-1: 8px;     /* リスト間隔 / 密な配置 */
  --space-1-5: 12px;  /* 標準的な要素間隔 */
  --space-2: 16px;    /* カード内余白 / モバイル画面端 */
  --space-3: 24px;    /* セクション間隔 / PC画面端 */
  --space-4: 32px;    /* 大きな区切り */
  --space-6: 48px;    /* 超大きな区切り */
  --space-8: 64px;    /* 特大の区切り */

  /* ========== TYPOGRAPHY ========== */
  --font-family: 'Noto Sans JP', sans-serif, system-ui;
  
  /* Font Sizes */
  --font-size-h1: 32px;
  --font-size-h2: 24px;
  --font-size-h3: 20px;
  --font-size-body-l: 16px;
  --font-size-body-m: 14px;
  --font-size-label: 14px;
  --font-size-caption: 12px;
  --font-size-label-s: 12px;
  
  /* Line Heights */
  --line-height-h1: 40px;
  --line-height-h2: 32px;
  --line-height-h3: 28px;
  --line-height-body-l: 24px;
  --line-height-body-m: 20px;
  --line-height-label: 20px;
  --line-height-caption: 18px;
  --line-height-label-s: 18px;
  
  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* ========== COLORS - BASE ========== */
  /* Backgrounds */
  --color-bg-default: #FFFFFF;
  --color-bg-subtle: #F9FAFB;
  --color-bg-raised: #FFFFFF;
  
  /* Borders */
  --color-border-default: #E5E7EB;
  --color-border-strong: #D1D5DB;
  
  /* Overlay */
  --color-overlay-scrim: rgba(17, 24, 39, 0.48);
  
  /* Typography */
  --color-fg-primary: #111827;
  --color-fg-secondary: #4B5563;
  --color-fg-muted: #6B7280;
  --color-link-default: #2563EB;

  /* ========== COLORS - SEMANTIC ========== */
  /* Project Suggestion - Red (Option A) */
  --color-suggest-red-accent: #DC2626;
  --color-suggest-red-bg: #FEF2F2;
  --color-suggest-red-border: #EF4444;
  --color-suggest-red-on-accent: #FFFFFF;
  
  /* Project Suggestion - Amber (Option B) */
  --color-suggest-amber-accent: #D97706;
  --color-suggest-amber-bg: #FFFBEB;
  --color-suggest-amber-border: #F59E0B;
  --color-suggest-amber-on-accent: #111827;
  
  /* Expired Notification */
  --color-expired-bg: #F3F4F6;
  --color-expired-alt-bg: #E5E7EB;
  --color-expired-text: #4B5563;

  /* ========== COLORS - ZONE PILLS ========== */
  /* Theme Pills - Indigo */
  --color-pill-theme-bg: #EEF2FF;
  --color-pill-theme-fg: #3730A3;
  --color-pill-theme-border: #C7D2FE;
  
  /* Scope Pills - Emerald */
  --color-pill-scope-bg: #ECFDF5;
  --color-pill-scope-fg: #065F46;
  --color-pill-scope-border: #A7F3D0;
  
  /* Phase Pills - Blue */
  --color-pill-phase-bg: #EFF6FF;
  --color-pill-phase-fg: #1D4ED8;
  --color-pill-phase-border: #BFDBFE;

  /* ========== COLORS - BUTTONS ========== */
  /* Primary - Indigo */
  --color-btn-primary-bg: #4F46E5;
  --color-btn-primary-hover: #4338CA;
  --color-btn-primary-active: #3730A3;
  --color-btn-primary-text: #FFFFFF;
  
  /* Secondary - Gray */
  --color-btn-secondary-bg: #FFFFFF;
  --color-btn-secondary-border: #D1D5DB;
  --color-btn-secondary-hover-bg: #F9FAFB;
  --color-btn-secondary-text: #374151;
  
  /* Tertiary - Ghost */
  --color-btn-tertiary-text: #6B7280;
  --color-btn-tertiary-hover-bg: #F3F4F6;

  /* ========== RADIUS ========== */
  --radius-xs: 6px;   /* Badge / Tag */
  --radius-sm: 8px;   /* Button / Input */
  --radius-md: 12px;  /* Card / Container (Primary) */
  --radius-lg: 16px;  /* Modal / Large Panel */
  --radius-full: 9999px; /* Full Round */

  /* ========== SHADOWS ========== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.12);

  /* ========== Z-INDEX ========== */
  --z-base: 0;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-modal: 1000;
  --z-toast: 2000;

  /* ========== TRANSITIONS ========== */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
}

/* ============================================
   BASE STYLES
   ============================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-body-l);
  line-height: var(--line-height-body-l);
  font-weight: var(--font-weight-regular);
  color: var(--color-fg-primary);
  background-color: var(--color-bg-subtle);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   TYPOGRAPHY UTILITIES
   ============================================ */
.text-h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  font-weight: var(--font-weight-semibold);
}

.text-h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-semibold);
}

.text-h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-semibold);
}

.text-body-l {
  font-size: var(--font-size-body-l);
  line-height: var(--line-height-body-l);
  font-weight: var(--font-weight-regular);
}

.text-body-m {
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
  font-weight: var(--font-weight-regular);
}

.text-label {
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  font-weight: var(--font-weight-medium);
}

.text-caption {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  font-weight: var(--font-weight-regular);
}

.text-label-s {
  font-size: var(--font-size-label-s);
  line-height: var(--line-height-label-s);
  font-weight: var(--font-weight-medium);
}

/* Color Utilities */
.text-primary { color: var(--color-fg-primary); }
.text-secondary { color: var(--color-fg-secondary); }
.text-muted { color: var(--color-fg-muted); }

/* ============================================
   SPACING UTILITIES
   ============================================ */
.gap-0-5 { gap: var(--space-0-5); }
.gap-1 { gap: var(--space-1); }
.gap-1-5 { gap: var(--space-1-5); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* Padding */
.p-1 { padding: var(--space-1); }
.p-1-5 { padding: var(--space-1-5); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }

/* Margin */
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }

/* ============================================
   LAYOUT UTILITIES
   ============================================ */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-1 { flex: 1; }

/* ============================================
   COMMON STYLES
   ============================================ */
.card {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-subtle);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-default);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-strong);
}