/* ============================================================
   Virtual CFO Skill Portal — styles
   Tokens ported verbatim from the VCFO design system; components
   (Card/Badge/Button/Avatar) recreated as plain CSS classes.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Brand blue ramp ---- */
  --vcfo-blue-900: #004e85;
  --vcfo-blue-800: #0062a8;
  --vcfo-blue-700: #0072c6;
  --vcfo-blue-600: #0090d6;
  --vcfo-blue-500: #00a2ff;
  --vcfo-cyan-400: #00b4ea;
  --vcfo-cyan-300: #34c8f2;
  --vcfo-cyan-200: #7bdcf6;
  --vcfo-cyan-100: #cdeffb;
  --vcfo-blue-050: #eaf7fe;

  --vcfo-gradient: linear-gradient(100deg, #0072c6 0%, #0090d6 45%, #00b4ea 100%);
  --vcfo-gradient-vertical: linear-gradient(180deg, #0090d6 0%, #00b4ea 100%);
  --vcfo-gradient-soft: linear-gradient(100deg, #eaf7fe 0%, #cdeffb 100%);

  --vcfo-ink-900: #1c1f23;
  --vcfo-ink-800: #2b2f34;
  --vcfo-ink-700: #3e4044;
  --vcfo-grey-600: #5e5e5e;
  --vcfo-grey-500: #7c8085;
  --vcfo-grey-400: #a4a8ad;
  --vcfo-grey-300: #cbced2;
  --vcfo-grey-200: #e3e5e8;
  --vcfo-grey-150: #eef0f2;
  --vcfo-grey-100: #f5f6f8;
  --vcfo-white: #ffffff;

  --vcfo-teal: #16e7cf;
  --vcfo-green: #2bb24c;
  --vcfo-yellow: #f5b81f;
  --vcfo-coral: #ff644e;
  --vcfo-pink: #ef5fa7;
  --vcfo-green-bright: #61d836;

  --color-primary: var(--vcfo-blue-500);
  --color-primary-strong: var(--vcfo-blue-700);
  --color-primary-hover: var(--vcfo-blue-600);
  --color-primary-press: var(--vcfo-blue-800);
  --color-accent-cyan: var(--vcfo-cyan-400);
  --color-on-primary: #ffffff;

  --text-strong: var(--vcfo-ink-900);
  --text-body: var(--vcfo-ink-700);
  --text-muted: var(--vcfo-grey-500);
  --text-subtle: var(--vcfo-grey-400);
  --text-on-brand: #ffffff;
  --text-link: var(--vcfo-blue-700);

  --surface-page: #ffffff;
  --surface-canvas: var(--vcfo-grey-100);
  --surface-card: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: var(--vcfo-grey-100);
  --surface-brand: var(--vcfo-blue-700);
  --surface-brand-soft: var(--vcfo-blue-050);

  --border-subtle: var(--vcfo-grey-200);
  --border-default: var(--vcfo-grey-300);
  --border-strong: var(--vcfo-grey-400);
  --border-brand: var(--vcfo-blue-500);

  --status-success: var(--vcfo-green);
  --status-warning: var(--vcfo-yellow);
  --status-danger: var(--vcfo-coral);
  --status-info: var(--vcfo-blue-500);

  --focus-ring: rgba(0, 162, 255, 0.40);

  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --bevel: 18px;
  --bevel-lg: 36px;
  --clip-bevel-tr: polygon(0 0, calc(100% - var(--bevel)) 0, 100% var(--bevel), 100% 100%, 0 100%);
  --clip-bevel-br: polygon(0 0, 100% 0, 100% calc(100% - var(--bevel)), calc(100% - var(--bevel)) 100%, 0 100%);

  --shadow-xs: 0 1px 2px rgba(28, 31, 35, 0.06);
  --shadow-sm: 0 1px 3px rgba(28, 31, 35, 0.08), 0 1px 2px rgba(28, 31, 35, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 50, 80, 0.10), 0 2px 4px rgba(20, 50, 80, 0.06);
  --shadow-lg: 0 12px 28px rgba(20, 50, 80, 0.14), 0 4px 10px rgba(20, 50, 80, 0.07);
  --shadow-brand: 0 10px 24px rgba(0, 114, 198, 0.28);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;

  --font-sans: "Helvetica Neue", Arimo, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --tracking-snug: -0.01em;
  --tracking-caps: 0.12em;
}

@keyframes vcfo-spin { to { transform: rotate(360deg); } }
@keyframes vcfo-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--surface-canvas); font-family: var(--font-sans); color: var(--text-body); }
#app { height: 100vh; width: 100%; }
::placeholder { color: var(--text-subtle); }
button { font-family: var(--font-sans); }

/* ---- Card ---- */
.vcfo-card {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  font-family: var(--font-sans);
  color: var(--text-body);
  transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.vcfo-card--interactive { cursor: pointer; }
.vcfo-card--interactive:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* ---- Badge ---- */
.vcfo-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px;
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  line-height: 1; border-radius: var(--radius-pill); white-space: nowrap;
}
.vcfo-badge--neutral { color: var(--vcfo-grey-600); background: var(--vcfo-grey-150); }
.vcfo-badge--brand { color: var(--vcfo-blue-700); background: var(--vcfo-blue-050); }

/* ---- Button ---- */
.vcfo-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug);
  line-height: 1; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), filter var(--duration-base) var(--ease-standard);
  white-space: nowrap; user-select: none;
}
.vcfo-btn:active:not(:disabled) { transform: scale(0.985); }
.vcfo-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.vcfo-btn--sm { height: 34px; padding: 0 14px; font-size: var(--text-sm); gap: 6px; }
.vcfo-btn--md { height: 42px; padding: 0 20px; font-size: var(--text-base); gap: 8px; }
.vcfo-btn--primary { background: var(--vcfo-gradient); color: var(--color-on-primary); box-shadow: var(--shadow-brand); }
.vcfo-btn--primary:hover:not(:disabled) { filter: brightness(1.06); }
.vcfo-btn--secondary { background: var(--surface-card); color: var(--text-strong); border-color: var(--border-default); box-shadow: var(--shadow-xs); }
.vcfo-btn--secondary:hover:not(:disabled) { border-color: var(--border-brand); background: var(--surface-brand-soft); }

/* ---- Avatar ---- */
.vcfo-avatar {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--vcfo-gradient); color: #fff; font-family: var(--font-sans); font-weight: var(--weight-semibold);
  flex-shrink: 0; overflow: hidden;
}
.vcfo-avatar--ring { box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--color-primary); }

/* ---- Scrollbars (subtle) ---- */
.scroll-y { overflow-y: auto; }
.scroll-y::-webkit-scrollbar { width: 8px; }
.scroll-y::-webkit-scrollbar-thumb { background: var(--vcfo-grey-300); border-radius: 999px; }
.scroll-y::-webkit-scrollbar-track { background: transparent; }