/* CSS Layer Order - controls cascade priority */
@layer reset, base, layout, components, utilities, overrides;

/* Design Tokens - Foundation (non-color tokens) */
/* Colors are defined in 00-colors.css */

@layer base {
    :root {
      /* ==========================================
         BORDER RADIUS
         ========================================== */
      --bs-border-radius: 8px;
      --bs-border-radius-sm: 6px;
      --bs-border-radius-lg: 10px;
      --bs-border-radius-xl: 12px;
      --bs-border-radius-2xl: 16px;
      --bs-border-radius-pill: 9999px;


      /* ==========================================
         SHADOWS (Legacy --bs- prefix)
         ========================================== */
      --bs-shadow: 0 0 0 1px rgba(10, 13, 18, 0.18) inset, 0 -2px 0 0 rgba(10, 13, 18, 0.05) inset, 0 1px 2px 0 rgba(10, 13, 18, 0.05);
      --bs-shadow-xs: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
      --bs-dark-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
      --bs-dark-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);

      /* ==========================================
         SHADOWS (--rs- prefix)
         Progressive elevation scale
         ========================================== */
      --rs-shadow-xs: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
      --rs-shadow-sm: 0 1px 3px 0 rgba(10, 13, 18, 0.1), 0 1px 2px -1px rgba(10, 13, 18, 0.1);
      --rs-shadow-md: 0 4px 6px -1px rgba(10, 13, 18, 0.1), 0 2px 4px -2px rgba(10, 13, 18, 0.1);
      --rs-shadow-lg: 0 10px 15px -3px rgba(10, 13, 18, 0.1), 0 4px 6px -4px rgba(10, 13, 18, 0.1);
      --rs-shadow-xl: 0 20px 25px -5px rgba(10, 13, 18, 0.1), 0 8px 10px -6px rgba(10, 13, 18, 0.1);
      --rs-shadow-2xl: 0 25px 50px -12px rgba(10, 13, 18, 0.25);
      --rs-shadow-3xl: 0 35px 60px -15px rgba(10, 13, 18, 0.3);

      /* Skeuomorphic button shadow - 3D tactile appearance */
      --rs-shadow-button: 0 0 0 1px rgba(10, 13, 18, 0.18) inset, 0 -2px 0 0 rgba(10, 13, 18, 0.05) inset, 0 1px 2px 0 rgba(10, 13, 18, 0.05);

      /* ==========================================
         FOCUS RINGS
         Accessibility-compliant focus indicators
         ========================================== */
      /* Basic focus rings */
      --rs-focus-ring: 0 0 0 4px var(--rs-brand-500);
      --rs-focus-ring-error: 0 0 0 4px var(--rs-error-500);

      /* Focus rings with shadows - for elements needing both */
      --rs-focus-ring-shadow-xs: var(--rs-focus-ring), var(--rs-shadow-xs);
      --rs-focus-ring-shadow-sm: var(--rs-focus-ring), var(--rs-shadow-sm);
      --rs-focus-ring-error-shadow-xs: var(--rs-focus-ring-error), var(--rs-shadow-xs);

      /* Focus rings with skeuomorphic effect - for 3D buttons */
      --rs-focus-ring-shadow-xs-skeuomorphic: var(--rs-focus-ring), var(--rs-shadow-xs), inset 0 -2px 0 0 rgba(10, 13, 18, 0.05);
      --rs-focus-ring-error-shadow-xs-skeuomorphic: var(--rs-focus-ring-error), var(--rs-shadow-xs), inset 0 -2px 0 0 rgba(10, 13, 18, 0.05);

      /* ==========================================
         BACKDROP BLURS
         Glassmorphism effects
         ========================================== */
      --rs-backdrop-blur-sm: blur(4px);
      --rs-backdrop-blur-md: blur(8px);
      --rs-backdrop-blur-lg: blur(16px);
      --rs-backdrop-blur-xl: blur(24px);

    }
}