/* ═══════════════════════════════════════════════════════════════════════════
   Fluxo Platform Design System v1.0
   Source of truth: Fluxo Platform Design System.md (Obsidian vault)
   Applies to: fluxotrade.co, /contracts/, app.fluxotrade.co, all samples
   Change protocol: discuss in claude.ai before editing any token
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Google Fonts ──────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600;700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

/* ── 2. CSS Custom Properties ─────────────────────────────────────────────── */
:root {

  /* ── Canonical platform tokens ── */

  /* Core palette */
  --fluxo-navy:        #0f1e30;
  --fluxo-navy-deep:   #091520;
  --fluxo-navy-mid:    #162840;
  --fluxo-gold:        #c8b478;
  --fluxo-gold-muted:  rgba(200,180,120,0.15);
  --fluxo-gold-border: rgba(200,180,120,0.30);
  --fluxo-warm-white:  #f0ead8;
  --fluxo-cream:       #f4f2ee;
  --fluxo-cream-dark:  #ede9e3;

  /* Text (on light backgrounds) */
  --fluxo-text-primary: #1e1c18;
  --fluxo-text-body:    #3d3a32;
  --fluxo-text-muted:   #7a7468;
  --fluxo-text-faint:   #a8a49c;

  /* Semantic colors */
  --fluxo-critical:    #dc2626;
  --fluxo-critical-bg: #fef2f2;
  --fluxo-high:        #d97706;
  --fluxo-high-bg:     #fffbeb;
  --fluxo-medium:      #b45309;
  --fluxo-medium-bg:   #fef9ec;
  --fluxo-pass:        #16a34a;
  --fluxo-pass-bg:     #f0fdf4;
  --fluxo-info:        #1d4ed8;
  --fluxo-info-bg:     #eff6ff;

  /* Borders */
  --fluxo-border:      rgba(0,0,0,0.09);
  --fluxo-border-med:  rgba(0,0,0,0.14);
  --fluxo-border-dark: rgba(0,0,0,0.22);

  /* Typography */
  --fluxo-font-display: 'Cormorant Garamond', Georgia, serif;
  --fluxo-font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* ── Backward-compatible aliases — cover all 7 sample files ── */

  /* Shared across all files */
  --navy:      var(--fluxo-navy);
  --navy-lt:   var(--fluxo-navy-mid);
  --navy-dark: var(--fluxo-navy-deep);
  --navy-mid:  var(--fluxo-navy-mid);
  --gold:      var(--fluxo-gold);
  --warm:      var(--fluxo-warm-white);
  --bg:        var(--fluxo-cream);
  --white:     #ffffff;
  --surface:   #ffffff;
  --text:      var(--fluxo-text-primary);
  --t1:        var(--fluxo-text-primary);
  --t2:        var(--fluxo-text-body);
  --t3:        var(--fluxo-text-muted);
  --b1:        rgba(0,0,0,0.09);
  --b2:        rgba(0,0,0,0.14);
  --green:     var(--fluxo-pass);
  --red:       var(--fluxo-critical);
  --amber:     var(--fluxo-high);
  --gold-rule: rgba(200,180,120,0.4);

  /* Border radius */
  --r:         8px;
  --rx:        14px;
  --radius:    10px;
  --radius-sm: 6px;

  /* Named border alias (design-samples/docs-* files) */
  --border:    var(--fluxo-border);

  /* Font aliases — marketing uses --fd/--fb, contracts use --fh/--fm */
  --fd: var(--fluxo-font-display);
  --fh: var(--fluxo-font-display);
  --fb: var(--fluxo-font-body);
  --fm: var(--fluxo-font-body);

  /* Severity — docs/contracts files */
  --crit:        var(--fluxo-critical);
  --crit-bg:     var(--fluxo-critical-bg);
  --crit-border: #fecaca;
  --high:        var(--fluxo-high);
  --high-bg:     var(--fluxo-high-bg);
  --high-border: #fde68a;
  --med:         var(--fluxo-medium);
  --med-bg:      var(--fluxo-medium-bg);
  --med-border:  #fef08a;
  --pass:        var(--fluxo-pass);
  --pass-bg:     var(--fluxo-pass-bg);
  --pass-border: #bbf7d0;
}

/* ── 3. Base reset and body defaults ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: var(--fluxo-font-body);
  background: var(--fluxo-cream);
  color: var(--fluxo-text-primary);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--fluxo-navy); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── 4. Typography classes ────────────────────────────────────────────────── */
.fluxo-display    { font-family: var(--fluxo-font-display); font-size: 32px; font-weight: 700; }
.fluxo-display-lg { font-family: var(--fluxo-font-display); font-size: 48px; font-weight: 700; }
.fluxo-display-sm { font-family: var(--fluxo-font-display); font-size: 24px; font-weight: 600; }
.fluxo-label      { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--fluxo-font-body); }
.fluxo-body       { font-size: 14px; font-weight: 400; line-height: 1.6; font-family: var(--fluxo-font-body); }
.fluxo-body-sm    { font-size: 12px; font-weight: 400; line-height: 1.55; font-family: var(--fluxo-font-body); }
.fluxo-note       { font-size: 12px; color: var(--fluxo-text-muted); line-height: 1.55; font-family: var(--fluxo-font-body); }

/* ── 5. Navigation ────────────────────────────────────────────────────────── */
.fluxo-nav {
  background: var(--fluxo-navy);
  height: 54px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(200,180,120,0.1);
}
.fluxo-nav-logo {
  font-family: var(--fluxo-font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--fluxo-warm-white);
  letter-spacing: 0.02em;
  flex-shrink: 0;
  text-decoration: none;
}
.fluxo-nav-divider {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.18);
  flex-shrink: 0;
}
.fluxo-nav-label {
  font-family: var(--fluxo-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fluxo-gold);
  flex-shrink: 0;
}
.fluxo-nav-spacer { flex: 1; }
.fluxo-nav-link {
  font-family: var(--fluxo-font-body);
  font-size: 13px;
  font-weight: 400;
  color: rgba(240,234,216,0.6);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 5px;
  text-decoration: none;
  transition: background .15s, color .15s;
  touch-action: manipulation;
}
.fluxo-nav-link:hover,
.fluxo-nav-link.active { color: rgba(240,234,216,1); background: rgba(255,255,255,0.08); }
.fluxo-nav-link:focus-visible { outline: 2px solid var(--fluxo-gold); outline-offset: 2px; }
.fluxo-nav-user {
  font-family: var(--fluxo-font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  gap: 8px;
}
.fluxo-nav-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--fluxo-gold);
  color: var(--fluxo-navy);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--fluxo-font-body);
}
.fluxo-nav-version {
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  font-family: var(--fluxo-font-body);
}

/* Connection status */
.fluxo-conn { display: flex; align-items: center; gap: 5px; }
.fluxo-conn-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fluxo-conn-dot.live        { background: #4caf7d; }
.fluxo-conn-dot.connecting  { background: #94a3b8; animation: fluxo-pulse 1.5s ease-in-out infinite; }
.fluxo-conn-dot.offline     { background: var(--fluxo-critical); }
.fluxo-conn-label { font-size: 11px; color: rgba(255,255,255,0.45); font-family: var(--fluxo-font-body); }
@keyframes fluxo-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── 6. Buttons ───────────────────────────────────────────────────────────── */

/* Primary — gold fill (main CTAs) */
.fluxo-btn-primary {
  background: var(--fluxo-gold);
  color: var(--fluxo-navy);
  font-family: var(--fluxo-font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 20px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
}
.fluxo-btn-primary:hover   { opacity: .88; }
.fluxo-btn-primary:focus-visible { outline: 2px solid var(--fluxo-gold); outline-offset: 2px; }

/* Secondary — navy fill */
.fluxo-btn-secondary {
  background: var(--fluxo-navy);
  color: var(--fluxo-warm-white);
  font-family: var(--fluxo-font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 20px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
}
.fluxo-btn-secondary:hover   { opacity: .85; }
.fluxo-btn-secondary:focus-visible { outline: 2px solid var(--fluxo-gold); outline-offset: 2px; }

/* Outline */
.fluxo-btn-outline {
  background: transparent;
  color: var(--fluxo-text-body);
  border: 1px solid var(--fluxo-border-med);
  font-family: var(--fluxo-font-body);
  font-size: 13px;
  font-weight: 400;
  padding: 8px 18px;
  border-radius: 6px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background .15s, color .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fluxo-btn-outline:hover   { background: var(--fluxo-gold-muted); color: var(--fluxo-navy); }
.fluxo-btn-outline:focus-visible { outline: 2px solid var(--fluxo-gold); outline-offset: 2px; }
.fluxo-btn-destructive { color: var(--fluxo-critical); border-color: rgba(220,38,38,0.3); }

/* ── 7. Cards ─────────────────────────────────────────────────────────────── */
.fluxo-card {
  background: #ffffff;
  border: 1px solid var(--fluxo-border);
  border-radius: 10px;
  padding: 20px 24px;
}
.fluxo-card-feature {
  background: #ffffff;
  border: 1px solid var(--fluxo-border);
  border-left: 2.5px solid rgba(200,180,120,0.6);
  border-radius: 10px;
  padding: 20px 24px;
}
.fluxo-card-selected {
  border: 1.5px solid var(--fluxo-gold);
  background: var(--fluxo-gold-muted);
}

/* ── 8. Severity badges & status dots ─────────────────────────────────────── */
.fluxo-badge {
  font-family: var(--fluxo-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.badge-critical { background: var(--fluxo-critical-bg); color: var(--fluxo-critical); }
.badge-high     { background: var(--fluxo-high-bg);     color: var(--fluxo-high); }
.badge-medium   { background: var(--fluxo-medium-bg);   color: var(--fluxo-medium); }
.badge-pass     { background: var(--fluxo-pass-bg);     color: var(--fluxo-pass); }
.badge-info     { background: var(--fluxo-info-bg);     color: var(--fluxo-info); }

.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-critical { background: var(--fluxo-critical); }
.dot-high     { background: var(--fluxo-high); }
.dot-medium   { background: var(--fluxo-medium); }
.dot-pass     { background: var(--fluxo-pass); }
.dot-muted    { background: rgba(0,0,0,0.2); }
.dot-gold     { background: var(--fluxo-gold); }
.dot-live     { background: #4caf7d; }

/* ── 9. Background texture (hero sections only) ───────────────────────────── */
.fluxo-texture {
  background-image:
    linear-gradient(rgba(200,180,120,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,180,120,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ── 10. Sandbox / trial bar ──────────────────────────────────────────────── */
.fluxo-sandbox-bar {
  background: var(--fluxo-navy-deep);
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  color: rgba(240,234,216,0.5);
  font-family: var(--fluxo-font-body);
  gap: 8px;
}
.fluxo-trial-pill {
  font-size: 11px;
  font-weight: 500;
  color: #b45309;
  background: #fef9ec;
  border: 1px solid rgba(180,83,9,0.2);
  padding: 2px 8px;
  border-radius: 10px;
  font-family: var(--fluxo-font-body);
}

/* ── 11. Section eyebrow pattern ──────────────────────────────────────────── */
.fluxo-eyebrow {
  font-family: var(--fluxo-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.fluxo-eyebrow-dark  { color: rgba(240,234,216,0.45); }
.fluxo-eyebrow-light { color: var(--fluxo-text-muted); }

/* ── 12. Contextual notes ─────────────────────────────────────────────────── */
.fluxo-note {
  font-size: 12px;
  color: var(--fluxo-text-muted);
  line-height: 1.55;
  margin-top: 8px;
  font-family: var(--fluxo-font-body);
}

/* ── 13. Coming soon / in development ────────────────────────────────────── */
.fluxo-coming-soon {
  opacity: 0.45;
  pointer-events: none;
}
.fluxo-coming-soon-label {
  font-size: 10px;
  color: var(--fluxo-text-faint);
  font-family: var(--fluxo-font-body);
}

/* ── 14. Footer ───────────────────────────────────────────────────────────── */
.fluxo-footer {
  font-size: 12px;
  color: var(--fluxo-text-faint);
  padding: 24px 32px;
  border-top: 1px solid var(--fluxo-border);
  font-family: var(--fluxo-font-body);
}
.fluxo-footer-dark {
  background: var(--fluxo-navy-deep);
  color: rgba(240,234,216,0.35);
}

/* ── 15. Utility classes ──────────────────────────────────────────────────── */
.fluxo-hidden  { display: none !important; }
.fluxo-show    { display: block; }

/* Accessible hide — both class names in use across sample files */
.fluxo-visually-hidden,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}