/* ==========================================================================
   GLOBALS.CSS — Digilent Design System
   Design Tokens & CSS Custom Properties
   ========================================================================== */

:root {
  /* ========================================================================
     COLOUR TOKENS
     ======================================================================== */
  
  /* Neutral Scale */
  --dig-neutral-900: #0A0A0A;
  --dig-neutral-800: #1A1A1A;
  --dig-neutral-700: #2E2E2E;
  --dig-neutral-600: #404040;
  --dig-neutral-500: #6B6B6B;
  --dig-neutral-400: #8F8F8F;
  --dig-neutral-300: #B3B3B3;
  --dig-neutral-200: #D4D4D4;
  --dig-neutral-100: #EBEBEB;
  --dig-neutral-50: #F5F5F5;
  --dig-neutral-0: #FFFFFF;

  /* Gold Scale — Semantic Use Only */
  --dig-gold-surface: #F5F0E6;
  --dig-gold-text: #8B7355;

  /* Status — Two-State System */
  --dig-status-neutral-bg: var(--dig-neutral-100);
  --dig-status-neutral-text: var(--dig-neutral-600);
  --dig-status-attention-bg: #FEF3C7;
  --dig-status-attention-text: #92400E;

  /* Semantic Aliases */
  --dig-bg-primary: var(--dig-neutral-0);
  --dig-bg-secondary: var(--dig-neutral-50);
  --dig-bg-tertiary: var(--dig-neutral-100);
  --dig-bg-inverse: var(--dig-neutral-900);
  
  --dig-text-primary: var(--dig-neutral-900);
  --dig-text-secondary: var(--dig-neutral-600);
  --dig-text-tertiary: var(--dig-neutral-500);
  --dig-text-inverse: var(--dig-neutral-0);
  
  --dig-border-default: var(--dig-neutral-200);
  --dig-border-subtle: var(--dig-neutral-100);
  --dig-border-strong: var(--dig-neutral-400);

  /* ========================================================================
     SPACING TOKENS
     ======================================================================== */
  
  --dig-space-0: 0;
  --dig-space-4: 4px;
  --dig-space-8: 8px;
  --dig-space-12: 12px;
  --dig-space-16: 16px;
  --dig-space-24: 24px;
  --dig-space-32: 32px;
  --dig-space-48: 48px;
  --dig-space-64: 64px;
  --dig-space-80: 80px;
  --dig-space-96: 96px;
  --dig-space-128: 128px;

  /* ========================================================================
     TYPOGRAPHY TOKENS
     ======================================================================== */
  
  --dig-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  --dig-font-size-xs: 12px;
  --dig-font-size-sm: 14px;
  --dig-font-size-base: 16px;
  --dig-font-size-md: 18px;
  --dig-font-size-lg: 20px;
  --dig-font-size-xl: 24px;
  --dig-font-size-2xl: 32px;
  --dig-font-size-3xl: 40px;
  --dig-font-size-4xl: 48px;
  
  --dig-line-height-tight: 1.2;
  --dig-line-height-normal: 1.5;
  --dig-line-height-relaxed: 1.6;
  
  --dig-font-weight-regular: 400;
  --dig-font-weight-medium: 500;
  --dig-font-weight-semibold: 600;
  --dig-font-weight-bold: 700;

  --dig-letter-spacing-tight: -0.02em;
  --dig-letter-spacing-normal: 0;
  --dig-letter-spacing-wide: 0.02em;
  --dig-letter-spacing-caps: 0.08em;

  /* ========================================================================
     LAYOUT TOKENS
     ======================================================================== */
  
  --dig-container-max: 1200px;
  --dig-container-padding: var(--dig-space-24);
  
  --dig-grid-columns: 12;
  --dig-grid-gap: var(--dig-space-24);

  /* ========================================================================
     COMPONENT TOKENS
     ======================================================================== */
  
  --dig-border-radius: 4px;
  --dig-border-width: 1px;
  
  --dig-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --dig-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --dig-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  
  --dig-transition-fast: 150ms ease;
  --dig-transition-normal: 250ms ease;
  --dig-transition-slow: 350ms ease;

  /* ========================================================================
     Z-INDEX SCALE
     ======================================================================== */
  
  --dig-z-dropdown: 100;
  --dig-z-sticky: 200;
  --dig-z-header: 300;
  --dig-z-overlay: 400;
  --dig-z-modal: 500;
  --dig-z-tooltip: 600;
}

/* ==========================================================================
   BREAKPOINT REFERENCE (for documentation)
   - Mobile: < 768px
   - Tablet: 768px - 1023px
   - Desktop: >= 1024px
   ========================================================================== */

/* ==========================================================================
   CSS RESET & BASE STYLES
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--dig-font-family);
  font-size: var(--dig-font-size-base);
  font-weight: var(--dig-font-weight-regular);
  line-height: var(--dig-line-height-normal);
  color: var(--dig-text-primary);
  background-color: var(--dig-bg-primary);
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

/* ==========================================================================
   UTILITY: VISUALLY HIDDEN
   ========================================================================== */

.dig-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;
}

/* ==========================================================================
   UTILITY: SKIP LINK
   ========================================================================== */

.dig-skip-link {
  position: absolute;
  top: -100px;
  left: var(--dig-space-16);
  z-index: var(--dig-z-tooltip);
  padding: var(--dig-space-12) var(--dig-space-24);
  background-color: var(--dig-bg-inverse);
  color: var(--dig-text-inverse);
  font-size: var(--dig-font-size-sm);
  font-weight: var(--dig-font-weight-medium);
  border-radius: var(--dig-border-radius);
  transition: top var(--dig-transition-fast);
}

.dig-skip-link:focus {
  top: var(--dig-space-16);
  outline: 2px solid var(--dig-neutral-0);
  outline-offset: 2px;
}