/* OpenProspect Custom Theme for MkDocs Material
 * Matches Tailwind design system from lince-web
 */

/* ============================================================================
 * Google Fonts Import
 * Using the same fonts as the main application
 * ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&family=Urbanist:wght@500;600;700&display=swap');

/* ============================================================================
 * Light Mode Theme (Default)
 * ============================================================================ */
:root {
  /* Primary Brand Color - OpenProspect Cyan (#2cc3f3) */
  --md-primary-fg-color:        #2cc3f3;  /* oklch(0.7629 0.136 225.4) */
  --md-primary-fg-color--light: #5ed4f7;  /* Lighter variant for hover states */
  --md-primary-fg-color--dark:  #1ba5d1;  /* Darker variant for active states */

  /* Accent Color - OpenProspect Red (#f0203c) */
  --md-accent-fg-color:         #f0203c;  /* oklch(0.6126 0.2336 22.39) */
  --md-accent-fg-color--light:  #f45873;  /* Lighter variant */
  --md-accent-fg-color--dark:   #c31830;  /* Darker variant */

  /* Background Colors - Match Tailwind globals.css */
  --md-default-bg-color:        #fdfdfe;  /* oklch(0.9918 0.0002 247.9) - background */
  --md-default-fg-color:        #1a2129;  /* oklch(0.2124 0.0112 246.5) - foreground */

  /* Code Block Colors */
  --md-code-bg-color:           #f5f7f9;  /* oklch(0.9701 0.0046 226.0) - muted */
  --md-code-fg-color:           #1a2129;  /* oklch(0.2124 0.0112 246.5) - foreground */

  /* Typography - Custom Fonts */
  --md-text-font: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --md-code-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ============================================================================
 * Dark Mode Theme
 * ============================================================================ */
[data-md-color-scheme="slate"] {
  /* Primary - Keep same for brand consistency */
  --md-primary-fg-color:        #2cc3f3;
  --md-primary-fg-color--light: #5ed4f7;
  --md-primary-fg-color--dark:  #1ba5d1;

  /* Accent - Keep same for brand consistency */
  --md-accent-fg-color:         #f0203c;
  --md-accent-fg-color--light:  #f45873;
  --md-accent-fg-color--dark:   #c31830;

  /* Dark Mode Backgrounds - Match Tailwind dark mode */
  --md-default-bg-color:        #252525;  /* oklch(0.145 0 0) - dark background */
  --md-default-fg-color:        #fcfcfc;  /* oklch(0.985 0 0) - dark foreground */

  /* Dark Mode Code Blocks */
  --md-code-bg-color:           #3d3d3d;  /* oklch(0.269 0 0) - dark muted */
  --md-code-fg-color:           #fcfcfc;  /* oklch(0.985 0 0) - dark foreground */
}

/* ============================================================================
 * Typography Overrides
 * Match the font-weight and style from Tailwind
 * ============================================================================ */

/* Body text uses Nunito */
body {
  font-family: var(--md-text-font);
  font-size: 16px;
  line-height: 1.5;
}

/* Headings use Urbanist with medium weight (500) */
h1, h2, h3, h4, h5, h6,
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: "Urbanist", var(--md-text-font);
  font-weight: 500;
  letter-spacing: -0.025em; /* tracking-tight from Tailwind */
}

/* ============================================================================
 * Link Styling
 * Match Tailwind link utilities with primary color
 * ============================================================================ */
.md-typeset a {
  color: var(--md-primary-fg-color);
  text-underline-offset: 4px;
  transition: color 150ms, opacity 150ms;
}

.md-typeset a:hover {
  opacity: 0.8;
}

/* ============================================================================
 * Code Block Styling
 * Match Tailwind markdown content styles
 * ============================================================================ */
.md-typeset code {
  background-color: var(--md-code-bg-color);
  color: var(--md-code-fg-color);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-family: var(--md-code-font);
}

.md-typeset pre {
  background-color: var(--md-code-bg-color);
  border-radius: 0.5rem;
}

.md-typeset pre code {
  background-color: transparent;
  padding: 0;
}

/* ============================================================================
 * Button Styling
 * Match primary button colors
 * ============================================================================ */
.md-button--primary {
  background-color: var(--md-primary-fg-color);
  color: #1a2129;
  border-color: var(--md-primary-fg-color);
  font-weight: 500;
}

.md-button--primary:hover {
  background-color: var(--md-primary-fg-color--dark);
  border-color: var(--md-primary-fg-color--dark);
}

/* ============================================================================
 * Admonition/Callout Colors
 * Map to state colors from Tailwind
 * ============================================================================ */
.md-typeset .admonition.info,
.md-typeset details.info {
  border-color: #0ea5e9; /* oklch(0.7141 0.1669 211.8) - info */
}

.md-typeset .info > .admonition-title,
.md-typeset .info > summary {
  background-color: rgba(14, 165, 233, 0.1);
  border-color: #0ea5e9;
}

.md-typeset .admonition.success,
.md-typeset details.success {
  border-color: #10b981; /* oklch(0.6776 0.1522 157.3) - success */
}

.md-typeset .success > .admonition-title,
.md-typeset .success > summary {
  background-color: rgba(16, 185, 129, 0.1);
  border-color: #10b981;
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: #f59e0b; /* oklch(0.7383 0.1839 65.3) - warning */
}

.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary {
  background-color: rgba(245, 158, 11, 0.1);
  border-color: #f59e0b;
}

.md-typeset .admonition.danger,
.md-typeset .admonition.error,
.md-typeset details.danger,
.md-typeset details.error {
  border-color: #ef4444; /* oklch(0.6285 0.2577 25.7) - error */
}

.md-typeset .danger > .admonition-title,
.md-typeset .danger > summary,
.md-typeset .error > .admonition-title,
.md-typeset .error > summary {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
}

/* ============================================================================
 * Mobile Optimizations
 * Match Material Design typography scale from Tailwind
 * ============================================================================ */
@media (max-width: 767px) {
  body {
    font-size: 16px; /* Material Design base size */
  }

  .md-typeset {
    font-size: 0.875rem; /* 14px - text-sm */
  }
}

/* ============================================================================
 * Respect Reduced Motion Preferences
 * ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}