@import "tailwindcss";
@plugin "@tailwindcss/typography";

@theme {
  --color-background: hsl(0 0% 100%);
  --color-foreground: hsl(222.2 84% 4.9%);
  --color-card: hsl(0 0% 100%);
  --color-card-foreground: hsl(222.2 84% 4.9%);
  --color-popover: hsl(0 0% 100%);
  --color-popover-foreground: hsl(222.2 84% 4.9%);
  --color-primary: hsl(222.2 47.4% 11.2%);
  --color-primary-foreground: hsl(210 40% 98%);
  --color-secondary: hsl(210 40% 96.1%);
  --color-secondary-foreground: hsl(222.2 47.4% 11.2%);
  --color-muted: hsl(210 40% 96.1%);
  --color-muted-foreground: hsl(215.4 16.3% 46.9%);
  --color-accent: hsl(210 40% 96.1%);
  --color-accent-foreground: hsl(222.2 47.4% 11.2%);
  --color-destructive: hsl(0 84.2% 60.2%);
  --color-destructive-foreground: hsl(210 40% 98%);
  --color-border: hsl(214.3 31.8% 91.4%);
  --color-input: hsl(214.3 31.8% 91.4%);
  --color-ring: hsl(222.2 84% 4.9%);
  --color-chart-1: hsl(12 76% 61%);
  --color-chart-2: hsl(173 58% 39%);
  --color-chart-3: hsl(197 37% 24%);
  --color-chart-4: hsl(43 74% 66%);
  --color-chart-5: hsl(27 87% 67%);
  --radius: 0.5rem;
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* 
  Markdown Typography Overrides 
  Ensure high contrast for all text elements within prose content.
*/
@layer components {
  .prose {
    /* Force base text color */
    @apply text-foreground;

    /* Force specific elements to use foreground color to avoid "faint" gray defaults */
    & :where(p, ul, ol, li, blockquote, strong, b, i, em, code, h1, h2, h3, h4, h5, h6, th, td, span) {
        color: var(--color-foreground) !important;
    }

    /* Ensure links use primary color */
    & a {
        @apply text-primary hover:underline decoration-primary/30 underline-offset-4;
        color: var(--color-primary) !important;
    }

    /* Table styling fixes */
    & :where(thead, tbody, tr) {
        border-color: var(--color-border) !important;
    }
    & :where(th, td) {
        border-color: var(--color-border) !important;
    }
    
    /* Code block fixes */
    & pre {
        @apply bg-muted text-foreground;
        border-color: var(--color-border) !important;
        border-width: 1px !important;
    }
  }
}

.writing-vertical-lr {
  writing-mode: vertical-lr;
}