/* ============================================================
   Signal Edge – Brand Theme CSS v1.0
   Link this in every HTML page.
   ============================================================ */

html {
    /* 1. Stop mobile browsers from artificially scaling text based on DPI */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;

    /* 2. Guarantee that 1rem exactly equals standard 16px */
    font-size: 100%;
}


/* ============================================================
   [ZONE: VARIABLES] Custom Properties & Design Tokens
   ============================================================ */
:root {
  /* Colors */
  --twilight-indigo: #2C2A4A;
  --compass-cyan: #00B6C4;
  --signal-gold: #FFB400;
  --hex-dust-grey: #A8A8A2;
  --fogged-vellum: #EDEAE2;

  /* Theme roles (Material mapping) */
  --color-surface: var(--twilight-indigo);
  --color-on-surface: var(--fogged-vellum);
  --color-on-surface-variant: var(--hex-dust-grey);
  --color-primary: var(--compass-cyan);
  --color-on-primary: var(--twilight-indigo);
  --color-secondary: var(--signal-gold);
  --color-on-secondary: var(--twilight-indigo);
  --color-outline: var(--hex-dust-grey);
  
  /* Additional UI Colors */
  --color-surface-container: #373557;
  --color-progress-container: #3A3860;
  --color-error: #a43e00;
  --color-error-variant: #a73064;

  /* Typography */
  --font-system: 'IBM Plex Mono', 'Courier New', Consolas, monospace;
  --font-human: 'Inter', 'Segoe UI', Roboto, sans-serif;

  /* Type scale */

  --fs-title:1.2rem;
  --fs-body:1rem;

  --fs-command:0.95rem;
  --fs-status: 0.8rem;



  --lh-title: 1.4;
  --lh-command: 1.2;
  --lh-status: 1.4;
  --lh-body: 1.6;
  --ls-title: 0.06em;
  --ls-command: 0.06em;
  --ls-status: 0.08em;
  --ls-body: 0;

  /* Spacing (8px grid) */
  --space-xs: clamp(4px, 1vw, 8px);
  --space-sm: clamp(8px, 2vw, 16px);
  --space-md: clamp(12px, 3vw, 24px);
  --space-lg: clamp(16px, 4vw, 32px);
  --space-xl: clamp(24px, 6vw, 48px);
  --grid: 8px;

  /* Shape */
  --chamfer: 4px;
  --radius-sm: 2px;
  --stroke: 1px;

  /* Glow tokens */
  --glow-cyan-hover: 0 0 6px 2px rgba(0,182,196,0.55), 0 0 14px 4px rgba(0,182,196,0.25);
  --glow-cyan-active: 0 0 10px 3px rgba(0,182,196,0.75), 0 0 22px 6px rgba(0,182,196,0.35);
  --glow-gold-pulse: 0 0 10px 3px rgba(255,180,0,0.7);
  --duration-micro-win: 0.28s;
  --duration-ripple: 0.75s;
  --duration-glow-transition: 0.15s;

    /* Dynamic Script Variables */
  --glass-alpha: 0; /* JS will overwrite this, but it defaults to 0 */

}

/* ============================================================
   [ZONE: RESET] Base Element Normalization
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background: var(--color-surface);
  color: var(--color-on-surface);
  font-family: var(--font-human);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  min-height: 100vh;
}

/* ============================================================
   [ZONE: TYPOGRAPHY] Core Text Classes
   ============================================================ */
.text-title, h1 {
  font-family: var(--font-system);
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-title);
  color: var(--color-on-surface);
  margin-bottom: var(--space-sm);
}

.text-command, .btn {
  font-family: var(--font-system);
  font-size: var(--fs-command);
  line-height: var(--lh-command);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-command);
}

.text-command-bold {
  font-family: var(--font-system);
  font-size: var(--fs-command);
  line-height: var(--lh-command);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: var(--ls-command);
}

.text-status, .status-label {
  font-family: var(--font-system);
  font-size: var(--fs-status);
  line-height: var(--lh-status);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--ls-status);
  color: var(--color-on-surface-variant);
}

.text-body, p, span:not(.text-status):not(.text-command):not(.text-command-bold):not(.text-title) {
  font-family: var(--font-human);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--color-on-surface);
}

/* ============================================================
   [ZONE: COMPONENTS] Buttons & Inputs
   ============================================================ */
.btn, .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  clip-path: polygon(
    var(--chamfer) 0%, 100% 0%,
    100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%,
    0% 100%, 0% var(--chamfer)
  );
  transition: box-shadow var(--duration-glow-transition), color var(--duration-glow-transition);
  min-height: 48px;
  outline: none;
}

/* Reusable Loader Button Pattern */
.btn-with-loader {
  gap: var(--space-sm);
}

.btn-with-loader .btn-loader {
  display: none;
  height: 32px;
  align-items: center;
}

.btn:hover, .btn-primary:hover {
  box-shadow: var(--glow-cyan-hover);
  color: #fff;
}

.btn:active, .btn-primary:active {
  box-shadow: var(--glow-cyan-active);
  color: #fff;
}

/* Outline button (used sparingly) */
.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border: var(--stroke) solid var(--color-primary);
}

.btn-outline:hover {
  box-shadow: var(--glow-cyan-hover);
  color: #fff;
  border-color: #33d6e0;
}

/* Secondary (Gold) button – for special actions */
.btn-secondary {
  background: transparent;
  color: var(--color-secondary);
  border: var(--stroke) solid var(--color-secondary);
}

.btn-secondary:hover {
  box-shadow: var(--glow-gold-pulse);
  color: #fff;
  border-color: #ffc733;
}

/* ============================================================
   [ZONE: COMPONENTS] Cards & Layout Containers
   ============================================================ */
.card {
  background: var(--color-surface);
  border: var(--stroke) solid var(--color-outline);
  padding: var(--space-md);
  clip-path: polygon(
    var(--chamfer) 0%, 100% 0%,
    100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%,
    0% 100%, 0% var(--chamfer)
  );
}

.card-insight {
  border-left: 4px solid var(--color-secondary);
}

/* ---------- Hex-Ring (static, component use via class) ---------- */
.hex-ring {
  width: 120px;
  height: 120px;
}

.hex-ring svg polygon.hex-empty {
  fill: none;
  stroke: var(--color-outline);
  stroke-width: 2;
  stroke-dasharray: 2 4;
}

.hex-ring svg polygon.hex-fill {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 4;
  stroke-linecap: round;
  filter: url(#cyan-glow);
}

/* ---------- Vault Door (circular iris) ---------- */
.vault-door {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px solid var(--color-secondary);
  background: radial-gradient(circle at 30% 30%, rgba(255,180,0,0.15), var(--color-surface));
  box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.vault-door .vault-label {
  font-family: var(--font-system);
  font-size: 0.8rem;
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Locked glow (applied when session complete) */
.vault-door.locked {
  box-shadow: var(--glow-gold-pulse), inset 0 0 20px rgba(0,0,0,0.5);
}

/* ---------- Utility: Gold highlight ---------- */
.text-gold {
  color: var(--color-secondary);
}

/* ---------- Links ---------- */
a {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px dotted var(--color-primary);
  transition: color var(--duration-glow-transition);
}

a:hover {
  color: var(--color-secondary);
  border-bottom-color: var(--color-secondary);
}

/* ============================================================
   [ZONE: LAYOUT] Global Navigation
   ============================================================ */

.global-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Reduced horizontal padding: 16px min, 5vw preferred, 64px max */
    padding: var(--space-md) clamp(16px, 5vw, 64px);
    z-index: 100;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.brand-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.brand-glyph {
    height: 48px;
    width: auto;
    transition: filter var(--duration-glow-transition);
}

.brand-name {
    font-size: var(--fs-title);
    font-weight: 700;
    color: var(--color-on-surface);
    letter-spacing: 0.1em;
    transition: color var(--duration-glow-transition);
}

/* Hover Interaction using your existing CSS tokens */
.brand-link:hover .brand-glyph {
    filter: drop-shadow(0 0 6px rgba(0,182,196,0.55));
}

.brand-link:hover .brand-name {
    color: var(--color-primary);
}

/* Nav Links */
.nav-links {
    display: flex;
    gap: var(--space-lg);
    align-items: center;
    margin-left: calc(var(--space-lg) * 2);

    /* 1. Force the text to pure white for the math to work */
    color: var(--color-on-surface);

    /* 2. Turn on the reactive inversion engine */
    mix-blend-mode: difference;
}

.nav-link {
    font-family: var(--font-system);
    font-size: var(--fs-command);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--ls-command);
    /*color: var(--color-on-surface-variant);*/
    text-decoration: none;
    border: none;
    transition: color var(--duration-glow-transition);

    /* 1. Force the text to pure white for the math to work */
    color: var(--color-on-surface);

    /* 2. Turn on the reactive inversion engine */
    mix-blend-mode: difference;
}

.nav-link:hover {
    color: var(--color-primary);
}

/* ============================================================
   [ZONE: LAYOUT] Hero & Banner Sections
   ============================================================ */
.hero-bg-wrapper {
    position: relative;
    width: 100%;
    min-height: 85vh;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    background-color: var(--twilight-indigo);
}

.hero-bg-wrapper::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15vh;
    background: linear-gradient(to bottom, transparent, var(--twilight-indigo));
    pointer-events: none;
    z-index: 1;
}

.hero-container {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 60rem;
    margin: 0 auto;
    /* Matched reduced horizontal padding */
    padding: var(--space-xl) clamp(16px, 5vw, 64px);
}

main.hero-container {
    padding-top: 8rem;
    padding-bottom: var(--space-xl);
}

.hero-content {
    max-width: 37.5rem; /* Converted from 600px */
    margin-bottom: var(--space-xl);

    /* --- New Glassmorphism Rules --- */
    /* Twilight Indigo RGB with dynamic alpha */
    background-color: rgba(44, 42, 74, var(--glass-alpha, 0));
    /* The blur scales up with the opacity (maxes out around 0.5rem) */
    backdrop-filter: blur(calc(var(--glass-alpha, 0) * 0.6rem));

    /* Give the text some breathing room inside the glass */
    padding: var(--space-lg);

    /* Optional: Apply your standard chamfer cut to the glass pane */
    clip-path: polygon(
      var(--chamfer) 0%, 100% 0%,
      100% calc(100% - var(--chamfer)),
      calc(100% - var(--chamfer)) 100%,
      0% 100%, 0% var(--chamfer)
    );
}

.hero-content .subheadline {
    color: var(--color-on-surface-variant);
    margin-bottom: var(--space-md);
}

.hero-content .micro-value {
    margin-bottom: var(--space-lg);
    font-weight: 600;
}

.transformation-text {
    margin-top: var(--space-lg);
    border-left: 2px solid var(--color-primary);
    padding-left: var(--space-sm);
    color: var(--color-on-surface-variant);
}

/* ---------- Artifacts Preview ---------- */
.artifacts-preview {
    width: 100%;
    position: relative;
    z-index: 10;
}

.artifacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.artifacts-preview-title {
    margin-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-outline);
    padding-bottom: var(--space-xs);
}

/* ---------- Card Utilities ---------- */
.card-muted {
    color: var(--color-on-surface-variant);
}

.card-desc {
    margin-bottom: var(--space-md);
}

.card-action {
    width: 100%;
}

.card-action-muted {
    width: 100%;
    border-color: var(--color-outline);
    color: var(--color-on-surface-variant);
    cursor: not-allowed;
}


/* ---------- Form Inputs ---------- */
.input-field {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: rgba(0, 0, 0, 0.15);
  border: var(--stroke) solid var(--color-outline);
  color: var(--color-on-surface);
  min-height: 48px;

  /* Apply the Signal Edge chamfer geometry */
  clip-path: polygon(
    var(--chamfer) 0%, 100% 0%,
    100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%,
    0% 100%, 0% var(--chamfer)
  );

  transition: border-color var(--duration-glow-transition), box-shadow var(--duration-glow-transition);
  outline: none;
}

.input-field::placeholder {
  color: var(--color-on-surface-variant);
  opacity: 0.5;
}

.input-field:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 8px 1px rgba(0, 182, 196, 0.25);
  background: var(--color-surface);
}

/* ---------- Flash Messages ---------- */
.flash-messages-container {
  position: fixed;
  bottom: var(--space-xl);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  pointer-events: none; /* Let clicks pass through the container */
  width: 100%;
  max-width: 400px;
  padding: 0 var(--space-md);
}

.flash-message {
  font-family: var(--font-human);
  font-size: var(--fs-status);
  font-weight: 600;
  letter-spacing: var(--ls-command);
  text-transform: capitalize;
  padding: var(--space-md);
  background: var(--color-surface-container);
  color: var(--color-on-surface);
  border: var(--stroke) solid var(--color-outline);
  clip-path: polygon(
    var(--chamfer) 0%, 100% 0%,
    100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%,
    0% 100%, 0% var(--chamfer)
  );
  pointer-events: auto; /* Re-enable clicks on the message itself */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  animation: slideUpFadeIn 0.3s ease-out forwards;
}

/* Modifiers for categories */
.flash-message.alert-success {
  border-left: 4px solid var(--color-secondary);
  color: var(--color-secondary);
}

.flash-message.alert-error {
  border-left: 4px solid var(--color-error);
  color: var(--color-error);
  box-shadow: 0 0 10px 2px rgba(164, 62, 0, 0.25);
}

.flash-message.alert-info,
.flash-message.alert-primary,
.flash-message.alert-message {
  border-left: 4px solid var(--color-primary);
  color: var(--color-primary);
}

/* Slide out animation for dismissal */
.flash-message.fade-out {
  animation: fadeOutDown 0.3s ease-in forwards;
}

@keyframes slideUpFadeIn {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

@keyframes fadeOutDown {
  from {
      opacity: 1;
      transform: translateY(0);
  }
}

/* ============================================================
   [ZONE: UTILITIES] Helper Classes
   ============================================================ */
.page-header {
    margin-bottom: var(--space-xl);
    border-bottom: 1px solid var(--color-outline);
    padding-bottom: var(--space-md);
}
.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.w-100 { width: 100%; }
.text-muted { color: var(--color-on-surface-variant); }