/* ============================================================
   OrganicFlow · tema "Frosted" — adaptado do design system do Whop
   (Frosted UI / Radix Themes). Accent trocado azul → verde OF #57e39a.
   Dark = padrão (:root). Light = .theme-light. Prefixo de classe: fs-.
   ============================================================ */
:root {
  /* ---- Fonts ---- (UI = Inter · display = Poppins da marca · números = mono) */
  --font-ui: "Inter", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-display: "Poppins", "Inter", system-ui, sans-serif;
  --font-mono: "Geist Mono", "SF Mono", ui-monospace, monospace;

  /* ---- Font sizes ---- */
  --fs-0:10px; --fs-1:12px; --fs-2:14px; --fs-3:16px; --fs-4:18px;
  --fs-5:20px; --fs-6:24px; --fs-7:28px; --fs-8:32px; --fs-9:40px;
  --lh-0:14px; --lh-1:16px; --lh-2:20px; --lh-3:24px; --lh-4:26px;
  --lh-5:28px; --lh-6:30px; --lh-7:34px; --lh-8:38px; --lh-9:48px;
  --ls-1:.000625em; --ls-2:-.005625em; --ls-3:-.01125em; --ls-4:-.01625em;
  --ls-5:-.020625em; --ls-6:-.029375em; --ls-7:-.036875em; --ls-8:-.043125em; --ls-9:-.055625em;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* ---- Spacing (base 4) ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:40px; --space-8:48px; --space-9:64px;

  /* ---- Radius ---- */
  --radius-1:3px; --radius-2:4px; --radius-3:6px; --radius-4:8px;
  --radius-5:12px; --radius-6:16px; --radius-cta:14px; --radius-full:9999px;

  /* ---- Duration / easing ---- */
  --ease-out: cubic-bezier(0,0,.2,1);
  --ease-pop: cubic-bezier(.34,1.56,.64,1);
  --dur-fast:150ms; --dur:300ms;
}

/* ================= DARK (padrão) ================= */
:root, .theme-dark {
  color-scheme: dark;
  --gray-1:#0a0b0a; --gray-2:#121413; --gray-3:#1a1c1b; --gray-4:#222423;
  --gray-5:#2a2c2b; --gray-6:#343635; --gray-7:#454847; --gray-8:#5c605e;
  --gray-9:#6e726f; --gray-11:#b0b4b2; --gray-12:#f4f6f5;

  /* accent = VERDE OrganicFlow (#57e39a travado no 9) */
  --accent-2:#0a1a12; --accent-3:#0e2a1d; --accent-7:#2c7d57; --accent-8:#34a06e;
  --accent-9:#57e39a; --accent-10:#6cebab; --accent-11:#83f0b9; --accent-12:#c9f9de;
  --accent-contrast:#04170f; /* texto ESCURO sobre botão verde (verde é claro) */

  --bg:               var(--gray-1);
  --surface:          var(--gray-2);
  --surface-hover:    var(--gray-3);
  --card:             rgba(255,255,255,.027);
  --border:           var(--gray-6);
  --border-subtle:    var(--gray-4);
  --text:             var(--gray-12);
  --text-secondary:   var(--gray-11);
  --text-muted:       rgba(255,255,255,.686);
  --overlay:          rgba(0,0,0,.6);

  --success-bg:rgba(34,255,153,.118); --success-fg:rgba(70,254,165,.83);
  --warn-fg:#ffe7b3; --warn-bg:rgba(255,200,80,.15);
  --danger-fg:#ff617b; --danger-bg:rgba(255,97,123,.15);
  --info-fg:#a8eeff; --info-bg:rgba(168,238,255,.12);

  --shadow-2:0 0 0 1px color-mix(in oklab,#ffffff2c,#343635),0 1px 1px #0006,0 2px 1px -1px #0006,0 1px 3px #0009;
  --shadow-3:0 0 0 1px color-mix(in oklab,#ffffff2c,#343635),0 3px 8px -2px #0006,0 4px 12px -4px #00000080;
  --shadow-6:0 0 0 1px color-mix(in oklab,#ffffff2c,#343635),0 12px 60px #0003,0 16px 64px #0006,0 16px 36px -20px #000000e6;
  --shadow-btn:inset 0 0 0 1px rgba(255,255,255,.133),0 1px 2px rgba(0,0,0,.05);
  --shadow-input:inset 0 0 0 1px rgba(255,255,255,.133),0 1px 3px -1px rgba(0,0,0,.4);
  --focus-ring:0 0 0 1px var(--accent-8),0 0 0 4px color-mix(in srgb,var(--accent-9) 30%,transparent);
}

/* ================= LIGHT (pro documento/estimate impresso) ================= */
.theme-light {
  color-scheme: light;
  --gray-1:#fcfcfc; --gray-2:#f9f9f9; --gray-3:#f0f0f0; --gray-4:#e8e8e8;
  --gray-5:#e0e0e0; --gray-6:#d9d9d9; --gray-7:#cecece; --gray-8:#bbbbbb;
  --gray-9:#8d8d8d; --gray-11:#646464; --gray-12:#141614;

  --accent-3:#e7fbf0; --accent-7:#8fe3b8; --accent-8:#57e39a;
  --accent-9:#57e39a; --accent-10:#3fd08a; --accent-11:#1f8f5c; --accent-12:#0d3d27;
  --accent-contrast:#04170f;

  --bg:var(--gray-1); --surface:#ffffff; --surface-hover:var(--gray-3);
  --card:#ffffff; --border:rgba(0,0,0,.15); --border-subtle:var(--gray-4);
  --text:var(--gray-12); --text-secondary:var(--gray-11); --text-muted:#646464;
  --overlay:rgba(0,0,0,.4);

  --shadow-input:inset 0 0 0 1px rgba(0,0,0,.12),0 1px 3px -1px rgba(0,0,0,.05);
  --shadow-btn:inset 0 0 0 1px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.05);
  --focus-ring:0 0 0 1px var(--accent-8),0 0 0 4px color-mix(in srgb,var(--accent-9) 25%,transparent);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ---------- Button ---------- */
.fs-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  height:32px;padding:0 var(--space-3);border:0;border-radius:var(--radius-4);
  font:var(--fw-medium) var(--fs-2)/1 var(--font-ui);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.fs-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.fs-btn[disabled]{pointer-events:none;opacity:.5;cursor:not-allowed}
.fs-btn--sm{height:24px;padding:0 var(--space-2);border-radius:var(--radius-3)}
.fs-btn--lg{height:48px;padding:0 var(--space-5);border-radius:var(--radius-cta);font-size:var(--fs-4)}
.fs-btn--solid{background:var(--accent-9);color:var(--accent-contrast);font-weight:var(--fw-semibold)}
.fs-btn--solid:hover{background:var(--accent-10)}
.fs-btn--surface{background:var(--surface);color:var(--text);box-shadow:var(--shadow-btn)}
.fs-btn--surface:hover{background:var(--surface-hover)}
.fs-btn--ghost{background:transparent;color:var(--text-muted);border-radius:var(--radius-3)}
.fs-btn--ghost:hover{background:var(--gray-3);color:var(--text)}
.fs-btn--danger{background:var(--danger-fg);color:#fff}
.fs-btn--block{width:100%}

/* ---------- Input ---------- */
.fs-input{width:100%;height:40px;padding:0 var(--space-3);border:0;border-radius:var(--radius-3);
  background:var(--surface);color:var(--text);font-size:var(--fs-2);font-family:var(--font-ui);
  box-shadow:var(--shadow-input);transition:box-shadow var(--dur-fast) var(--ease-out);outline:none}
textarea.fs-input{height:auto;min-height:92px;padding:var(--space-3);line-height:1.5;resize:vertical}
.fs-input::placeholder{color:var(--gray-9)}
.fs-input:focus{box-shadow:var(--focus-ring)}
.fs-input[aria-invalid="true"]{box-shadow:inset 0 0 0 1px var(--danger-fg),0 0 0 4px color-mix(in srgb,var(--danger-fg) 25%,transparent)}
.fs-field{display:flex;flex-direction:column;gap:var(--space-2)}
.fs-label{font-size:var(--fs-1);font-weight:var(--fw-medium);color:var(--text-secondary);letter-spacing:.02em}

/* ---------- Card ---------- */
.fs-card{background:var(--card);border:1px solid var(--border-subtle);border-radius:var(--radius-6);padding:var(--space-4)}
.fs-panel{background:var(--surface);border-radius:var(--radius-6);padding:var(--space-4)}

/* ---------- Badge ---------- */
.fs-badge{display:inline-flex;align-items:center;height:20px;padding:2px var(--space-2);
  border-radius:var(--radius-3);font-size:var(--fs-1);font-weight:var(--fw-medium);line-height:1}
.fs-badge--success{background:var(--success-bg);color:var(--success-fg)}
.fs-badge--warn{background:var(--warn-bg);color:var(--warn-fg)}
.fs-badge--danger{background:var(--danger-bg);color:var(--danger-fg)}
.fs-badge--info{background:var(--info-bg);color:var(--info-fg)}

/* ---------- Table ---------- */
.fs-table{width:100%;border-collapse:collapse;font-size:var(--fs-2)}
.fs-table th{height:40px;padding:0 var(--space-4);text-align:left;font-weight:var(--fw-bold);
  border-bottom:1px solid var(--border-subtle);color:var(--text-secondary)}
.fs-table td{height:52px;padding:0 var(--space-4)}
.fs-table tbody tr{transition:background var(--dur-fast) var(--ease-out)}
.fs-table tbody tr:hover{background:var(--surface)}

/* ---------- Modal ---------- */
.fs-overlay{position:fixed;inset:0;background:var(--overlay);display:grid;place-items:center;padding:var(--space-4);z-index:50}
.fs-modal{background:var(--surface);border-radius:var(--radius-6);max-width:500px;width:100%;
  box-shadow:var(--shadow-6);overflow:hidden;animation:fs-pop var(--dur) var(--ease-pop)}
@keyframes fs-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* ---------- Nav item ---------- */
.fs-nav-item{display:flex;align-items:center;gap:var(--space-3);height:40px;padding:0 10px;
  border-radius:var(--radius-4);color:var(--text-secondary);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out)}
.fs-nav-item:hover{background:var(--surface)}
.fs-nav-item[aria-current="page"]{background:var(--surface);color:var(--text)}