/* =====================================================================
   pickles design tokens (パステルダークトーン)
   仕様書 §1.2 / §1.3 / §1.4 + ユーザー指示で font を Noto Sans JP 統一
   ===================================================================== */

:root {
  /* === Surface (背景階層) === */
  --bg-base:        #0E1612;
  --bg-elevated:    #161E1B;
  --bg-overlay:     #1F2723;
  --bg-paper:       #232B27;

  /* === Border === */
  --border-subtle:  #2A332E;
  --border-strong:  #3F4A43;

  /* === Text === */
  --text-primary:   #F0F5EE;
  --text-secondary: #B8C2BC;
  --text-muted:     #7A857F;
  --text-disabled:  #525B56;

  /* === Brand (pickles) === */
  --pickle-green:        #3E7D4F;
  --pickle-green-light:  #6FA37E;
  --pickle-green-glow:   #8FC79E;
  --pickle-green-soft:   rgba(111, 163, 126, 0.12);
  --pickle-green-deep:   #2F5E3B;

  --mustard:        #F5B544;
  --mustard-light:  #FFC966;
  --mustard-soft:   rgba(245, 181, 68, 0.15);
  --mustard-deep:   #C68A1F;

  /* === Pastel Accents === */
  --pastel-mint:    #A8D8C0;
  --pastel-sky:     #A8C8E0;
  --pastel-coral:   #F5A296;
  --pastel-lilac:   #C8B8E0;

  /* === GLA Layer Colors === */
  --gla-gcd:        #5BA8CC;
  --gla-list:       #B8C2BC;
  --gla-gai:        #F5B544;

  /* === Status === */
  --danger:         #E08B7D;
  --danger-soft:    rgba(224, 139, 125, 0.12);
  --success:        #8FC79E;
  --info:           #A8C8E0;

  /* === Effects === */
  --glow-green-sm:  0 0 24px rgba(111, 163, 126, 0.25);
  --glow-green:     0 0 80px rgba(111, 163, 126, 0.18);
  --glow-green-lg:  0 0 140px rgba(111, 163, 126, 0.25);
  --glow-mustard-sm: 0 0 20px rgba(245, 181, 68, 0.30);
  --glow-mustard:   0 0 60px rgba(245, 181, 68, 0.22);
  --glow-mustard-lg: 0 0 120px rgba(245, 181, 68, 0.28);

  --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.20);
  --shadow-md:      0 8px 24px rgba(0, 0, 0, 0.30);
  --shadow-lg:      0 24px 60px rgba(0, 0, 0, 0.45);
  --shadow-xl:      0 40px 100px rgba(0, 0, 0, 0.55);

  /* === Mesh / Decorative gradients === */
  --mesh-hero:
    radial-gradient(ellipse 80% 60% at 80% 20%, rgba(143, 199, 158, 0.22), transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(245, 181, 68, 0.15), transparent 60%),
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(168, 200, 224, 0.10), transparent 70%);
  --mesh-cta:
    radial-gradient(ellipse 70% 60% at 10% 30%, rgba(143, 199, 158, 0.22), transparent 60%),
    radial-gradient(ellipse 60% 60% at 90% 80%, rgba(245, 181, 68, 0.25), transparent 60%);
  --mesh-soft:
    radial-gradient(ellipse 70% 50% at 100% 0%, rgba(111, 163, 126, 0.10), transparent 70%);

  /* === Typography (Noto Sans JP 統一) === */
  --font-display: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
  --font-body:    'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
  --font-mono:    'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

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

  --tracking-tight:   -0.025em;
  --tracking-snug:    -0.012em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.18em;

  --leading-tight:    1.15;
  --leading-snug:     1.4;
  --leading-relaxed:  1.85;

  /* === Layout & Spacing === */
  --container-max:    1280px;
  --container-px-mobile:   24px;
  --container-px-desktop:  48px;

  --space-section-y-mobile:   80px;
  --space-section-y-desktop: 140px;

  --radius-pill: 999px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-3xl:  40px;

  /* === Motion === */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 280ms;
  --dur-slow: 600ms;

  /* === Header === */
  --header-h: 72px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}