:root {

  --primitive-base-white: #FFFFFF;
  --primitive-base-brand: #E77314;

  --primitive-neutral-50:  #FAF8F5;
  --primitive-neutral-100: #F5F3F0;
  --primitive-neutral-200: #E0DEDC;
  --primitive-neutral-300: #B7B5B3;
  --primitive-neutral-400: #807F7D;
  --primitive-neutral-600: #6B6A69;
  --primitive-neutral-700: #454444;
  --primitive-neutral-900: #1E1E1D;

  --primitive-orange-50: #FCECDE;
  --primitive-orange-100: #FAD8BB;
  --primitive-orange-200: #F7C194;
  --primitive-orange-300: #E77314; 
  --primitive-orange-400: #C96614;

  --primitive-navy-600: #2A305C;
  --primitive-navy-700: #1B2A6B;
  --primitive-navy-800: #152052;

  --primitive-amber-50:  #FEF6E0;
  --primitive-amber-100: #FEECBB;
  --primitive-amber-300: #FABD14;
  --primitive-amber-500: #C99504;

  --primitive-red-50:  #FCE2E4;
  --primitive-red-100: #F8C1C6;
  --primitive-red-300: #E6192A;
  --primitive-red-600: #98111C;

  --primitive-green-50:  #E7F7EE;
  --primitive-green-100: #CBEEDA;
  --primitive-green-300: #40BF75;
  --primitive-green-500: #339A5E;

  --primitive-blue-50:  #E2F1FC;
  --primitive-blue-100: #C1E1F8;
  --primitive-blue-300: #1991E6;
  --primitive-blue-700: #0E4D7A;

  --primitive-cream-50: #FAF2E6;

  --color-brand-welporange: var(--primitive-base-brand);       
  --color-brand-secondary-navy: var(--primitive-navy-700);
  --color-brand-secondary-navy-hover: var(--primitive-navy-800);
  --color-brand-secondary-amber: var(--primitive-amber-300);
  --color-brand-logo: var(--primitive-base-brand);
  --color-brand-logo-black: var(--primitive-neutral-900);
  --color-brand-logo-inverse: var(--primitive-base-white);

  --color-text-primary: var(--primitive-neutral-900);
  --color-text-secondary: var(--primitive-neutral-700);
  --color-text-disabled: var(--primitive-neutral-400);
  --color-text-disabled-no-bg: var(--primitive-neutral-300);
  --color-text-accent: var(--primitive-base-brand);
  --color-text-link: #0D6EFD;
  --color-text-inverse: var(--primitive-base-white);

  --color-surface-primary: var(--primitive-neutral-50);
  --color-surface-secondary: var(--primitive-cream-50);
  --color-surface-disabled: var(--primitive-neutral-100);
  --color-surface-chat: var(--primitive-cream-50);

  --color-border-default: var(--primitive-neutral-300);
  --color-border-disabled: var(--primitive-neutral-200);

  --color-overlay-light: rgba(0, 0, 0, 0.2);
  --color-overlay-default: rgba(0, 0, 0, 0.4);

  --color-success-bg: var(--primitive-green-50);
  --color-success-outline: var(--primitive-green-100);
  --color-success-text: var(--primitive-green-300);
  --color-success-text-strong: var(--primitive-green-500);

  --color-warning-bg: var(--primitive-amber-50);
  --color-warning-outline: var(--primitive-amber-100);
  --color-warning-text: var(--primitive-amber-300);
  --color-warning-text-strong: var(--primitive-amber-500);

  --color-danger-bg: var(--primitive-red-50);
  --color-danger-outline: var(--primitive-red-100);
  --color-danger-text: var(--primitive-red-300);
  --color-danger-text-strong: var(--primitive-red-600);

  --color-info-bg: var(--primitive-blue-50);
  --color-info-outline: var(--primitive-blue-100);
  --color-info-text: var(--primitive-blue-300);
  --color-info-text-strong: var(--primitive-blue-700);

  --color-error-outline: var(--primitive-red-300);
  --color-error-text: var(--primitive-red-300);
  --color-error-bg-pink: var(--primitive-red-50);
  --color-error-bg-white: var(--primitive-neutral-50);

  --color-bg: var(--color-surface-primary);
  --color-accent: var(--color-brand-welporange);
  --color-accent-hover: var(--primitive-orange-400);

  --font-family-base: "Zen Kaku Gothic Antique", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  --font-family-accent: "M PLUS 1p", "Zen Kaku Gothic Antique", sans-serif;
  --font-family-numeric: "Jost", "Zen Kaku Gothic Antique", sans-serif; 

  --font-size-2xs: 10px;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  --font-size-4xl: 32px;
  --font-size-5xl: 40px;
  --font-size-6xl: 48px;
  --font-size-7xl: 56px;
  --font-size-8xl: 64px;
  --font-size-9xl: 72px;
  --font-size-10xl: 80px;
  --font-size-11xl: 100px;
  --font-size-12xl: 120px;

  --font-weight-regular: 400; 
  --font-weight-medium: 500;  
  --font-weight-bold: 700;    
  --font-weight-black: 900;   

  --line-height-base: 1.5;
  --letter-spacing-base: 0.04em;

  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-3xl: 40px;
  --radius-full: 999px;

  --gap-4: 4px;
  --gap-8: 8px;
  --gap-12: 12px;
  --gap-16: 16px;
  --gap-24: 24px;
  --gap-32: 32px;
  --gap-40: 40px;
  --gap-48: 48px;
  --gap-56: 56px;
  --gap-64: 64px;
  --gap-80: 80px;
  --gap-96: 96px;
  --gap-128: 128px;

  --padding-2: 2px;
  --padding-4: 4px;
  --padding-6: 6px;
  --padding-8: 8px;
  --padding-10: 10px;
  --padding-12: 12px;
  --padding-14: 14px;
  --padding-16: 16px;
  --padding-20: 20px;
  --padding-24: 24px;
  --padding-28: 28px;
  --padding-32: 32px;
  --padding-40: 40px;
  --padding-48: 48px;
  --padding-56: 56px;
  --padding-64: 64px;
  --padding-80: 80px;
  --padding-96: 96px;
  --padding-128: 128px;

  --container-width-sp: 480px;
  --container-width-pc: 1024px; 
  --header-drawer-width: clamp(310px, 40vw, 400px); 
  --shadow-card: 0 4px 16px rgba(30, 30, 29, 0.08);
  --z-header: 100;
  --z-header-nav: 110; 
  --z-modal: 1000;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-8);
  min-width: 180px;
  padding: var(--padding-12) var(--padding-24);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  letter-spacing: var(--letter-spacing-base);
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn:active {
  transform: scale(0.98);
}

.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
  box-shadow: 0 6px 0 var(--color-accent-hover);
}

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

.btn--navy {
  background-color: var(--color-brand-secondary-navy);
  color: var(--color-text-inverse);
  box-shadow: 0 6px 0 var(--color-brand-secondary-navy-hover);
}

.btn--navy:hover {
  background-color: var(--color-brand-secondary-navy-hover);
}

.btn--sm {
  min-width: 140px;
  padding: var(--padding-10) var(--padding-14);
  font-size: var(--font-size-xs);
  box-shadow: 0 4px 0 var(--color-accent-hover);
}

.btn--sm.btn--navy {
  box-shadow: 0 4px 0 var(--color-brand-secondary-navy-hover);
}

.btn__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}