/**
 * EEP UI/UX v3 — App Entry Point
 * Layer:    L05 (architecture)
 * Phase:    P0-S1
 *
 * Single entry point for v3 styles. Any page that wants the new design
 * system links ONLY this file:
 *
 *     <link rel="stylesheet" href="css/eep-app.css">
 *
 * This file declares the @layer cascade order and imports every other
 * stylesheet into its assigned layer. Specificity is controlled by
 * layer position (later layers win over earlier).
 *
 * Layer order (lowest specificity to highest):
 *   1. reset       — box-sizing, normalize
 *   2. tokens      — CSS custom properties
 *   3. primitives  — input, button, table, dialog, menu (P0-S4+)
 *   4. components  — shell, sidebar, topbar, grid, toolbar (P0-S2+)
 *   5. utilities   — spacing/sizing helpers (P0-S4+)
 *   6. overrides   — themes (dark, print), last-resort fixes (P4)
 *
 * Phase 0 ships only @layer reset + @layer tokens. Other layers
 * declared but empty — populated by subsequent sessions.
 */

/* v1.33.0 — `legacy` layer prepended (lowest specificity) so that
   pre-v3 unlayered stylesheets (css/app.css, eep-shell.css,
   mobile-polish.css, workspace-mobile.css) — which are now wrapped in
   `@layer legacy { ... }` — sit BELOW every v3 layer. Without this,
   unlayered author CSS won the cascade against `@layer components`
   regardless of specificity, which is the single root cause of every
   "frontend looks like v2 not v3" symptom from v1.28 through v1.32.
   Bug audit trail: v1.32.2 (dark tokens), v1.32.4 (body padding) both
   patched this symptom locally with unlayered overrides; this single
   layer change makes those hacks unnecessary. */
@layer legacy, reset, tokens, primitives, components, utilities, overrides;

/* Reset — box-sizing, normalize, focus defaults. */
@import url('./reset.css');

/* Tokens — every color, type size, spacing value, etc. */
@import url('./tokens.css');

/* Primitives — typography (P0-S4: Inter Tight + JetBrains Mono +
   .ty-* classes + legacy-bridge selectors). */
@import url('./primitives/typography.css');

/* Primitives — <eep-cell> (P2-S1). */
@import url('./primitives/cell.css');

/* Primitives — universal focus ring (P2-S7). */
@import url('./primitives/focus-ring.css');

/* Primitives — <eep-dialog> + <eep-drawer> (P2-S8). */
@import url('./primitives/dialog.css');
@import url('./primitives/drawer.css');

/* Components — <eep-grid> data grid (P2-S2). */
@import url('./components/data-grid.css');

/* Components — <eep-toolbar> context-aware icon toolbar (P2-S5). */
@import url('./components/toolbar.css');

/* Components — <eep-command-palette> Ctrl+P modal (P2-S6). */
@import url('./components/command-palette.css');

/* Components — shell (P0-S2: <eep-shell>, <eep-status-bar>). */
@import url('./components/shell.css');

/* Components — sidebar mode controller (Session 2A: auto / expanded /
   collapsed sidebar with hover-expand). */
@import url('./components/sidebar-mode.css');

/* Components — provenance (P0-S5: data-provenance color semantics). */
@import url('./components/provenance.css');

/* Components — iconography (P0-S5: <eep-icon> sizing + currentColor). */
@import url('./components/iconography.css');

/* Components — stage bar (P1-S2: 9-stage project flow). */
@import url('./components/stage-bar.css');

/* Components — workspace three-pane grid layout (P1-S3). */
@import url('./components/workspace-grid.css');

/* Components — <eep-tree> + <eep-inspector> (P1-S4). */
@import url('./components/tree.css');
@import url('./components/inspector.css');

/* Components — <eep-console> + <eep-status-bar> final (P1-S5). */
@import url('./components/console.css');
@import url('./components/status-bar.css');

/* Overrides — themes layer (P4-S1 + P4-S2). Print mode strips chrome
   and converts provenance colour to bracketed markers; dark theme
   overrides the token palette when the user toggles to dark or has
   prefers-color-scheme: dark on `system`. */
@import url('./themes/print.css');
@import url('./themes/dark.css');
@import url('./themes/mobile.css');

/* v1.36.4 — Pre-v3 stylesheets imported HERE so canonical Master
   Template pages (which only `<link>` eep-app.css) get the
   pre-v3 layout rules without each page having to list four
   stylesheets in <head>. Each of these files is internally wrapped
   in `@layer legacy { … }` (v1.33.0), so they cascade below every
   v3 layer above and never overpower tokens / components / themes.
   Critical rules still living in @layer legacy include:
     • aside.sidebar { position: fixed; … } — without this the
       sidebar would flow inline inside <eep-shell> at body.padding-
       left=240, overlapping main (root cause of the v1.36.4
       dashboard sidebar-at-x=240 regression).
     • .app-main flexbox + page-content padding
     • mobile-polish responsive tweaks
   Loading them via @import here means every shell page gets
   identical layout regardless of how many `<link>`s it lists. */
@import url('./app.css');
@import url('./eep-shell.css');
@import url('./mobile-polish.css');

/* ───────────────────────────────────────────────────────────
   Phase 0 baseline (only color + page background)
   This block establishes that tokens flow through. As more layers
   ship, this becomes redundant and moves into primitives/typography.
   ─────────────────────────────────────────────────────────── */
@layer components {
  html, body {
    background: var(--c-bg-app);
    color: var(--c-fg-default);
    font-family: var(--f-sans);
    font-size: var(--ts-md);
    line-height: var(--lh-default);
  }

  /* v1.36.21 — pre-paint marketing-hero hide.
     `auth-guard.js` stamps `html.eep-pre-app` synchronously in
     <head> when the user has a valid session. Hiding the
     marketing `.hero` (navy gradient intro banner — same selector
     adapter SHELL_CSS uses, but ours fires PRE-paint) eliminates
     the "intro header flashes then disappears" FOUC the user
     reported. Tool-page `.tool-hero` blocks (intentional tool
     intros) are NOT hidden. */
  html.eep-pre-app .hero:not(.tool-hero),
  html.eep-pre-app .pub-nav,
  html.eep-pre-app .pub-header,
  html.eep-pre-app nav.pub-nav,
  html.eep-pre-app .eep-beta-bar,
  html.eep-pre-app #beta-banner,
  html.eep-pre-app .footer,
  html.eep-pre-app .pub-footer {
    display: none !important;
  }
}