/* ==========================================================================
   CSS Variables
   ========================================================================== */

html {
  font-size: 70%;
  @media (max-width: 1600px) {
    font-size: 65%;
  }
  @media (max-width: 1400px) {
    font-size: 62.5%;
  }
  @media (max-width: 1100px) {
    font-size: 62.5%;
  }
  @media (max-width: 1000px) {
    font-size: 62.5%;
  }
  @media (max-width: 900px) {
    font-size: 60%;
  }
  @media (max-width: 800px) {
    font-size: 60%;
  }
  @media (max-width: 700px) {
    font-size: 57.5%;
  }
  @media (max-width: 600px) {
    font-size: 57.5%;
  }
  @media (max-width: 500px) {
    font-size: 57.5%;
  }
  @media (max-width: 400px) {
    font-size: 55%;
  }
}
:root {
  /* ==========================================================================
       Base Font Size (62.5% = 10px base for easy rem calculation)
       1rem = 10px, 1.6rem = 16px, 2.4rem = 24px, etc.
       ========================================================================== */

  /* Font Sizes
  base 1.6rem;
  fluid(clamp)
  SP:320px-768px;
  PC:1024px-1920px;
  */

  /* 意味的命名のスペース */
  --space-xxs: 0.4rem; /* 4px ベース */
  --space-xs: 0.8rem; /* 8px ベース */
  --space-sm: 1.2rem; /* 12px ベース */
  --space-base: 1.6rem; /* 16px ベース */
  --space-md: 2.4rem; /* 24px ベース */
  --space-lg: 3.2rem; /* 32px ベース */
  --space-xl: 4rem; /* 40px ベース */
  --space-2xl: 4.8rem; /* 48px ベース */
  --space-3xl: 6.4rem; /* 64px ベース */
  --space-4xl: 8rem; /* 80px ベース */
  --space-5xl: 9.6rem; /* 96px ベース */
  --space-6xl: 12.8rem; /* 128px ベース */

  /* フォントサイズ */
  --font-xxs: 1rem; /* 10px ベース */
  --font-xs: 1.2rem; /* 12px ベース */
  --font-sm: 1.4rem; /* 14px ベース */
  --font-base: 1.6rem; /* 16px ベース */
  --font-md: 1.8rem; /* 18px ベース */
  --font-lg: 2rem; /* 20px ベース */
  --font-xl: 2.4rem; /* 24px ベース */
  --font-2xl: 2.8rem; /* 28px ベース */
  --font-3xl: 3.2rem; /* 32px ベース */
  --font-4xl: 3.6rem; /* 36px ベース */
  --font-5xl: 4.4rem; /* 44px ベース */
  --font-6xl: 5.2rem; /* 52px ベース */

  /* Line Heights */
  --line-height-none: 1;
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;

  /* Font Weights */
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Font Families */

  /* Noto Sans Japanese */
  --font-family-sans: "Noto Sans JP", "Noto Sans", "Helvetica Neue", Helvetica,
    Arial, sans-serif;
  /* Noto Serif Japanese extra light */
  --font-family-serif: "Noto Serif JP", "Noto Serif", "Times New Roman", Times,
    serif;
  --font-family-mono: "Fira Code", Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  /* Tangerine */
  --font-family-english: "Tangerine", "Noto Serif JP", "Noto Serif",
    "Times New Roman", Times, serif;

  /* Primary Colors */
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-200: #bae6fd;
  --color-primary-300: #7dd3fc;
  --color-primary-400: #38bdf8;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  --color-primary-800: #075985;
  --color-primary-900: #0c4a6e;

  /* Gray Colors */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* Semantic Colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* Theme Colors */
  --color-background: var(--color-gray-50);
  --color-foreground: var(--color-gray-900);
  --color-muted: var(--color-gray-500);
  --color-muted-foreground: var(--color-gray-600);
  --color-border: var(--color-gray-200);
  --color-input: var(--color-gray-100);

  --container-sm: 64rem;
  /* 640px */
  --container-md: 76.8rem;
  /* 768px */
  --container-lg: 102.4rem;
  /* 1024px */
  --container-xl: 128rem;
  /* 1280px */
  --container-2xl: 153.6rem;
  /* 1536px */

  /* Content widths */
  --content-width: 120rem;
  /* 1200px */
  --content-narrow: 65rem;
  /* 650px */
  --content-wide: 140rem;
  /* 1400px */

  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --shadow-none: 0 0 #0000;

  --z-index-auto: auto;
  --z-index-base: 0;
  --z-index-docked: 10;
  --z-index-dropdown: 1000;
  --z-index-sticky: 1100;
  --z-index-banner: 1200;
  --z-index-sp-menu: 1210;
  --z-index-header: 1250;
  --z-index-overlay: 1300;
  --z-index-modal: 1400;
  --z-index-popover: 1500;
  --z-index-skiplink: 1600;
  --z-index-tooltip: 1700;
  --z-index-toast: 1800;

  --transition-none: none;
  --transition-all: all 150ms ease-in-out;
  --transition-default: 150ms ease-in-out;
  --transition-fast: 100ms ease-in-out;
  --transition-slow: 300ms ease-in-out;

  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  --opacity-0: 0;
  --opacity-5: 0.05;
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  --opacity-100: 1;

  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.1em;
  --letter-spacing-wider: 0.15em;
  --letter-spacing-widest: 0.2em;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--color-gray-100);
    --color-foreground: var(--color-gray-900);
    --color-muted: var(--color-gray-400);
    --color-muted-foreground: var(--color-gray-300);
    --color-border: var(--color-gray-700);
    --color-input: var(--color-gray-800);
  }
}

/* Force dark mode class */
.dark {
  --color-background: var(--color-gray-900);
  --color-foreground: var(--color-gray-100);
  --color-muted: var(--color-gray-400);
  --color-muted-foreground: var(--color-gray-300);
  --color-border: var(--color-gray-700);
  --color-input: var(--color-gray-800);
}

:root {
  --color-primary: var(--color-primary-500);
  --color-primary-hover: var(--color-primary-600);
  --color-primary-active: var(--color-primary-700);
  --color-secondary: var(--color-gray-500);
  --color-secondary-hover: var(--color-gray-600);
  --color-secondary-active: var(--color-gray-700);
  --color-text: var(--color-gray-900);
}