/* Design Tokens */

:root {
  /* Color Palette */
  --color-primary-50: #fff7e6;
  --color-primary-100: #ffe7cc;
  --color-primary-200: #ffd3a6;
  --color-primary-400: #ffb547;
  --color-primary-500: #fa8c16;
  --color-primary-600: #d4780f;
  --color-primary-700: #b0600d;

  --color-secondary-500: #36cfc9;
  --color-secondary-600: #2bb5b0;
  --color-success-400: #58d85e;
  --color-success-500: #3dd900;
  --color-danger-500: #ff4d4f;
  --color-warning-500: #d46b08;
  --color-warning-200: #ffd591;
  --color-info-700: #001d6c;

  --color-neutral-0: #ffffff;
  --color-neutral-25: #fafafa;
  --color-neutral-50: #f5f5f5;
  --color-neutral-100: #f0f0f0;
  --color-neutral-200: #d9d9d9;
  --color-neutral-300: #c1c7cd;
  --color-neutral-350: #a8aeb5;
  --color-neutral-400: #a2a9b0;
  --color-neutral-500: #9097a1;
  --color-neutral-600: #697077;
  --color-neutral-700: #4a4f55;
  --color-neutral-800: #333333;
  --color-neutral-850: #2a2e32;
  --color-neutral-900: #21272a;
  --color-neutral-950: #121619;
  --color-neutral-1000: #000000;

  /* Cool Gray heritage aliases */
  --coolgray-20: #dde1e6;
  --coolgray-30: #c1c7cd;
  --coolgray-40: #a2a9b0;
  --coolgray-60: #697077;
  --coolgray-90: #21272a;

  /* Semantic Color Aliases */
  --primary-color: var(--color-primary-500);
  --primary-60: var(--color-primary-500);
  --primary-70: var(--color-primary-600);
  --secondary-color: var(--color-secondary-500);
  --text-dark: var(--color-neutral-800);
  --text-light: var(--color-neutral-600);
  --text-strong: var(--color-neutral-1000);
  --text-inverse: var(--color-neutral-0);
  --text-muted: rgba(33, 39, 42, 0.72);
  --bg-light: var(--color-neutral-50);
  --bg-muted: var(--color-neutral-25);
  --white: var(--color-neutral-0);
  --dark-bg: var(--color-neutral-950);
  --neutral-10: var(--color-neutral-50);
  --neutral-20: var(--color-neutral-25);
  --neutral-30: var(--color-neutral-100);
  --neutral-50: var(--color-neutral-200);
  --neutral-60: #bfbfbf;
  --neutral-90: #434343;
  --neutral-100: #262626;
  --neutral-120: #141414;
  --color-border-default: var(--color-neutral-200);
  --color-border-subtle: var(--coolgray-20);
  --color-border-strong: var(--coolgray-40);
  --color-nav-text: rgba(0, 0, 0, 0.85);
  --color-focus-outline: rgba(250, 140, 22, 0.35);

  /* Typography */
  --font-family-base: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-heading: 'Pretendard', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-2xs: 0.625rem; /* 10px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-xl-plus: 1.375rem; /* 22px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 2rem;     /* 32px */
  --font-size-4xl: 2.5rem;   /* 40px */
  --font-size-4xl-plus: 2.625rem; /* 42px */

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.3;
  --line-height-default: 1.6;
  --line-height-loose: 1.8;

  /* Spacing Scale */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-2-5: 0.375rem; /* 6px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-7: 2rem;     /* 32px */
  --space-8: 2.5rem;   /* 40px */
  --space-9: 3rem;     /* 48px */
  --space-10: 4rem;    /* 64px */
  --space-11: 5rem;    /* 80px */
  --space-12: 6rem;    /* 96px */
  --space-gap: 0.625rem; /* 10px */
  --space-30: 1.875rem;   /* 30px */

  /* Layout */
  --layout-max-width: 1440px;
  --layout-content-padding: var(--space-8);
  --header-height-desktop: 64px;
  --header-height-mobile: 80px;
  --footer-padding-vertical: var(--space-9);
  --footer-padding-horizontal: var(--space-11);
  --max-logo-size: 32px;
  --control-height-md: 48px;
  --icon-size-lg: 48px;
  --icon-size-md: 40px;
  --icon-size-sm: 32px;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-xxl: 20px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
  --shadow-button: 0px 4px 12px rgba(250, 140, 22, 0.3);
  --shadow-button-active: 0px 2px 6px rgba(250, 140, 22, 0.2);

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 1s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  --duration-spinner: 1s;

  /* Z-index */
  --z-base: 1;
  --z-header: 1000;
  --z-floating: 1001;
  --z-loader: 9999;

  /* Misc */
  --button-hover-shadow: var(--shadow-button);
  --button-transition: var(--transition-base);
  --focus-ring: 0 0 0 3px var(--color-focus-outline);
  --loader-size: 60px;
  --loader-border-width: 3px;
}

@media (max-width: 768px) {
  :root {
    --layout-content-padding: var(--space-6);
  }
}