/*
 Theme Name:   Astra Child - Cocoico
 Theme URI:    https://developer.wordpress.org/themes/advanced-topics/child-themes/
 Description:  Astra child theme for the Cocoico restaurant portal site.
 Author:       Fukuda Eito
 Template:     astra
 Version:      1.0.0
 Text Domain:  astra-child
*/

/* ==========================================================================
   Design Tokens (synced with design_system.md)
   ========================================================================== */

:root {
  /* ========================================
     カラーパレット
  ======================================== */

  /* Primary（ブランドカラー：深みのあるテラコッタ）*/
  --color-primary-50:  #fdf4f0;
  --color-primary-100: #fae5db;
  --color-primary-200: #f4c8b2;
  --color-primary-300: #eca07e;
  --color-primary-400: #e27a50;
  --color-primary-500: #d4572a;
  --color-primary-600: #b8421e;
  --color-primary-700: #93321a;
  --color-primary-800: #772a1a;
  --color-primary-900: #62251a;

  /* Neutral（テキスト・背景）*/
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #fafaf9;
  --color-neutral-100: #f5f5f0;
  --color-neutral-200: #e8e8e2;
  --color-neutral-300: #d0d0c8;
  --color-neutral-400: #a8a8a0;
  --color-neutral-500: #787870;
  --color-neutral-600: #545450;
  --color-neutral-700: #38383a;
  --color-neutral-800: #242428;
  --color-neutral-900: #141416;

  /* Semantic（意味を持つ色）*/
  --color-success: #2d6a4f;
  --color-warning: #d4a017;
  --color-error:   #c0392b;
  --color-info:    #2471a3;

  /* ========================================
     タイポグラフィ
  ======================================== */

  --font-sans:  'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --font-mono:  'JetBrains Mono', 'Menlo', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  1.875rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;
  --text-5xl:  3.75rem;

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  --leading-tight:  1.4;
  --leading-normal: 1.7;
  --leading-loose:  2.0;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.08em;

  /* ========================================
     スペーシング（8px基準グリッド）
  ======================================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ========================================
     レイアウト
  ======================================== */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  /* ========================================
     ボーダー
  ======================================== */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;
  --radius-2xl:  24px;

  --border-width: 1px;
  --border-color: var(--color-neutral-200);

  /* ========================================
     シャドウ（控えめな、自然な影）
  ======================================== */
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg:    0 12px 32px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* ========================================
     トランジション
  ======================================== */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ========================================
     z-index
  ======================================== */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-neutral-700);
  background-color: var(--color-neutral-50);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-neutral-900);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

h1 {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
}

h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
}

h3 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
}

a {
  color: var(--color-primary-500);
  transition: color var(--transition-base);
}

a:hover {
  color: var(--color-primary-600);
}

/* ==========================================================================
   Components: Store Card
   ========================================================================== */

.store-card {
  background: var(--color-neutral-0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  border: var(--border-width) solid var(--color-neutral-200);
}

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

.store-card__image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

.store-card__body {
  padding: var(--space-5) var(--space-6);
}

.store-card__name {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-900);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-2);
}

.store-card__meta {
  font-size: var(--text-sm);
  color: var(--color-neutral-600);
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.store-card__tag {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  background: var(--color-primary-50);
  color: var(--color-primary-600);
  letter-spacing: var(--tracking-wide);
}

/* ==========================================================================
   Components: Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-wide);
  transition: all var(--transition-base);
  cursor: pointer;
  border: none;
  text-decoration: none;
}

.btn-primary {
  background: var(--color-primary-500);
  color: var(--color-neutral-0);
}

.btn-primary:hover {
  background: var(--color-primary-600);
}

.btn-outline {
  background: transparent;
  border: var(--border-width) solid var(--color-primary-500);
  color: var(--color-primary-500);
}

.btn-outline:hover {
  background: var(--color-primary-50);
}