/* Layout Theme Variables */
:root {
  /* Default to dark theme */
  --layout-theme: dark;
  /* Default content wrapper radius */
  --layout-content-wrapper-radius: var(--layout-common-content-wrapper-radius);
}

/* Light theme variant */
.layout--theme-light {
  --layout-theme: light;
}

/* Dark theme variant */
.layout--theme-dark {
  --layout-theme: dark;
}

/* App Layout Component Styles */
.app-layout {
  overflow: hidden;
  display: flex;
  height: 100vh;
  overflow: var(--layout-page-overflow);
  background-color: var(--layout-page-bg);
}

.page-wrapper {
  height: 100%;
  background: var(--layout-content-wrapper-bg);
  overflow: auto;
  width: 100%;
  border-radius: var(--layout-content-wrapper-radius);
}

/* Content Wrapper Component Styles */
.content-wrapper {
  padding: var(--layout-content-wrapper-padding);
  max-width: var(--layout-content-wrapper-max-width);
  margin: 0 auto;
}

/* Page Header Component Styles */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--layout-page-header-gap);
  padding: var(--layout-page-header-padding);
  border-bottom: var(--layout-page-header-border);
}

.sidebar-area {
  display: flex;
  padding: var(--layout-page-padding) 0 var(--layout-page-padding)
    var(--layout-page-padding);
  height: 100%;
  border-right: var(--layout-sidebar-border-right);
}

.main-area {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
}

@media (min-width: 640px) {
  .main-area {
    padding: var(--layout-page-padding);
  }
}

/* Theme-specific variable mapping */
.layout--theme-light {
  /* Page - only theme-specific properties */
  --layout-page-bg: var(--layout-variants-light-page-bg);

  /* Content wrapper - only theme-specific properties */
  --layout-content-wrapper-bg: var(--layout-variants-light-content-wrapper-bg);

  /* Sidebar properties */
  --layout-sidebar-border-right: var(
    --layout-variants-light-sidebar-border-right
  );

  /* Common properties (inherited from common) */
  --layout-page-overflow: var(--layout-common-page-overflow);
  --layout-page-padding: var(--layout-common-page-padding);
  --layout-page-header-gap: var(--layout-common-page-header-gap);
  --layout-page-header-padding: var(--layout-common-page-header-padding);
  --layout-page-header-border: var(--layout-common-page-header-border);
  --layout-content-wrapper-radius: var(--layout-common-content-wrapper-radius);
  --layout-content-wrapper-padding: var(
    --layout-common-content-wrapper-padding
  );
  --layout-content-wrapper-max-width: var(
    --layout-common-content-wrapper-max-width
  );
}

.layout--theme-dark {
  --layout-page-bg: var(--layout-variants-dark-page-bg);
  --layout-page-overflow: var(--layout-variants-dark-page-overflow);
  --layout-page-padding: var(--layout-variants-dark-page-padding);
  --layout-page-header-gap: var(--layout-variants-dark-page-header-gap);
  --layout-page-header-padding: var(--layout-variants-dark-page-header-padding);
  --layout-page-header-border: var(--layout-variants-dark-page-header-border);
  --layout-content-wrapper-bg: var(--layout-variants-dark-content-wrapper-bg);
  --layout-content-wrapper-radius: var(--layout-common-content-wrapper-radius);
  --layout-content-wrapper-padding: var(
    --layout-variants-dark-content-wrapper-padding
  );
  --layout-content-wrapper-max-width: var(
    --layout-variants-dark-content-wrapper-max-width
  );
  --layout-sidebar-border-right: var(
    --layout-variants-dark-sidebar-border-right
  );
}