/**
 * Design Tokens
 * Inspired by GitHub's Primer Design System
 * Reference: https://primer.style/primitives
 */

:root {
  /* ==========================================
     Foreground Colors
     ========================================== */
  --fgColor-default: #1f2328;
  --fgColor-muted: #59636e;
  --fgColor-subtle: #818b98;
  --fgColor-accent: #0969da;
  --fgColor-success: #1a7f37;
  --fgColor-attention: #9a6700;
  --fgColor-danger: #d1242f;
  --fgColor-done: #8250df;
  --fgColor-sponsors: #bf3989;
  --fgColor-onEmphasis: #ffffff;
  --fgColor-disabled: #818b98;
  --fgColor-link: #0969da;

  /* ==========================================
     Background Colors
     ========================================== */
  --bgColor-default: #ffffff;
  --bgColor-muted: #f6f8fa;
  --bgColor-inset: #f6f8fa;
  --bgColor-emphasis: #25292e;
  --bgColor-inverse: #25292e;
  --bgColor-disabled: #eff2f5;
  
  /* Accent backgrounds */
  --bgColor-accent-emphasis: #0969da;
  --bgColor-accent-muted: #ddf4ff;
  
  /* Success backgrounds */
  --bgColor-success-emphasis: #1f883d;
  --bgColor-success-muted: #dafbe1;
  
  /* Attention backgrounds */
  --bgColor-attention-emphasis: #9a6700;
  --bgColor-attention-muted: #fff8c5;
  
  /* Danger backgrounds */
  --bgColor-danger-emphasis: #cf222e;
  --bgColor-danger-muted: #ffebe9;
  
  /* Done backgrounds */
  --bgColor-done-emphasis: #8250df;
  --bgColor-done-muted: #fbefff;
  
  /* Sponsors backgrounds */
  --bgColor-sponsors-emphasis: #bf3989;
  --bgColor-sponsors-muted: #ffeff7;

  /* ==========================================
     Border Colors
     ========================================== */
  --borderColor-default: #d1d9e0;
  --borderColor-muted: rgba(209, 217, 224, 0.7);
  --borderColor-emphasis: #818b98;
  --borderColor-disabled: rgba(129, 139, 152, 0.1);
  --borderColor-transparent: rgba(255, 255, 255, 0);
  
  /* Accent borders */
  --borderColor-accent-emphasis: #0969da;
  --borderColor-accent-muted: rgba(84, 174, 255, 0.4);
  
  /* Success borders */
  --borderColor-success-emphasis: #1a7f37;
  --borderColor-success-muted: rgba(74, 194, 107, 0.4);
  
  /* Attention borders */
  --borderColor-attention-emphasis: #9a6700;
  --borderColor-attention-muted: rgba(212, 167, 44, 0.4);
  
  /* Danger borders */
  --borderColor-danger-emphasis: #cf222e;
  --borderColor-danger-muted: rgba(255, 129, 130, 0.4);

  /* ==========================================
     Sizing Scale (4px base)
     ========================================== */
  --base-size-2: 0.125rem;   /* 2px */
  --base-size-4: 0.25rem;    /* 4px */
  --base-size-6: 0.375rem;   /* 6px */
  --base-size-8: 0.5rem;     /* 8px */
  --base-size-12: 0.75rem;   /* 12px */
  --base-size-16: 1rem;      /* 16px */
  --base-size-20: 1.25rem;   /* 20px */
  --base-size-24: 1.5rem;    /* 24px */
  --base-size-28: 1.75rem;   /* 28px */
  --base-size-32: 2rem;      /* 32px */
  --base-size-36: 2.25rem;   /* 36px */
  --base-size-40: 2.5rem;    /* 40px */
  --base-size-44: 2.75rem;   /* 44px */
  --base-size-48: 3rem;      /* 48px */
  --base-size-64: 4rem;      /* 64px */
  --base-size-80: 5rem;      /* 80px */
  --base-size-96: 6rem;      /* 96px */

  /* ==========================================
     Border Width & Radius
     ========================================== */
  --borderWidth-thin: 0.0625rem;    /* 1px */
  --borderWidth-thick: 0.125rem;    /* 2px */
  --borderWidth-thicker: 0.25rem;   /* 4px */
  
  --borderRadius-small: 0.1875rem;   /* 3px */
  --borderRadius-medium: 0.375rem;   /* 6px */
  --borderRadius-large: 0.75rem;     /* 12px */
  --borderRadius-full: 624.9375rem;  /* 9999px */

  /* ==========================================
     Control Dimensions
     ========================================== */
  --control-height-xsmall: 1.5rem;   /* 24px */
  --control-height-small: 1.75rem;   /* 28px */
  --control-height-medium: 2rem;     /* 32px */
  --control-height-large: 2.5rem;    /* 40px */
  --control-height-xlarge: 3rem;     /* 48px */
  
  --control-padding-inline-small: var(--base-size-8);
  --control-padding-inline-medium: var(--base-size-12);
  --control-padding-inline-large: var(--base-size-16);

  /* ==========================================
     Typography
     ========================================== */
  /* Font sizes */
  --text-body-size-xsmall: 0.6875rem;  /* 11px */
  --text-body-size-small: 0.75rem;     /* 12px */
  --text-body-size-medium: 0.875rem;   /* 14px */
  --text-body-size-large: 1rem;        /* 16px */
  
  --text-title-size-small: 0.875rem;   /* 14px */
  --text-title-size-medium: 1rem;      /* 16px */
  --text-title-size-large: 1.25rem;    /* 20px */
  --text-title-size-xlarge: 1.5rem;    /* 24px */
  
  /* Font weights */
  --text-body-weight-light: 300;
  --text-body-weight-normal: 400;
  --text-body-weight-medium: 500;
  --text-body-weight-semibold: 600;
  --text-body-weight-bold: 700;
  
  /* Line heights */
  --text-body-lineHeight-small: 1.4;
  --text-body-lineHeight-medium: 1.5;
  --text-body-lineHeight-large: 1.6;

  /* ==========================================
     Shadows
     ========================================== */
  --shadow-resting-xsmall: 0 1px 1px rgba(31, 35, 40, 0.06);
  --shadow-resting-small: 0 1px 1px rgba(31, 35, 40, 0.06), 0 1px 3px rgba(31, 35, 40, 0.06);
  --shadow-resting-medium: 0 1px 1px rgba(37, 41, 46, 0.1), 0 3px 6px rgba(37, 41, 46, 0.12);
  
  --shadow-floating-small: 0 0 0 1px rgba(209, 217, 224, 0.5), 0 6px 12px -3px rgba(37, 41, 46, 0.04), 0 6px 18px rgba(37, 41, 46, 0.12);
  --shadow-floating-medium: 0 0 0 1px #d1d9e0, 0 8px 16px -4px rgba(37, 41, 46, 0.08), 0 4px 32px -4px rgba(37, 41, 46, 0.08);
  --shadow-floating-large: 0 0 0 1px #d1d9e0, 0 40px 80px rgba(37, 41, 46, 0.24);
  
  --shadow-inset: inset 0 1px 0 rgba(31, 35, 40, 0.04);

  /* ==========================================
     Focus Outline
     ========================================== */
  --focus-outlineColor: #0969da;
  --focus-outline-width: 0.125rem;      /* 2px */
  --focus-outline-offset: -0.125rem;    /* -2px */
  --focus-outline: var(--focus-outline-width) solid var(--focus-outlineColor);

  /* ==========================================
     Transitions & Animations
     ========================================== */
  --duration-fast: 80ms;
  --duration-normal: 150ms;
  --duration-slow: 300ms;
  
  --easing-default: cubic-bezier(0.33, 1, 0.68, 1);
  --easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);

  /* ==========================================
     Breakpoints
     ========================================== */
  --breakpoint-xsmall: 20rem;    /* 320px */
  --breakpoint-small: 34rem;     /* 544px */
  --breakpoint-medium: 48rem;    /* 768px */
  --breakpoint-large: 63.25rem;  /* 1012px */
  --breakpoint-xlarge: 80rem;    /* 1280px */
  --breakpoint-xxlarge: 87.5rem; /* 1400px */

  /* ==========================================
     Z-Index Scale
     ========================================== */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
}