/* ───────────────────────────────────────────────────────────
 * CSS Constitution — Layer Order Declaration
 * I. Architectural Layers (Section II)
 *    Explicit cascade: reset → base → theme → components → utilities
 *    No specificity wars, no !important.
 * ─────────────────────────────────────────────────────────── */
@layer reset, base, theme, components, utilities;

/* ═══════════════════════════════════════════════════════════
 * II. THEME LAYER — Token System (Section III)
 *     All visuals are variable-driven. No hardcoded colors,
 *     font sizes, or spacing. @property enforces type safety
 *     and controls inheritance.
 * ═══════════════════════════════════════════════════════════ */
@layer theme {
    /* ── Type-safe system tokens ──
   * III.1 Variable-Only Visuals: forbids raw hex/pixel in components.
   * III.2 Type-Safe Tokens: @property with inherits toggles. */
    @property --bg-primary {
        syntax: "<color>";
        inherits: true;
        initial-value: #ffffff;
    }
    @property --bg-secondary {
        syntax: "<color>";
        inherits: true;
        initial-value: #f9fafb;
    }
    @property --text-primary {
        syntax: "<color>";
        inherits: true;
        initial-value: #1a1a1a;
    }
    @property --text-secondary {
        syntax: "<color>";
        inherits: true;
        initial-value: #6b7280;
    }
    @property --border-color {
        syntax: "<color>";
        inherits: true;
        initial-value: #e5e7eb;
    }
    @property --brand-color {
        syntax: "<color>";
        inherits: true;
        initial-value: #0070f3;
    }
    @property --brand-color-light {
        syntax: "<color>";
        inherits: true;
        initial-value: #3291ff;
    }

    /* III.3 Relative Systems: derived from base tokens */
    @property --brand-hover {
        syntax: "<color>";
        inherits: true;
        initial-value: #005cc9;
    }
    @property --code-bg {
        syntax: "<color>";
        inherits: true;
        initial-value: color-mix(
            in srgb,
            var(--text-primary, #1a1a1a) 5%,
            transparent
        );
    }

    /* ── Typography scale (fluid via clamp) ──
   * V.1 Fluid Typography: font-size: clamp(min, fluid-vw, max) */
    @property --font-size-display {
        syntax: "<length>";
        inherits: true;
        initial-value: clamp(1.75rem, 3.5vw, 2.5rem);
    }
    @property --font-size-h1 {
        syntax: "<length>";
        inherits: true;
        initial-value: clamp(1.625rem, 2.75vw, 2.25rem);
    }
    @property --font-size-h2 {
        syntax: "<length>";
        inherits: true;
        initial-value: clamp(1.375rem, 2.25vw, 1.75rem);
    }
    @property --font-size-h3 {
        syntax: "<length>";
        inherits: true;
        initial-value: clamp(1.125rem, 1.75vw, 1.5rem);
    }
    @property --font-size-body {
        syntax: "<length>";
        inherits: true;
        initial-value: clamp(0.9375rem, 1.25vw, 1rem);
    }
    @property --font-size-small {
        syntax: "<length>";
        inherits: true;
        initial-value: clamp(0.8125rem, 1vw, 0.875rem);
    }

    /* ── Spacing scale ──
   * V.2 Vertical Rhythm: lh units tie spacing to text flow */
    @property --space-xs {
        syntax: "<length>";
        inherits: false;
        initial-value: 0.25lh;
    }
    @property --space-sm {
        syntax: "<length>";
        inherits: false;
        initial-value: 0.5lh;
    }
    @property --space-md {
        syntax: "<length>";
        inherits: false;
        initial-value: 1lh;
    }
    @property --space-lg {
        syntax: "<length>";
        inherits: false;
        initial-value: 1.5lh;
    }
    @property --space-xl {
        syntax: "<length>";
        inherits: false;
        initial-value: 2lh;
    }

    /* ── Radius tokens ── */
    @property --radius-sm {
        syntax: "<length>";
        inherits: false;
        initial-value: 4px;
    }
    @property --radius-md {
        syntax: "<length>";
        inherits: false;
        initial-value: 6px;
    }

    /* ── Layout tokens ── */
    @property --content-max-width {
        syntax: "<length>";
        inherits: false;
        initial-value: 800px;
    }
    @property --gutter-padding {
        syntax: "<length>";
        inherits: false;
        initial-value: clamp(0.75rem, 1.5vw, 1rem);
    }
    /* ── Header / chrome tokens (component-level) ── */
    @property --logo-height {
        syntax: "<length>";
        inherits: true;
        initial-value: 1.5rem;
    }
    @property --profile-pic-size {
        syntax: "<length>";
        inherits: true;
        initial-value: 2rem;
    }
    @property --header-padding-y {
        syntax: "<length>";
        inherits: true;
        initial-value: 0.75lh;
    }
    @property --header-padding-x {
        syntax: "<length>";
        inherits: true;
        initial-value: var(--gutter-padding);
    }
    @property --header-gap {
        syntax: "<length>";
        inherits: true;
        initial-value: 1rem;
    }

    @property --action-gap {
        syntax: "<length>";
        inherits: true;
        initial-value: var(--space-sm);
    }
    @property --dropdown-min-width {
        syntax: "<length>";
        inherits: true;
        initial-value: 180px;
    }
    @property --transition-speed {
        syntax: "<time>";
        inherits: true;
        initial-value: 0.2s;
    }
    @property --icon-size {
        syntax: "<length>";
        inherits: true;
        initial-value: 1.25rem;
    }
    @property --icon-size-sm {
        syntax: "<length>";
        inherits: true;
        initial-value: 0.875rem;
    }

    /* ── Modern UI Tokens ── */
    @property --shadow-soft {
        syntax: "<string>";
        inherits: true;
        initial-value: "0 8px 32px rgba(0, 0, 0, 0.08)";
    }
    @property --glass-bg {
        syntax: "<color>";
        inherits: true;
        initial-value: rgba(255, 255, 255, 0.7);
    }
    @property --glass-border {
        syntax: "<color>";
        inherits: true;
        initial-value: rgba(255, 255, 255, 0.3);
    }
    @property --blur-md {
        syntax: "<length>";
        inherits: true;
        initial-value: 12px;
    }


    /* ── Light / Dark theme assignment ──
   * V.3 Media Query Strategy: update variable values, not selectors */
    :root {
        --logo-height: 1.5rem;
        --profile-pic-size: 2rem;
        --header-padding-y: 0.75lh;
        --header-padding-x: var(--gutter-padding);
        --header-gap: 1rem;
        --action-gap: var(--space-sm);
        --dropdown-min-width: 180px;
        --transition-speed: 0.2s;
        --icon-size: 1.25rem;
        --icon-size-sm: 0.875rem;
        --bg-primary: #fcfcfc; /* Subtle off-white to make glass pop */
        --bg-secondary: #f9fafb;
        --text-primary: #1a1a1a;
        --text-secondary: #6b7280;
        --border-color: #e5e7eb;
        --brand-color: #0070f3;
        --brand-hover: #005cc9;
        --code-bg: rgba(0, 0, 0, 0.05);
        --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.08);
        --glass-bg: rgba(255, 255, 255, 0.7);
        --glass-border: rgba(255, 255, 255, 0.3);
        --blur-md: 12px;
    }
    :root[data-theme="dark"] {
        --bg-primary: #121212;
        --bg-secondary: #1e1e1e;
        --text-primary: #ffffff;
        --text-secondary: #9ca3af;
        --border-color: #374151;
        --brand-color: #3291ff;
        --brand-hover: #60a5fa;
        --code-bg: rgba(255, 255, 255, 0.08);
        --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.4);
        --glass-bg: rgba(26, 26, 26, 0.7);
        --glass-border: rgba(255, 255, 255, 0.1);
    }
}

/* ═══════════════════════════════════════════════════════════
 * II. RESET LAYER — Normalize browser defaults
 * ═══════════════════════════════════════════════════════════ */
@layer reset {
    html {
        height: 100%;
    }
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }
    body {
        margin: 0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        font-family:
            system-ui,
            -apple-system,
            sans-serif;
        /* V.2 Vertical Rhythm: base line-height anchors lh units */
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        background: var(--bg-primary);
        color: var(--text-primary);
    }
}

/* ═══════════════════════════════════════════════════════════
 * III. BASE LAYER — Raw HTML element defaults
 * ═══════════════════════════════════════════════════════════ */
@layer base {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin-top: 0;
    }
    a {
        color: var(--brand-color);
        text-decoration: none;
    }
    a:hover {
        color: var(--brand-hover);
        text-decoration: underline;
    }
    img {
        max-width: 100%;
        height: auto;
    }
}

/* ═══════════════════════════════════════════════════════════
 * IV. COMPONENTS LAYER — Scoped UI Elements
 *     VI.1 "!important" Ban in effect.
 *     VI.2 Contextual Logic: architectural props (margin,
 *     position, grid-area) only applied by parent layouts.
 *     VI.3 Property Grouping: Layout → Box → Type → Visual → Misc
 * ═══════════════════════════════════════════════════════════ */
@layer components {
    /* ── Markdown-rendered element foundation ──
   * IV.1 Native Scoping (@scope) anchors to .md- prefixed roots */
    [class^="md-"],
    [class*=" md-"] {
        /* Layout */
        max-width: 100%;
        /* Box */
        /* Type */
        overflow-wrap: break-word;
        /* Visual */
        /* Misc */
    }

    /* ── md-h1 ── */
    .md-h1 {
        /* Type */
        font-size: var(--font-size-h1);
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: -0.025em;
        /* Box */
        margin-bottom: 0.5rem;
    }
    /* ── md-h2 ── */
    .md-h2 {
        /* Type */
        font-size: var(--font-size-h2);
        font-weight: 700;
        line-height: 1.25;
        /* Box */
        margin-bottom: 0.5rem;
    }
    /* ── md-h3 ── */
    .md-h3 {
        /* Type */
        font-size: var(--font-size-h3);
        font-weight: 600;
        line-height: 1.3;
        /* Box */
        margin-bottom: 0.5rem;
    }
    /* ── md-paragraph ── */
    .md-paragraph {
        /* Type */
        font-size: var(--font-size-body);
        line-height: 1.7;
        /* Box */
        margin-bottom: var(--space-md);
    }
    /* ── md-list ── */
    .md-list {
        /* Box */
        margin-bottom: var(--space-md);
        padding-left: 1.5rem;
    }
    /* ── md-list-item ── */
    .md-list-item {
        /* Box */
        margin-bottom: var(--space-xs);
    }
    /* ── md-code (inline) ── */
    .md-code {
        /* Type */
        font-size: 0.875em;
        /* Visual */
        background: var(--code-bg);
        border-radius: var(--radius-sm);
        /* Box */
        padding: 0.125rem 0.375rem;
    }
    /* ── md-image ── */
    .md-image {
        /* Visual */
        border-radius: var(--radius-md);
    }

    /* ── Container helpers ── */
    .md-section,
    .md-div {
        /* Layout */
        display: contents;
    }

    /* ── Home page layout ──
   * V.2 Intrinsic Sizing: auto-fit, minmax where applicable.
   * VI.2 Contextual Logic: margins applied by layout, not component. */
    .home-layout {
        /* Layout */
        max-width: var(--content-max-width);
        /* Box */
        margin: 0 auto;
        padding: var(--space-lg) var(--gutter-padding);
    }

    /* ── Shell sections ──
   * VI.2 Contextual Logic: ID selectors for shell layout — architectural.
   *
   * #header is now a semantic wrapper only. The header-auth Lit MFE handles
   * all visual layout via its Shadow DOM (flex, padding, border-bottom).
   * Non-JS fallback content inside the MFE slot div uses minimal inline styling. */
    #header {
        /* Layout */
        position: sticky;
        top: 0;
        z-index: 100;
        /* Visual */
        background: var(--glass-bg, rgba(255, 255, 255, 0.7));
        backdrop-filter: blur(var(--blur-md, 12px));
        -webkit-backdrop-filter: blur(var(--blur-md, 12px));
        border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.3));
        box-shadow: var(--shadow-soft, 0 8px 32px rgba(0, 0, 0, 0.08));
        transition: background-color var(--transition-speed, 0.2s) ease, box-shadow var(--transition-speed, 0.2s) ease;
    }
    #footer {
        /* Box */
        padding: var(--space-md, 1lh) var(--gutter-padding);
        /* Type */
        font-size: var(--font-size-small);
        text-align: center;
        color: var(--text-secondary);
        /* Visual */
        border-top: 1px solid var(--border-color);
        background: var(--bg-primary);
    }
    #body {
        /* Layout */
        display: flex;
        flex-direction: column;
        flex: 1;
        /* Box */
        width: 100%;
    }

    /* ── Generic Full-Height Utility ──
     * Apply to any container that needs its MFE children to fill the viewport.
     * Uses :where(*) to propagate flex-grow through all descendants. */
    .full-height {
      display: flex;
      flex-direction: column;
      flex: 1;
      align-self: stretch;
      width: 100%;
      min-height: 0;
      margin: 0;
      padding: 0;
    }

    .full-height :where(*) {
      display: flex;
      flex-direction: column;
      flex: 1;
      align-self: stretch;
      width: 100%;
    }
}

    /* ── Launch Hero v2 (Modern / Glassmorphic) ──
     * Used by 404.md and other high-impact system views.
     * Mimics the Register Interest MFE split layout. */
    .launch-hero-v2 {
      /* Layout */
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-xl, 2lh);
      flex: 1;
      /* Box */
      position: relative;
      width: 100%;
      max-width: var(--content-max-width, 800px);
      margin: 0 auto;
      padding: var(--space-xl) var(--gutter-padding);
      box-sizing: border-box;
      /* Visual */
      isolation: isolate;
    }

    /* Ambient glow blob to anchor the content */
    .launch-hero-v2::before {
      content: "";
      position: absolute;
      top: 50%;
      right: 0%;
      transform: translate(20%, -50%);
      width: min(600px, 100%);
      height: 400px;
      background: radial-gradient(
        circle,
        color-mix(in srgb, var(--brand-color, #0070f3), transparent 60%) 0%,
        transparent 70%
      );
      filter: blur(80px);
      z-index: -1;
      pointer-events: none;
    }

    @media (max-width: 768px) {
      .launch-hero-v2 {
        flex-direction: column;
        text-align: center;
        justify-content: center;
        padding-top: var(--space-lg);
      }
      .launch-hero-v2::before {
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
      }
    }

    .launch-hero-v2 .hero-content {
      /* Layout */
      display: flex;
      flex-direction: column;
      gap: var(--space-md, 1lh);
      flex: 1.2;
      text-align: left;
      z-index: 1;
    }

    @media (max-width: 768px) {
      .launch-hero-v2 .hero-content {
        text-align: center;
        align-items: center;
      }
    }

    .launch-hero-v2 .hero-title {
      /* Type */
      font-size: var(--font-size-display, clamp(1.75rem, 3.5vw, 2.5rem));
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -0.04em;
      /* Visual */
      color: var(--text-primary);
      /* Box */
      margin: 0;
    }

    .launch-hero-v2 .hero-subtitle {
      /* Type */
      font-size: var(--font-size-h3, clamp(1.125rem, 1.75vw, 1.5rem));
      color: var(--text-secondary);
      font-weight: 400;
      line-height: 1.5;
      /* Box */
      margin: 0;
      max-width: 40ch;
      font-style: italic;
    }

    .launch-hero-v2 .hero-actions {
      margin-top: var(--space-md);
    }

    .launch-hero-v2 .hero-cta {
      display: inline-flex;
      padding: var(--space-sm) var(--space-lg);
      background: var(--brand-color);
      color: white;
      border-radius: var(--radius-md);
      font-weight: 600;
      text-decoration: none;
      transition: all var(--transition-speed);
    }

    .launch-hero-v2 .hero-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-color), transparent 60%);
      color: white;
      text-decoration: none;
    }

    .launch-hero-v2 .hero-image-card {
      /* Layout */
      display: flex;
      align-items: center;
      justify-content: center;
      /* Box */
      width: 100%;
      max-width: 400px;
      padding: var(--space-md);
      /* Visual */
      background: var(--glass-bg, rgba(255, 255, 255, 0.7));
      backdrop-filter: blur(var(--blur-md, 12px));
      -webkit-backdrop-filter: blur(var(--blur-md, 12px));
      border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.3));
      border-radius: var(--radius-lg, 1.5rem);
      box-shadow: 
        var(--shadow-soft, 0 8px 32px rgba(0, 0, 0, 0.08)),
        0 0 0 1px color-mix(in srgb, var(--brand-color, #0070f3), transparent 90%);
      z-index: 2;
      transition: transform var(--transition-speed, 0.3s) ease;
    }

    .launch-hero-v2:hover .hero-image-card {
      transform: translateY(-5px) rotate(1deg);
    }

    @media (max-width: 768px) {
      .launch-hero-v2 .hero-image-card {
        max-width: 280px;
      }
    }

    .launch-hero-v2 .launch-image {
      width: 100%;
      height: auto;
      border-radius: var(--radius-md);
    }

    /* ── Launch hero (system view) ── */
    .launch-hero {
      /* Layout */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      /* Box */
      min-height: 60vh;
      padding: var(--space-lg) var(--gutter-padding);
      gap: var(--space-md);
      text-align: center;
    }

    .launch-title {
      /* Type */
      font-size: var(--font-size-h1, clamp(1.625rem, 2.75vw, 2.25rem));
      font-weight: 800;
      line-height: 1.2;
      /* Box */
      margin: 0;
      /* Visual */
      color: var(--text-primary);
    }

    .launch-subtitle {
      /* Type */
      font-size: var(--font-size-body, clamp(0.9375rem, 1.25vw, 1rem));
      /* Box */
      margin: 0;
      /* Visual */
      color: color-mix(in srgb, var(--text-primary), transparent 30%);
    }

    .launch-note {
      /* Type */
      font-size: var(--font-size-small, clamp(0.8125rem, 1vw, 0.875rem));
      /* Box */
      margin: 0;
      /* Visual */
      color: var(--text-secondary, #6b7280);
    }

    .launch-image {
      /* Box */
      max-width: min(320px, 80vw);
      height: auto;
      /* Visual */
      border-radius: var(--radius-md, 0.5rem);
    }