/* ==========================================================================
   Forge Documentation - Design System Stylesheet

   Organized following CSS best practices:
   1. TOKENS - Design system variables (single source of truth)
   2. BASE - Theme overrides for Material for MkDocs
   3. COMPONENTS - Reusable UI patterns
   4. UTILITIES - Helper classes and responsive adjustments

   Color Palette:
   - Forge Flame: #ff6b35 (primary brand color)
   - Forge Anvil: #434343 (dark gray)
   - SAIF Pacific: #007ACC (links/accent)
   - SAIF Evergreen: #4F7E11 (success)
   - SAIF Lemon: #FACB47 (warning accent)
   ========================================================================== */


/* ==========================================================================
   1. TOKENS - Design System Variables
   ========================================================================== */

:root {
  /* -------------------------------------------------------------------------
     Forge Brand Colors
     ------------------------------------------------------------------------- */
  --forge-flame: #ff6b35;
  --forge-flame-light: #ff8a5c;
  --forge-flame-dark: #e55a2b;
  --forge-anvil: #434343;
  --forge-anvil-light: #5a5a5a;

  /* -------------------------------------------------------------------------
     SAIF Brand Colors
     ------------------------------------------------------------------------- */
  --saif-pacific: #007ACC;
  --saif-pacific-light: #0095eb;
  --saif-pacific-dark: #0062A3;
  --saif-evergreen: #4F7E11;
  --saif-evergreen-light: #7DC623;
  --saif-lemon: #FACB47;
  --saif-orange: #F2902B;
  --saif-poppy: #E01F22;

  /* -------------------------------------------------------------------------
     SAIF Neutrals
     ------------------------------------------------------------------------- */
  --saif-graphite: #323131;
  --saif-slate: #747272;
  --saif-stone: #9E9C9C;
  --saif-pebble: #DFDEDE;
  --saif-cloud: #EEEEEE;
  --saif-alabaster: #F7F5F2;

  /* -------------------------------------------------------------------------
     Spacing Tokens (16px base system)
     ------------------------------------------------------------------------- */
  --spacing-xs: 0.25rem;    /* 4px */
  --spacing-sm: 0.5rem;     /* 8px */
  --spacing-md: 0.75rem;    /* 12px */
  --spacing-lg: 1rem;       /* 16px */
  --spacing-xl: 1.5rem;     /* 24px */
  --spacing-xxl: 2rem;      /* 32px */
  --spacing-xxxl: 3rem;     /* 48px */
  --spacing-xxxxl: 4rem;    /* 64px */

  /* -------------------------------------------------------------------------
     Font Weight Tokens
     ------------------------------------------------------------------------- */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* -------------------------------------------------------------------------
     Font Size Tokens (14px root)
     ------------------------------------------------------------------------- */
  --font-size-xs: 0.67rem;      /* 9.4px */
  --font-size-sm: 0.83rem;      /* 11.6px */
  --font-size-root: 1rem;       /* 14px */
  --font-size-md: 1.17rem;      /* 16.4px */
  --font-size-lg: 1.75rem;      /* 24.5px */
  --font-size-xl: 2rem;         /* 28px */
}


/* ==========================================================================
   2. BASE - Theme Overrides
   ========================================================================== */

/* -------------------------------------------------------------------------
   Light Mode Theme Variables
   ------------------------------------------------------------------------- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--forge-flame, #ff6b35);
  --md-primary-fg-color--light: var(--forge-flame-light, #ff8a5c);
  --md-primary-fg-color--dark: var(--forge-flame-dark, #e55a2b);
  --md-primary-bg-color: #ffffff;

  --md-accent-fg-color: var(--saif-pacific, #007ACC);
  --md-accent-bg-color: var(--saif-pacific, #007ACC);

  --md-default-fg-color: var(--saif-graphite, #323131);
  --md-default-fg-color--light: var(--saif-slate, #747272);
  --md-default-fg-color--lighter: var(--saif-stone, #9E9C9C);
  --md-default-fg-color--lightest: var(--saif-pebble, #DFDEDE);

  --md-default-bg-color: #ffffff;
  --md-default-bg-color--light: var(--saif-alabaster, #F7F5F2);

  --md-code-bg-color: var(--saif-alabaster, #F7F5F2);
  --md-typeset-a-color: var(--saif-pacific, #007ACC);

  --md-footer-bg-color: var(--forge-anvil, #434343);
  --md-footer-bg-color--dark: var(--saif-graphite, #323131);
}

/* -------------------------------------------------------------------------
   Dark Mode Theme Variables
   ------------------------------------------------------------------------- */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--forge-flame, #ff6b35);
  --md-primary-fg-color--light: var(--forge-flame-light, #ff8a5c);
  --md-primary-fg-color--dark: var(--forge-flame-dark, #e55a2b);
  --md-primary-bg-color: var(--saif-graphite, #323131);

  --md-accent-fg-color: var(--saif-pacific-light, #0095eb);
  --md-accent-bg-color: var(--saif-pacific, #007ACC);

  --md-default-bg-color: #1a1a1a;
  --md-default-bg-color--light: #242424;

  --md-code-bg-color: #2d2d2d;
  --md-typeset-a-color: var(--saif-pacific-light, #0095eb);

  --md-footer-bg-color: #0d0d0d;
}

/* -------------------------------------------------------------------------
   Header - Light Mode
   ------------------------------------------------------------------------- */
[data-md-color-scheme="default"] .md-header {
  background: var(--saif-cloud, #EEEEEE);
  border-bottom: 3px solid var(--forge-flame, #ff6b35);
}

[data-md-color-scheme="default"] .md-header .md-header__title,
[data-md-color-scheme="default"] .md-header .md-header__title .md-ellipsis,
[data-md-color-scheme="default"] .md-header .md-header__topic .md-ellipsis {
  color: var(--forge-anvil, #434343);
}

[data-md-color-scheme="default"] .md-header .md-icon,
[data-md-color-scheme="default"] .md-header .md-icon svg {
  color: var(--forge-anvil, #434343);
  fill: var(--forge-anvil, #434343);
}

/* -------------------------------------------------------------------------
   Header - Dark Mode
   ------------------------------------------------------------------------- */
[data-md-color-scheme="slate"] .md-header {
  background: var(--forge-anvil, #434343);
  border-bottom: 3px solid var(--forge-flame, #ff6b35);
}

[data-md-color-scheme="slate"] .md-header .md-header__title,
[data-md-color-scheme="slate"] .md-header .md-header__title .md-ellipsis,
[data-md-color-scheme="slate"] .md-header .md-header__topic .md-ellipsis {
  color: #ffffff;
}

[data-md-color-scheme="slate"] .md-header .md-icon,
[data-md-color-scheme="slate"] .md-header .md-icon svg {
  color: #ffffff;
  fill: #ffffff;
}

/* Logo visibility - use light logo for dark mode */
[data-md-color-scheme="slate"] .md-header .md-logo img[src*="forge-64x64.svg"] {
  content: url('../icons/forge-64x64-light.svg');
}

/* -------------------------------------------------------------------------
   Navigation Tabs - Light Mode
   ------------------------------------------------------------------------- */
[data-md-color-scheme="default"] .md-tabs {
  background: rgba(0, 0, 0, 0.05);
}

[data-md-color-scheme="default"] .md-tabs .md-tabs__link {
  color: var(--saif-graphite, #323131);
  font-weight: var(--font-weight-medium, 500);
}

[data-md-color-scheme="default"] .md-tabs .md-tabs__link:hover {
  color: var(--forge-anvil, #434343);
}

[data-md-color-scheme="default"] .md-tabs .md-tabs__link--active,
[data-md-color-scheme="default"] .md-tabs .md-tabs__item--active .md-tabs__link {
  color: var(--forge-flame, #ff6b35);
  font-weight: var(--font-weight-semibold, 600);
}

/* -------------------------------------------------------------------------
   Navigation Tabs - Dark Mode
   ------------------------------------------------------------------------- */
[data-md-color-scheme="slate"] .md-tabs {
  background: rgba(0, 0, 0, 0.15);
}

[data-md-color-scheme="slate"] .md-tabs .md-tabs__link {
  color: rgba(255, 255, 255, 0.9);
  font-weight: var(--font-weight-medium, 500);
}

[data-md-color-scheme="slate"] .md-tabs .md-tabs__link:hover {
  color: #ffffff;
}

[data-md-color-scheme="slate"] .md-tabs .md-tabs__link--active,
[data-md-color-scheme="slate"] .md-tabs .md-tabs__item--active .md-tabs__link {
  color: var(--forge-flame, #ff6b35);
  font-weight: var(--font-weight-semibold, 600);
}

/* -------------------------------------------------------------------------
   Sidebar Navigation
   ------------------------------------------------------------------------- */
.md-nav .md-nav__link--active {
  color: var(--forge-flame, #ff6b35);
  font-weight: var(--font-weight-semibold, 600);
}

[data-md-color-scheme="slate"] .md-nav .md-nav__link--active {
  color: var(--forge-flame-light, #ff8a5c);
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.md-footer {
  background: var(--forge-anvil, #434343);
}

.md-footer-meta {
  background: var(--saif-graphite, #323131);
}


/* ==========================================================================
   3. COMPONENTS - Reusable UI Patterns
   ========================================================================== */

/* -------------------------------------------------------------------------
   Hero Section (Homepage)

   Scoped color scheme for dark background with controlled text colors.
   ------------------------------------------------------------------------- */
.forge-hero {
  /* Scoped color overrides for dark background */
  --hero-text-color: #ffffff;
  --hero-heading-color: var(--forge-flame, #ff6b35);
  --hero-link-color: #ffffff;

  background: linear-gradient(135deg, var(--forge-anvil, #434343) 0%, var(--forge-anvil-light, #5a5a5a) 100%);
  padding: var(--spacing-lg, 1rem);
  margin: calc(-1 * var(--spacing-lg, 1rem)) calc(-1 * var(--spacing-lg, 1rem)) var(--spacing-md, 0.75rem) calc(-1 * var(--spacing-lg, 1rem));
  border-radius: 0 0 var(--spacing-sm, 0.5rem) var(--spacing-sm, 0.5rem);
  text-align: center;
  border-bottom: var(--spacing-xs, 0.25rem) solid var(--forge-flame, #ff6b35);
}

.forge-hero h1,
.forge-hero h2 {
  color: var(--hero-heading-color);
  font-size: var(--font-size-lg, 1.75rem);
  margin-bottom: var(--spacing-sm, 0.5rem);
  font-weight: var(--font-weight-bold, 700);
}

.forge-hero p {
  color: var(--hero-text-color);
  font-size: var(--font-size-root, 1rem);
  margin-bottom: var(--spacing-md, 0.75rem);
  opacity: 1;
}

/* Dark mode hero adjustments */
[data-md-color-scheme="slate"] .forge-hero {
  --hero-heading-color: var(--forge-flame-light, #ff8a5c);
}

.forge-hero a.headerlink {
  color: rgba(255, 255, 255, 0.5);
}

.forge-hero a:not(.headerlink) {
  color: var(--hero-link-color);
  text-decoration: none;
  padding: var(--spacing-sm, 0.5rem) var(--spacing-lg, 1rem);
  margin: 0 var(--spacing-sm, 0.5rem);
  display: inline-block;
  border-radius: var(--spacing-xs, 0.25rem);
  font-weight: var(--font-weight-semibold, 600);
  font-size: var(--font-size-root, 1rem);
  transition: all 0.2s ease;
}

.forge-hero a:not(.headerlink):first-of-type {
  background-color: var(--forge-flame, #ff6b35);
  border: 2px solid var(--forge-flame, #ff6b35);
}

.forge-hero a:not(.headerlink):first-of-type:hover {
  background-color: var(--forge-flame-dark, #e55a2b);
  border-color: var(--forge-flame-dark, #e55a2b);
}

.forge-hero a:not(.headerlink):last-of-type {
  background-color: transparent;
  border: 2px solid var(--forge-flame, #ff6b35);
  color: var(--forge-flame, #ff6b35);
}

.forge-hero a:not(.headerlink):last-of-type:hover {
  background-color: rgba(255, 107, 53, 0.1);
}

/* -------------------------------------------------------------------------
   Feature Cards Grid

   Usage: Homepage and landing pages for multi-option navigation.
   Classes: .feature-cards (container), .feature-card (items)
   See: docs/contributing/design-system.md
   ------------------------------------------------------------------------- */
.feature-cards,
.forge-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing-xl, 1.5rem);
  margin: var(--spacing-xxl, 2rem) 0;
}

.feature-card,
.forge-feature-card {
  background: var(--md-default-bg-color, #ffffff);
  border: 1px solid var(--md-default-fg-color--lightest, #DFDEDE);
  border-radius: var(--spacing-sm, 0.5rem);
  padding: var(--spacing-xl, 1.5rem);
  transition: all 0.2s ease;
  text-decoration: none;
  color: inherit;
  display: block;
}

.feature-card:hover,
.forge-feature-card:hover {
  border-color: var(--forge-flame, #ff6b35);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.feature-card h3,
.forge-feature-card h3 {
  color: var(--forge-flame, #ff6b35);
  margin-top: 0;
  margin-bottom: var(--spacing-sm, 0.5rem);
  font-size: var(--font-size-md, 1.17rem);
}

.feature-card p,
.forge-feature-card p {
  color: var(--md-default-fg-color--light, #747272);
  margin: 0;
  font-size: var(--font-size-root, 1rem);
}

/* -------------------------------------------------------------------------
   Custom Admonitions
   ------------------------------------------------------------------------- */

/* Platform admonition - for platform-specific guidance */
.md-typeset .admonition.platform,
.md-typeset details.platform {
  border-color: var(--saif-pacific, #007ACC);
}

.md-typeset .platform > .admonition-title,
.md-typeset .platform > summary {
  background-color: rgba(0, 122, 204, 0.1);
}

.md-typeset .platform > .admonition-title::before,
.md-typeset .platform > summary::before {
  background-color: var(--saif-pacific, #007ACC);
  -webkit-mask-image: var(--md-admonition-icon--info);
  mask-image: var(--md-admonition-icon--info);
}

/* Forge admonition - for forge-specific features */
.md-typeset .admonition.forge,
.md-typeset details.forge {
  border-color: var(--forge-flame, #ff6b35);
}

.md-typeset .forge > .admonition-title,
.md-typeset .forge > summary {
  background-color: rgba(255, 107, 53, 0.1);
}

.md-typeset .forge > .admonition-title::before,
.md-typeset .forge > summary::before {
  background-color: var(--forge-flame, #ff6b35);
  -webkit-mask-image: var(--md-admonition-icon--tip);
  mask-image: var(--md-admonition-icon--tip);
}

/* Security admonition - for security-related notices */
.md-typeset .admonition.security,
.md-typeset details.security {
  border-color: var(--saif-poppy, #E01F22);
}

.md-typeset .security > .admonition-title,
.md-typeset .security > summary {
  background-color: rgba(224, 31, 34, 0.1);
}

.md-typeset .security > .admonition-title::before,
.md-typeset .security > summary::before {
  background-color: var(--saif-poppy, #E01F22);
  -webkit-mask-image: var(--md-admonition-icon--warning);
  mask-image: var(--md-admonition-icon--warning);
}

/* -------------------------------------------------------------------------
   Enhanced Tables
   ------------------------------------------------------------------------- */
.md-typeset table:not([class]) {
  border-radius: var(--spacing-sm, 0.5rem);
  overflow: hidden;
  border: 1px solid var(--md-default-fg-color--lightest, #DFDEDE);
}

.md-typeset table:not([class]) thead {
  background: linear-gradient(135deg, var(--forge-anvil, #434343) 0%, var(--forge-anvil-light, #5a5a5a) 100%);
}

.md-typeset table:not([class]) th {
  color: #ffffff;
  font-weight: var(--font-weight-semibold, 600);
}

/* -------------------------------------------------------------------------
   Version Badges

   Usage: Inline indicators for version/release status in tables and text.
   Classes: .version-badge.new, .version-badge.beta, .version-badge.deprecated
   See: docs/contributing/design-system.md
   ------------------------------------------------------------------------- */
.version-badge {
  display: inline-block;
  padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
  font-size: var(--font-size-xs, 0.67rem);
  font-weight: var(--font-weight-bold, 700);
  border-radius: var(--spacing-xs, 0.25rem);
  line-height: 1;
  margin-left: var(--spacing-xs, 0.25rem);
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.version-badge.new {
  background-color: var(--saif-evergreen, #4F7E11);
  color: #ffffff;
}

.version-badge.deprecated {
  background-color: var(--saif-poppy, #E01F22);
  color: #ffffff;
}

.version-badge.beta {
  background-color: var(--saif-lemon, #FACB47);
  color: var(--forge-anvil, #434343);
}

/* -------------------------------------------------------------------------
   Quick Links Section

   Usage: Pill-styled navigation links for index pages and resource sections.
   Classes: .quick-links (container with flex layout)
   See: docs/contributing/design-system.md
   ------------------------------------------------------------------------- */
.quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md, 0.75rem);
  margin: var(--spacing-xl, 1.5rem) 0;
}

.quick-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm, 0.5rem);
  padding: var(--spacing-sm, 0.5rem) var(--spacing-lg, 1rem);
  background: var(--md-default-bg-color, #ffffff);
  border: 1px solid var(--md-default-fg-color--lightest, #DFDEDE);
  border-radius: var(--spacing-xl, 1.5rem);
  text-decoration: none;
  color: var(--md-default-fg-color, #323131);
  font-size: var(--font-size-sm, 0.83rem);
  transition: all 0.2s ease;
}

.quick-links a:hover {
  border-color: var(--forge-flame, #ff6b35);
  color: var(--forge-flame, #ff6b35);
}

/* -------------------------------------------------------------------------
   Status Indicators

   Usage: Feature/component maturity indicators with colored dots.
   Classes: .status.stable, .status.preview, .status.deprecated
   See: docs/contributing/design-system.md
   ------------------------------------------------------------------------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs, 0.25rem);
  font-size: var(--font-size-sm, 0.83rem);
  font-weight: var(--font-weight-medium, 500);
}

.status::before {
  content: "";
  width: var(--spacing-sm, 0.5rem);
  height: var(--spacing-sm, 0.5rem);
  border-radius: 50%;
}

.status.stable::before {
  background-color: var(--saif-evergreen, #4F7E11);
}

.status.preview::before {
  background-color: var(--saif-lemon, #FACB47);
}

.status.deprecated::before {
  background-color: var(--saif-poppy, #E01F22);
}


/* ==========================================================================
   4. UTILITIES - Responsive Adjustments
   ========================================================================== */

@media screen and (max-width: 76.1875em) {
  .forge-hero {
    margin: calc(-1 * var(--spacing-sm, 0.5rem)) calc(-1 * var(--spacing-sm, 0.5rem)) var(--spacing-md, 0.75rem) calc(-1 * var(--spacing-sm, 0.5rem));
    padding: var(--spacing-md, 0.75rem);
  }

  .forge-hero h1 {
    font-size: var(--font-size-lg, 1.75rem);
  }

  .feature-cards {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 44.9375em) {
  .forge-hero {
    padding: var(--spacing-md, 0.75rem) var(--spacing-sm, 0.5rem);
  }

  .forge-hero h1 {
    font-size: var(--font-size-md, 1.17rem);
  }

  .forge-hero p {
    font-size: var(--font-size-root, 1rem);
  }
}