/* ============================================================
   Cash Flow Engineering — design system
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600;700&family=Geist:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap");

:root {
  /* Brand block palette — pulled from the puzzle cube */
  --cfe-blue:   #1E5BA8;
  --cfe-green:  #3FA34D;
  --cfe-orange: #F08326;
  --cfe-purple: #7B4F9E;
  --cfe-red:    #E04E36;
  --cfe-yellow: #F4B93C;

  /* Soft tints */
  --cfe-blue-soft:   rgba(30, 91, 168, 0.10);
  --cfe-green-soft:  rgba(63, 163, 77, 0.12);
  --cfe-orange-soft: rgba(240, 131, 38, 0.12);
  --cfe-purple-soft: rgba(123, 79, 158, 0.12);
  --cfe-red-soft:    rgba(224, 78, 54, 0.12);
  --cfe-yellow-soft: rgba(244, 185, 60, 0.16);

  /* Light-theme neutrals (warm paper) */
  --cfe-bg:         #FAF6EE;       /* page bg */
  --cfe-bg-2:       #F2EBDC;       /* secondary surface */
  --cfe-surface:    #FFFFFF;       /* card */
  --cfe-surface-2:  #FBF7EE;       /* sub-card */
  --cfe-ink:        #0E1726;       /* primary text */
  --cfe-ink-2:      #2B3645;       /* secondary text */
  --cfe-ink-3:      #5C6B7E;       /* tertiary text */
  --cfe-line:       rgba(14, 23, 38, 0.10);
  --cfe-line-2:     rgba(14, 23, 38, 0.06);
  --cfe-shadow:     0 1px 2px rgba(14,23,38,0.04), 0 12px 32px rgba(14,23,38,0.06);
  --cfe-shadow-lg:  0 4px 12px rgba(14,23,38,0.06), 0 28px 60px rgba(14,23,38,0.10);

  /* Block-motif accent (the multi-color stripe) */
  --cfe-block-stripe: linear-gradient(
    90deg,
    var(--cfe-blue)   0%, var(--cfe-blue)   16.66%,
    var(--cfe-green)  16.66%, var(--cfe-green)  33.33%,
    var(--cfe-orange) 33.33%, var(--cfe-orange) 50%,
    var(--cfe-purple) 50%,    var(--cfe-purple) 66.66%,
    var(--cfe-red)    66.66%, var(--cfe-red)    83.33%,
    var(--cfe-yellow) 83.33%, var(--cfe-yellow) 100%
  );

  /* Typography */
  --cfe-serif: "Fraunces", "Iowan Old Style", "Apple Garamond", Georgia, serif;
  --cfe-sans:  "Geist", "Inter var", -apple-system, "Segoe UI", sans-serif;
  --cfe-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Radius */
  --cfe-r-sm: 6px;
  --cfe-r-md: 10px;
  --cfe-r-lg: 16px;
  --cfe-r-xl: 24px;
  --cfe-r-pill: 999px;

  /* Spacing scale (4-step) */
  --cfe-s-1: 4px;
  --cfe-s-2: 8px;
  --cfe-s-3: 12px;
  --cfe-s-4: 16px;
  --cfe-s-5: 20px;
  --cfe-s-6: 24px;
  --cfe-s-7: 32px;
  --cfe-s-8: 40px;
  --cfe-s-9: 56px;
  --cfe-s-10: 80px;
}

/* Dark "Studio" theme */
[data-theme="dark"] {
  --cfe-bg:        #0B1220;
  --cfe-bg-2:      #0F1A2C;
  --cfe-surface:   #13203A;
  --cfe-surface-2: #1A2A47;
  --cfe-ink:       #F4F1E8;
  --cfe-ink-2:     #C7CDD9;
  --cfe-ink-3:     #8C97AA;
  --cfe-line:      rgba(255,255,255,0.10);
  --cfe-line-2:    rgba(255,255,255,0.06);
  --cfe-shadow:    0 1px 2px rgba(0,0,0,0.4), 0 12px 36px rgba(0,0,0,0.55);
  --cfe-shadow-lg: 0 4px 12px rgba(0,0,0,0.45), 0 28px 70px rgba(0,0,0,0.6);

  /* lighten the brand colors slightly so they sing on dark */
  --cfe-blue:   #4D8BD8;
  --cfe-green:  #5CC36C;
  --cfe-orange: #FF9C46;
  --cfe-purple: #A075C5;
  --cfe-red:    #FF7259;
  --cfe-yellow: #FFCD5C;
}

/* ============================================================
   Base
   ============================================================ */
.cfe-root {
  font-family: var(--cfe-sans);
  color: var(--cfe-ink);
  background: var(--cfe-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.cfe-root *, .cfe-root *::before, .cfe-root *::after { box-sizing: border-box; }

.cfe-serif { font-family: var(--cfe-serif); letter-spacing: -0.01em; }
.cfe-mono  { font-family: var(--cfe-mono); }
.cfe-eyebrow {
  font-family: var(--cfe-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cfe-ink-3);
}
.cfe-muted { color: var(--cfe-ink-3); }
.cfe-muted-2 { color: var(--cfe-ink-2); }

/* ============================================================
   Surfaces
   ============================================================ */
.cfe-card {
  background: var(--cfe-surface);
  border: 1px solid var(--cfe-line);
  border-radius: var(--cfe-r-lg);
  box-shadow: var(--cfe-shadow);
}
.cfe-card-flat {
  background: var(--cfe-surface);
  border: 1px solid var(--cfe-line);
  border-radius: var(--cfe-r-lg);
}
.cfe-card-tinted {
  background: var(--cfe-surface-2);
  border: 1px solid var(--cfe-line-2);
  border-radius: var(--cfe-r-lg);
}

/* The signature block-motif stripe at the top of feature cards */
.cfe-block-top {
  position: relative;
  overflow: hidden;
}
.cfe-block-top::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--cfe-block-stripe);
}

/* ============================================================
   Buttons
   ============================================================ */
.cfe-btn {
  font-family: var(--cfe-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  border-radius: var(--cfe-r-md);
  padding: 10px 16px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.08s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.cfe-btn:active { transform: translateY(1px); }
.cfe-btn-primary {
  background: var(--cfe-blue);
  color: #fff;
}
.cfe-btn-primary:hover { background: #174A8E; }

.cfe-btn-accent {
  background: var(--cfe-green);
  color: #fff;
}
.cfe-btn-accent:hover { background: #338A40; }

.cfe-btn-ghost {
  background: transparent;
  color: var(--cfe-ink);
  border-color: var(--cfe-line);
}
.cfe-btn-ghost:hover { background: var(--cfe-bg-2); }

.cfe-btn-link {
  background: transparent;
  color: var(--cfe-blue);
  padding: 6px 0;
  border: none;
}

.cfe-btn-sm { padding: 6px 12px; font-size: 13px; border-radius: var(--cfe-r-sm); }
.cfe-btn-lg { padding: 14px 22px; font-size: 15px; }

/* ============================================================
   Pills / chips / badges
   ============================================================ */
.cfe-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--cfe-r-pill);
  font-size: 12px;
  font-weight: 500;
  background: var(--cfe-bg-2);
  color: var(--cfe-ink-2);
  border: 1px solid var(--cfe-line);
}
.cfe-chip-blue   { background: var(--cfe-blue-soft);   color: var(--cfe-blue);   border-color: transparent; }
.cfe-chip-green  { background: var(--cfe-green-soft);  color: var(--cfe-green);  border-color: transparent; }
.cfe-chip-orange { background: var(--cfe-orange-soft); color: var(--cfe-orange); border-color: transparent; }
.cfe-chip-purple { background: var(--cfe-purple-soft); color: var(--cfe-purple); border-color: transparent; }
.cfe-chip-red    { background: var(--cfe-red-soft);    color: var(--cfe-red);    border-color: transparent; }
.cfe-chip-yellow { background: var(--cfe-yellow-soft); color: #C2861E;           border-color: transparent; }
[data-theme="dark"] .cfe-chip-yellow { color: var(--cfe-yellow); }

/* Square block tag — the puzzle motif as a UI element */
.cfe-block-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--cfe-sans);
  color: var(--cfe-ink-2);
}
.cfe-block-tag::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--block-color, var(--cfe-blue));
  box-shadow: 1.5px 1.5px 0 rgba(14,23,38,0.18);
}

/* Status dot */
.cfe-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cfe-dot-green  { background: var(--cfe-green); }
.cfe-dot-blue   { background: var(--cfe-blue); }
.cfe-dot-orange { background: var(--cfe-orange); }
.cfe-dot-red    { background: var(--cfe-red); }

/* ============================================================
   Inputs
   ============================================================ */
.cfe-input,
.cfe-textarea {
  font-family: var(--cfe-sans);
  font-size: 14px;
  color: var(--cfe-ink);
  background: var(--cfe-surface);
  border: 1px solid var(--cfe-line);
  border-radius: var(--cfe-r-md);
  padding: 11px 14px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cfe-input:focus, .cfe-textarea:focus {
  border-color: var(--cfe-blue);
  box-shadow: 0 0 0 3px var(--cfe-blue-soft);
}
.cfe-textarea { resize: vertical; min-height: 80px; }

.cfe-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--cfe-ink-2);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

/* ============================================================
   Tables
   ============================================================ */
.cfe-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.cfe-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cfe-ink-3);
  padding: 10px 16px;
  border-bottom: 1px solid var(--cfe-line);
  background: var(--cfe-bg-2);
}
.cfe-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--cfe-line-2);
  vertical-align: middle;
}
.cfe-table tbody tr:hover td { background: var(--cfe-bg-2); }

/* ============================================================
   Block / puzzle motif primitives
   ============================================================ */

/* The 6-color block stripe used as a divider */
.cfe-stripe {
  height: 4px;
  border-radius: 2px;
  background: var(--cfe-block-stripe);
}
.cfe-stripe-thin {
  height: 2px;
  background: var(--cfe-block-stripe);
}

/* A "stack" of small colored squares — used for citations/badges/loaders */
.cfe-blocks {
  display: inline-flex;
  gap: 3px;
}
.cfe-blocks > i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--cfe-blue);
  box-shadow: inset -1px -1px 0 rgba(0,0,0,0.18);
}
.cfe-blocks > i:nth-child(1) { background: var(--cfe-orange); }
.cfe-blocks > i:nth-child(2) { background: var(--cfe-purple); }
.cfe-blocks > i:nth-child(3) { background: var(--cfe-green); }
.cfe-blocks > i:nth-child(4) { background: var(--cfe-blue); }
.cfe-blocks > i:nth-child(5) { background: var(--cfe-red); }
.cfe-blocks > i:nth-child(6) { background: var(--cfe-yellow); }

/* Loader: pulsing block sequence */
.cfe-loader {
  display: inline-flex;
  gap: 3px;
}
.cfe-loader > i {
  width: 10px; height: 10px; border-radius: 2px;
  animation: cfe-block-pulse 1.4s infinite ease-in-out;
  box-shadow: inset -1px -1px 0 rgba(0,0,0,0.2);
}
.cfe-loader > i:nth-child(1) { background: var(--cfe-orange); animation-delay: 0s; }
.cfe-loader > i:nth-child(2) { background: var(--cfe-purple); animation-delay: 0.15s; }
.cfe-loader > i:nth-child(3) { background: var(--cfe-green);  animation-delay: 0.3s; }
.cfe-loader > i:nth-child(4) { background: var(--cfe-blue);   animation-delay: 0.45s; }
.cfe-loader > i:nth-child(5) { background: var(--cfe-red);    animation-delay: 0.6s; }
.cfe-loader > i:nth-child(6) { background: var(--cfe-yellow); animation-delay: 0.75s; }
@keyframes cfe-block-pulse {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.55; }
  40%           { transform: translateY(-4px); opacity: 1; }
}

/* ============================================================
   Wordmark
   ============================================================ */
.cfe-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}
.cfe-wordmark .cfe-wm-text {
  font-family: var(--cfe-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}
.cfe-wordmark .cfe-wm-cash { color: var(--cfe-blue); }
.cfe-wordmark .cfe-wm-flow { color: var(--cfe-green); }
.cfe-wordmark .cfe-wm-eng {
  display: block;
  font-family: var(--cfe-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.42em;
  color: var(--cfe-blue);
  margin-top: 4px;
}

/* ============================================================
   Citation block (chat) — block tags reference the doc's color
   ============================================================ */
.cfe-citation {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cfe-bg-2);
  border: 1px solid var(--cfe-line);
  border-radius: var(--cfe-r-sm);
  padding: 3px 8px 3px 6px;
  font-size: 12px;
  font-family: var(--cfe-mono);
  color: var(--cfe-ink-2);
}
.cfe-citation::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--c-color, var(--cfe-blue));
}

/* ============================================================
   Small reusable atoms
   ============================================================ */
.cfe-divider { height: 1px; background: var(--cfe-line); border: 0; margin: 0; }
.cfe-divider-stripe {
  height: 1px;
  background: var(--cfe-block-stripe);
  border: 0;
}

.cfe-kbd {
  display: inline-block;
  font-family: var(--cfe-mono);
  font-size: 11px;
  background: var(--cfe-bg-2);
  border: 1px solid var(--cfe-line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--cfe-ink-2);
}

/* Numeric — large */
.cfe-num {
  font-family: var(--cfe-serif);
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* ============================================================
   Block grid background — used as decorative backdrop
   ============================================================ */
.cfe-grid-bg {
  background-image:
    linear-gradient(var(--cfe-line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--cfe-line-2) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}

/* ============================================================
   Sidebar nav
   ============================================================ */
.cfe-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cfe-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--cfe-r-sm);
  color: var(--cfe-ink-2);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  text-decoration: none;
}
.cfe-nav-item:hover { background: var(--cfe-bg-2); color: var(--cfe-ink); }
.cfe-nav-item.is-active {
  background: var(--cfe-blue-soft);
  color: var(--cfe-blue);
}
.cfe-nav-item.is-active::before {
  content: "";
  position: absolute;
  left: -1px; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--cfe-blue);
  border-radius: 2px;
}
.cfe-nav-item .cfe-nav-icon {
  width: 16px; height: 16px;
  flex-shrink: 0;
}

/* ============================================================
   Utility — flex/grid helpers (don't overuse, but a few are handy)
   ============================================================ */
.cfe-row { display: flex; gap: var(--cfe-s-3); align-items: center; }
.cfe-col { display: flex; flex-direction: column; gap: var(--cfe-s-3); }
.cfe-spread { display: flex; align-items: center; justify-content: space-between; }