@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 10 10 10;
    --foreground: 255 255 255;
  }

  * {
    @apply border-studio-medium;
  }

  body {
    @apply bg-studio-black text-foreground;
    /* Cross-browser text size adjustment */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  .glow-phoenix {
    box-shadow: 0 0 20px rgba(255, 69, 0, 0.5);
  }

  .glow-sankofa {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
  }

  .glow-neon {
    box-shadow: 0 0 20px rgba(0, 255, 209, 0.5);
  }

  /* Cross-browser backdrop filter support */
  .backdrop-blur-safari {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

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

  .sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  /* Chart container styles */
  .chart-container {
    height: 100%;
    width: 100%;
  }

  /* Status indicator colors */
  .status-pass {
    background-color: #00FF88;
    color: #000;
  }

  .status-fail {
    background-color: #FF0040;
    color: #000;
  }

  .status-warning {
    background-color: #FFB800;
    color: #000;
  }

  /* Dynamic color utilities - use data attributes for dynamic colors */
  [data-pillar-color] {
    color: var(--pillar-color);
  }

  [data-score-color] {
    color: var(--score-color);
  }

  [data-health-color] {
    color: var(--health-color);
  }

  [data-pillar-bg] {
    background-color: var(--pillar-bg);
  }

}

