/**
 * COEUS Design System V2 - Container-Aware Scaling
 *
 * PURPOSE:
 * Automatic font size scaling based on container nesting depth
 * Maintains visual hierarchy without manual size adjustments
 *
 * FEATURES:
 * - Automatic depth detection
 * - Progressive scaling (100% → 95% → 90% → 85%)
 * - Works with all typography classes
 * - No JavaScript required
 *
 * HOW IT WORKS:
 * Elements automatically scale based on their container depth:
 * - Level 0: Direct body children (100%)
 * - Level 1: Inside .container (100%)
 * - Level 2: Inside .glass-card (95%)
 * - Level 3: Inside .form-group (90%)
 * - Level 4+: Deep nesting (85%)
 */

/* ============================================ */
/*              DEPTH SCALE VARIABLES           */
/* ============================================ */
:root {
  /* Typography scaling factors */
  --depth-0-scale: 1;      /* Body level */
  --depth-1-scale: 1;      /* Container level */
  --depth-2-scale: 0.95;   /* Card level */
  --depth-3-scale: 0.9;    /* Form group level */
  --depth-4-scale: 0.85;   /* Deep nesting */

  /* Default depth scale */
  --depth-scale: 1;

  /* Glass opacity depth scales (0-1 range for rgba) */
  --glass-opacity-scale-0: 0.08;   /* Level 0: Very transparent (8%) */
  --glass-opacity-scale-1: 0.18;   /* Level 1: Moderate (18%) */
  --glass-opacity-scale-2: 0.30;   /* Level 2: More opaque (30%) */
  --glass-opacity-scale-3: 0.40;   /* Level 3+: Least transparent (40%) */

  /* Default glass opacity scale */
  --glass-opacity-scale: var(--glass-opacity-scale-0);
}

/* ============================================ */
/*           CONTAINER DEPTH DETECTION          */
/* ============================================ */

/**
 * Level 0: Direct body children
 * Examples: Hero sections, modals, overlays
 */
body > * {
  --depth-scale: var(--depth-0-scale);
  --glass-opacity-scale: var(--glass-opacity-scale-0);
}

/**
 * Level 1: Main containers
 * Examples: Page containers, main content areas
 */
.container,
.main-container,
.app-container {
  --depth-scale: var(--depth-1-scale);
  --glass-opacity-scale: var(--glass-opacity-scale-1);
}

/* Reset depth for container children */
.container > *,
.main-container > *,
.app-container > * {
  --depth-scale: var(--depth-1-scale);
  --glass-opacity-scale: var(--glass-opacity-scale-1);
}

/**
 * Level 2: Cards and panels
 * Examples: Glass cards, content boxes, panels
 */
.glass-card,
.coeus-box,
.panel,
.card {
  --depth-scale: var(--depth-2-scale);
  --glass-opacity-scale: var(--glass-opacity-scale-2);
}

/* Apply to all children */
.glass-card *,
.coeus-box *,
.panel *,
.card * {
  --depth-scale: var(--depth-2-scale);
  --glass-opacity-scale: var(--glass-opacity-scale-2);
}

/**
 * Level 3: Form groups and sections
 * Examples: Form fieldsets, nested sections
 */
.form-group,
.field-group,
.section-group,
.glass-card .glass-card,
.card .card {
  --depth-scale: var(--depth-3-scale);
  --glass-opacity-scale: var(--glass-opacity-scale-3);
}

/* Apply to all children */
.form-group *,
.field-group *,
.section-group *,
.glass-card .glass-card *,
.card .card * {
  --depth-scale: var(--depth-3-scale);
  --glass-opacity-scale: var(--glass-opacity-scale-3);
}

/**
 * Level 4+: Deep nesting
 * Examples: Nested modals, complex forms
 */
.form-group .form-group,
.glass-card .glass-card .glass-card,
.card .card .card {
  --depth-scale: var(--depth-4-scale);
  --glass-opacity-scale: var(--glass-opacity-scale-3); /* Max out at level 3 */
}

/* Apply to all deeply nested children */
.form-group .form-group *,
.glass-card .glass-card .glass-card *,
.card .card .card * {
  --depth-scale: var(--depth-4-scale);
  --glass-opacity-scale: var(--glass-opacity-scale-3); /* Max out at level 3 */
}

/* ============================================ */
/*            SPECIAL CONTAINERS                */
/* ============================================ */

/**
 * Modal dialogs - always use base scale
 * Modals float above the page hierarchy
 */
.modal,
.dialog,
[role="dialog"],
.radix-dialog-content {
  --depth-scale: var(--depth-0-scale) !important;
}

.modal *,
.dialog *,
[role="dialog"] *,
.radix-dialog-content * {
  --depth-scale: var(--depth-0-scale) !important;
}

/**
 * Navigation elements - consistent sizing
 * Navigation should not scale with content
 */
.nav,
.navbar,
.sidebar,
.header,
.footer {
  --depth-scale: var(--depth-1-scale) !important;
}

.nav *,
.navbar *,
.sidebar *,
.header *,
.footer * {
  --depth-scale: var(--depth-1-scale) !important;
}

/**
 * Tables - special handling
 * Table cells need consistent sizing
 */
table {
  --depth-scale: var(--depth-2-scale);
}

thead {
  --depth-scale: calc(var(--depth-scale) * 1.05); /* Slightly larger headers */
}

tbody {
  --depth-scale: var(--depth-scale);
}

/* ============================================ */
/*         RESPONSIVE DEPTH SCALING             */
/* ============================================ */

/* Mobile devices - less aggressive scaling */
@media (max-width: 48em) { /* 768px */
  :root {
    --depth-2-scale: 0.97;   /* Was 0.95 */
    --depth-3-scale: 0.94;   /* Was 0.9 */
    --depth-4-scale: 0.91;   /* Was 0.85 */
  }
}

/* Tablets - balanced scaling */
@media (min-width: 48em) and (max-width: 64em) { /* 768px - 1024px */
  :root {
    --depth-2-scale: 0.96;
    --depth-3-scale: 0.92;
    --depth-4-scale: 0.88;
  }
}

/* Large screens - original scaling */
@media (min-width: 64em) { /* 1024px+ */
  :root {
    --depth-2-scale: 0.95;
    --depth-3-scale: 0.9;
    --depth-4-scale: 0.85;
  }
}

/* ============================================ */
/*           MANUAL DEPTH OVERRIDES             */
/* ============================================ */

/* Utility classes for manual depth control */
.depth-0 { --depth-scale: var(--depth-0-scale) !important; }
.depth-1 { --depth-scale: var(--depth-1-scale) !important; }
.depth-2 { --depth-scale: var(--depth-2-scale) !important; }
.depth-3 { --depth-scale: var(--depth-3-scale) !important; }
.depth-4 { --depth-scale: var(--depth-4-scale) !important; }

/* Disable scaling for specific elements */
.no-depth-scale,
.no-depth-scale * {
  --depth-scale: 1 !important;
}

/* ============================================ */
/*              DEBUG HELPERS                   */
/* ============================================ */

/* Enable with class="debug-depth" on body */
.debug-depth *::before {
  content: attr(data-depth-scale);
  position: absolute;
  top: 0;
  right: 0;
  background: red;
  color: white;
  font-size: 10px;
  padding: 2px 4px;
  z-index: 9999;
  pointer-events: none;
}

/* Show depth scale value in dev tools */
.debug-depth [style*="--depth-scale"]::after {
  content: "Depth: " var(--depth-scale);
  display: block;
  font-size: 10px;
  color: red;
  margin-top: -10px;
}

/* ============================================ */
/*           INTEGRATION EXAMPLES               */
/* ============================================ */

/**
 * EXAMPLE 1: Standard page layout
 *
 * <body>                                  <!-- depth-0: 100% -->
 *   <div class="container">               <!-- depth-1: 100% -->
 *     <div class="glass-card">            <!-- depth-2: 95% -->
 *       <h1 class="heading-1">Title</h1>  <!-- Uses 95% scale -->
 *       <div class="form-group">          <!-- depth-3: 90% -->
 *         <label class="form-label">...   <!-- Uses 90% scale -->
 *       </div>
 *     </div>
 *   </div>
 * </body>
 */

/**
 * EXAMPLE 2: Modal dialog (no scaling)
 *
 * <div class="modal">                     <!-- depth-0: 100% forced -->
 *   <div class="modal-content">
 *     <h2 class="heading-2">Modal</h2>    <!-- Uses 100% scale -->
 *     <div class="form-group">            <!-- Still 100% in modal -->
 *       <input type="text">                <!-- No scaling -->
 *     </div>
 *   </div>
 * </div>
 */

/**
 * EXAMPLE 3: Manual override
 *
 * <div class="glass-card depth-1">        <!-- Override to 100% -->
 *   <h2 class="heading-2">Full Size</h2>  <!-- Uses 100% scale -->
 * </div>
 */

/* ============================================ */
/*              PERFORMANCE NOTES               */
/* ============================================ */

/**
 * CSS custom properties (variables) are highly performant:
 * - Calculated once per element
 * - Cached by browser
 * - No JavaScript required
 * - Works with all modern browsers
 *
 * Browser support:
 * - Chrome 49+
 * - Firefox 31+
 * - Safari 9.1+
 * - Edge 15+
 *
 * Fallback for older browsers:
 * Elements will use base size (100%) if CSS variables not supported
 */