/* ============================================
   JIAIN Design System - CSS Variables
   ============================================ */

:root {
  /* Primary Colors - Moss Green */
  --color-primary-50:  #f0f7f0;
  --color-primary-100: #daeeda;
  --color-primary-200: #b5ddb5;
  --color-primary-300: #85c285;
  --color-primary-400: #5aa55a;
  --color-primary-500: #3d8c3d;
  --color-primary-600: #2e7230;
  --color-primary-700: #265a28;
  --color-primary-800: #1f4720;
  --color-primary-900: #18381a;

  /* Accent Colors - Terracotta */
  --color-accent-50:  #fdf4f0;
  --color-accent-100: #fae3d8;
  --color-accent-200: #f5c4aa;
  --color-accent-300: #ee9f74;
  --color-accent-400: #e67a46;
  --color-accent-500: #d45f28;
  --color-accent-600: #b54d1e;
  --color-accent-700: #923c17;
  --color-accent-800: #712e12;
  --color-accent-900: #55220d;

  /* Neutral Colors - Warm Cream */
  --color-neutral-50:  #faf9f7;
  --color-neutral-100: #f4f1ec;
  --color-neutral-200: #e8e2d9;
  --color-neutral-300: #d5ccbf;
  --color-neutral-400: #b8ac9a;
  --color-neutral-500: #9a8e7c;
  --color-neutral-600: #7d7265;
  --color-neutral-700: #625a4e;
  --color-neutral-800: #47403a;
  --color-neutral-900: #2e2a25;

  /* Semantic Colors */
  --color-success: #4caf77;
  --color-warning: #f5a623;
  --color-error:   #e05252;
  --color-info:    #5b9bd5;

  /* Role Colors */
  --color-role-facility: #3d8c3d;   /* A型事業所 - Moss */
  --color-role-company:  #5b9bd5;   /* 企業 - Blue */
  --color-role-worker:   #d45f28;   /* 就労者 - Terracotta */
  --color-role-family:   #9c6db5;   /* 家族 - Purple */

  /* Typography */
  --font-family-base: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
  --font-size-3xl:  1.875rem;
  --font-size-4xl:  2.25rem;

  /* Spacing */
  --spacing-1:  0.25rem;
  --spacing-2:  0.5rem;
  --spacing-3:  0.75rem;
  --spacing-4:  1rem;
  --spacing-5:  1.25rem;
  --spacing-6:  1.5rem;
  --spacing-8:  2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;

  /* Border Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-xl:  0 16px 40px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.08);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* Layout */
  --sidebar-width: 240px;
  --header-height: 64px;
  --content-max-width: 1200px;
}